/* ============================================================================
   8 · BRAND WALL — v1 Block 9: two rows running in opposite directions

   Recorded exception, decided by the client:
   - The brand wall runs continuously (v1 as built) and does not stop on
     hover. There is no pause button either, so nothing stops it but
     reduced motion: WCAG 2.2.2 flagged for the §19 review.
   ========================================================================= */

/* Extra bottom step: the headline's half-leading adds ~8px above the letters,
   while the tiles' hard edge reads closer, so equal padding looked bottom-tight. */
.logos { padding: var(--space-section) 0 calc(var(--space-section) + var(--space-6)); overflow: hidden; background: var(--color-canvas-tinted); }
.logos .section-head { margin: 0 auto var(--space-12); text-align: center; }
/* Same pairing as the figure sections' .layer__title / .layer__subhead. */
.section-head__subhead {
  margin: var(--space-4) 0 0;
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--purple-700) 75%, var(--purple-300));   /* layers.css's --layers-accent, 9.0:1 on white */
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-white) 8%, var(--color-white) 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--color-white) 8%, var(--color-white) 92%, transparent);
}
.marquee + .marquee { margin-top: var(--space-4); }
.marquee__track {
  display: flex; gap: var(--space-4);
  width: max-content;
  margin: 0; padding: 0; list-style: none;
  animation: marquee 130s linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.logos:focus-within .marquee__track,
.logos.is-paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.logo {
  display: grid; place-items: center;
  min-width: 200px; height: 88px;
  padding: 0 var(--space-6);
  box-sizing: border-box;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  transition: border-color var(--motion-fast);
}
.logo:hover { border-color: var(--color-action-primary); }
/* A linked logo: the link fills the tile, so the whole tile is the target.
   Pressed darkens the border; the focus ring is drawn inside the tile, as
   the row clips anything outside it. */
.logo:has(.logo__link) { padding: 0; }
.logo__link {
  align-self: stretch; justify-self: stretch;
  display: grid; place-items: center;
  padding: 0 var(--space-6);
  border-radius: inherit;
}
.logo:has(.logo__link:active) { border-color: var(--color-action-primary-active); }
.logo__link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }
.logo--reversed .logo__link:focus-visible { outline-color: var(--color-focus-ring-dark); }
/* §9: partner marks are shown as supplied, never recoloured or filtered. */
.logo img { display: block; width: auto; height: auto; max-width: 160px; max-height: var(--space-12); }
/* Stacked and emblem marks (under 2.2:1) get more height so they read at the same weight as wordmarks. */
.logo--stacked img { max-height: var(--space-16); }
/* Marks that exist only as white artwork sit on the dark canvas instead. */
.logo--reversed { background: var(--color-canvas-dark); border-color: var(--color-canvas-dark); }

/* Funder: static, unboxed, centred on the section head's axis, right above
   the moving rows. §9: shown as supplied. */
.logos__funder { margin-bottom: var(--space-12); }
.logos__funder img { display: block; width: auto; height: var(--space-24); margin: 0 auto; }
.logos__funder-link { display: block; width: fit-content; margin: 0 auto; border-radius: var(--radius-md); }
.logos__funder-link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.logos__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4);
  margin: var(--space-12) 0 0;
  padding: 0 var(--space-6);
  font-size: var(--type-body-sm);
}
/* button-ghost */
.logos__pause {
  min-height: 44px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-action-primary);
  font: 600 var(--type-label) / 1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--motion-fast);
}
.logos__pause:hover  { background: var(--color-canvas-tinted); }
.logos__pause:active { background: var(--color-canvas-pressed); }
.logos__pause:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* §8.3: under reduced motion the brand wall stops and wraps. */

@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee__track [aria-hidden="true"] { display: none; }
  .logos__pause { display: none; }
}