/* Section "logos": a row of one-colour logos (exhibitors) on the dark ground, without tiles. */

/* right after the partner tiles it reads as their continuation: a smaller gap than between
   sections (three quarters of it, shrinking with it on small screens), and no double gap */
.logos { padding-block: calc(var(--section-gap-s) * 0.75) var(--section-gap-s); }
.partners:has(+ .logos) { padding-bottom: 0; }
.logos__title { margin-bottom: var(--space-xl); color: var(--color-ink); font-family: var(--font-body); font-weight: 800; font-stretch: var(--wdth-wide); font-size: var(--type-title); line-height: var(--leading-tight); }
/* flex, not grid: on small screens an unfinished last row can sit centred (below) */
.logos__list {
  --cols: 5;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--space-xl) var(--gap-columns);
}
.logos__item { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap-columns)) / var(--cols)); display: grid; place-items: center; min-width: 0; padding-inline: var(--space-sm); }
/* --h: the logo's display height from the content file, to balance logos of different shapes.
   When a wide logo is narrowed by max-width, object-fit keeps its proportions (no stretching). */
.logos__item img { height: var(--h); width: auto; max-width: 100%; object-fit: contain; opacity: 0.85; transition: opacity var(--dur-short) var(--ease-out); }
.logos__item a { display: block; border-radius: var(--radius-card); }
.logos__item a:hover img { opacity: 1; }
.logos__item a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (max-width: 60rem) {
  .logos__list { --cols: 3; }
  .logos__item img { height: calc(var(--h) * 0.75); }
}
/* stacked layouts centre their heading (like partners above) and the last, unfinished row */
@media (max-width: 48rem) {
  .logos__title { text-align: center; }
  .logos__list { justify-content: center; }
}
/* phones: two logos per row, so each stays large enough to recognise */
@media (max-width: 30rem) { .logos__list { --cols: 2; } }