/* ==========================================================================
   Band — doorlopende rij namen (bijvoorbeeld partners)
   --------------------------------------------------------------------------
   Zonder JavaScript of bij reduced-motion: een stilstaande, afbrekende rij.
   assets/js/marquee.js dupliceert de lijst, zet .is-running en toont een
   pauzeknop (bewegende inhoud moet te pauzeren zijn, WCAG 2.2.2).
   ========================================================================== */

.marquee {
  padding-block: var(--space-8); /* mobiel compact; vanaf 768px ruimer */
  overflow: hidden;
  border-block: var(--border-width) solid var(--border);
}

.marquee__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.marquee__label {
  color: var(--fg-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

.marquee__toggle {
  padding: var(--space-1) 0;
  background: none;
  border: 0;
  border-bottom: var(--border-width) solid currentColor;
  color: var(--fg-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
}

.marquee__toggle:hover {
  color: var(--fg-1);
}

/* Stilstaand: links gelijk met de container, ook breder dan --shell-max. */
.marquee__track {
  display: flex;
  padding-inline: max(var(--shell-pad), calc((100% - var(--shell-max)) / 2 + var(--shell-pad)));
}

.marquee__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-12);
  padding: 0;
  color: var(--fg-body);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  letter-spacing: var(--tr-tight);
  list-style: none;
}

.marquee__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  opacity: 0.7;
}

/* Logo's: rustig in grijstinten, in eigen kleur bij hover. Hoogte per
   logo via --logo-h (zie de partnerlijst), breedte volgt de verhouding. */
.marquee__logo {
  width: auto;
  height: var(--logo-h, 2rem);
  filter: grayscale(1);
  transition: filter var(--dur-2) var(--ease-plain);
}

.marquee__list li:hover .marquee__logo {
  filter: none;
}

/* Scheidingspunt na elke naam behalve de laatste (stilstaande rij). */
.marquee__list li:not(:last-child)::after {
  content: "·";
  color: var(--accent);
}

/* Lopende band ------------------------------------------------------------
   Twee gelijke lijsten naast elkaar; elke lijst eindigt met dezelfde
   tussenruimte, zodat -50% precies één lijst verder is en de lus naadloos. */
@media (prefers-reduced-motion: no-preference) {
  .marquee.is-running .marquee__track {
    width: max-content;
    padding-inline: 0;
    animation: marquee 50s linear infinite;
  }

  .marquee.is-running .marquee__list {
    flex-wrap: nowrap;
    padding-inline-end: var(--space-12);
    gap: var(--space-12);
  }

  .marquee.is-running .marquee__list li::after {
    content: "·";
    color: var(--accent);
  }

  /* Pauze via de knop, of zolang de muis of focus op de band zelf staat.
     Niet op de hele strook: de knop staat erin, en zou na "Afspelen" de
     band anders stil houden zolang hij focus of de muis heeft. */
  .marquee.is-paused .marquee__track,
  .marquee.is-running .marquee__track:hover,
  .marquee.is-running .marquee__track:focus-within {
    animation-play-state: paused;
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (min-width: 48em) {
  .marquee {
    padding-block: var(--space-20);
  }
}