/* Section "partners": organiser, partner and sponsor tiles, each with a logo (or the name while
   no logo is there) and the role below. */

.partners { padding-block: var(--section-gap-s); }
.partners__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.partners__item { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.partners__mark {
  /* the name's size follows the tile's width (cqi below), so long names fit narrow tiles */
  container-type: inline-size;
  aspect-ratio: 3 / 2; display: grid; place-items: center; padding: var(--space-md);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  text-decoration: none;
}
.partners__mark img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-lg); }
/* tiles with a link: lighten on hover, outline on keyboard focus */
a.partners__mark { color: inherit; transition: background-color var(--dur-short) var(--ease-out); }
a.partners__mark:hover { background: var(--color-paper-3); }
a.partners__mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.partners__name {
  text-align: center; color: var(--color-ink); font-weight: 800; font-stretch: var(--wdth-wide); line-height: var(--leading-tight);
  /* never larger than other titles; a little smaller in narrower tiles so long names fit */
  font-size: min(var(--type-title), 7cqi);
  overflow-wrap: break-word; text-wrap: balance; /* no lone "AG" on the last line */
}
.partners__role { color: var(--color-ochre); }
/* optional hint under the heading ("click a logo"): the heading gives up its gap to the note */
.partners .section-head:has(+ .partners__note) { margin-bottom: var(--space-sm); }
/* small and quiet, like the hint under the pinball game */
.partners__note { margin: 0 0 var(--space-2xl); color: var(--color-muted); font-size: var(--type-small); }
/* on small screens the heading sits centred, like the cards heading */
@media (max-width: 48rem) { .partners .section-head, .partners__note, .partners__role { text-align: center; margin-inline: auto; } }
/* below tablet width three tiles get too narrow for the names: one per row */
@media (max-width: 48rem) {
  .partners__list { grid-template-columns: minmax(0, 1fr); }
  .partners__mark { aspect-ratio: 5 / 2; }
}