/* assets/logorot.css · rotating logo strip (build spec B3; replaces the 70s marquees .nh-marq / .pdp-marq)
   The dimming (silhouette + opacity) lives in components.css (owner request, 29 Oct 2026). This file is layout + the swap.
   Six slots swap in place every 4s (assets/logorot.js); reduced motion shows 12 logos in two static rows (3×2 on phones). */
.logorot{display:grid;grid-template-columns:200px minmax(0,1fr) auto;align-items:center;gap:24px}
.logorot__k{margin:0}
.logorot__slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.logorot__slot{position:relative;display:flex;align-items:center;justify-content:center;height:64px;padding:0 12px;min-width:0}
.logorot__slot + .logorot__slot::before{content:"";position:absolute;inset-inline-start:0;top:14px;bottom:14px;width:1px;background:var(--line)}
.logorot__slot img{display:block;width:auto;height:var(--h,30px);max-width:100%;object-fit:contain;
  transition:opacity var(--dur-quick) var(--ease-standard), filter var(--dur-quick) var(--ease-standard)}
/* exit: fade out and soften; enter is the same transition reversed on the standard curve */
.logorot__slot img.is-out{opacity:0;filter:var(--logo-filter) blur(4px);transition-timing-function:var(--ease-exit)}
html[data-mode="dark"] .logorot__slot img.is-out{filter:var(--logo-filter-dark) blur(4px)}
.logorot__slot--rm{display:none}   /* the second row, reduced motion only */
/* Pause/Play (WCAG 2.2.2: the strip loops for longer than 5s). Shown by logorot.js, so never without JS or under reduced motion. */
.logorot__pause{min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;
  transition:border-color var(--dur-instant) var(--ease-standard)}
.logorot__pause:hover{border-color:var(--ink)}
.logorot__pause:focus-visible{outline:3px solid var(--focus-ring,#3B06D4);outline-offset:2px}
.logorot__pause[hidden]{display:none}

@media (max-width:560px){
  .logorot{grid-template-columns:minmax(0,1fr);gap:12px;justify-items:center}
  .logorot__pause{min-height:44px}
  .logorot__slots{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px}
  .logorot__slot{height:52px;padding:0 8px}
  .logorot__slot img{height:calc(var(--h,30px) * .82)}
  .logorot__slot:nth-child(3n + 1)::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .logorot__slot img{transition:none}
  .logorot__pause{display:none}
  .logorot__slot img.is-out{opacity:var(--logo-o);filter:var(--logo-filter)}
}
@media (prefers-reduced-motion:reduce) and (min-width:561px){
  .logorot__slot--rm{display:flex}
  .logorot__slot:nth-child(6n + 1)::before{display:none}
  .logorot__slots{row-gap:4px}
}