/* ==========================================================================
   Home — Logobalk opdrachtgevers (CSS-marquee)
   ========================================================================== */
.s-logos {
  --s-logos-ruimte: clamp(1.4rem, 1rem + 1.2vw, 2.25rem); /* ruimte rond de bolletjes */
  --s-logos-fade: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);     /* vervaagde randen */
  --s-logos-duur: 50s;                                      /* één volledige lijst */
}

/* Mobiel: label + pauzeknop boven, baan eronder over de volle breedte */
.s-logos__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titel pauze"
    "baan  baan";
  align-items: center;
  gap: 1.25rem 1.5rem;
}

.s-logos__titel {
  grid-area: titel;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--tekst-zacht);
}

/* --- Baan ------------------------------------------------------------------
   De mask vervaagt de randen; alleen de alfa telt, dus de kleur is een token. */
.s-logos__marquee {
  grid-area: baan;
  display: flex;
  min-width: 0;
  overflow: hidden;
  margin-inline: calc(-1 * var(--gutter));
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--navy) var(--s-logos-fade), var(--navy) calc(100% - var(--s-logos-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, var(--navy) var(--s-logos-fade), var(--navy) calc(100% - var(--s-logos-fade)), transparent);
}

/* Elke kopie schuift precies haar eigen breedte op: naadloos, ongeacht het aantal namen */
.s-logos__lijst {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  animation: s-logos-baan var(--s-logos-duur) linear infinite;
}

.s-logos__naam {
  display: flex;
  align-items: center;
  font-size: clamp(1.1rem, 1rem + .3vw, 1.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--tekst-zacht);
  white-space: nowrap;
}
.s-logos__naam::after {
  content: "";
  flex: none;
  width: .42rem;
  height: .42rem;
  margin-inline: var(--s-logos-ruimte);
  border-radius: 50%;
  background: var(--roze);
}

@keyframes s-logos-baan {
  to { transform: translateX(-100%); }
}

/* Pauzeren: hover (alleen echte pointers), focus binnen de baan, of de knop */
@media (hover: hover) {
  .s-logos__marquee:hover .s-logos__lijst { animation-play-state: paused; }
}
.s-logos__marquee:focus-within .s-logos__lijst,
.s-logos__pauze-input:checked ~ .s-logos__marquee .s-logos__lijst { animation-play-state: paused; }

/* --- Pauzeknop -------------------------------------------------------------
   Een checkbox vóór de baan (werkt zonder JS en zonder :has). Het onzichtbare
   invoerveld ligt precies over het rondje; het label eronder tekent het icoon. */
.s-logos__pauze,
.s-logos__pauze-input {
  grid-area: pauze;
  width: 2.5rem;
  height: 2.5rem;
}
.s-logos__pauze-input {
  position: relative;
  z-index: 1;
  margin: 0;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}
.s-logos__pauze {
  display: grid;
  place-items: center;
  border: 1px solid var(--lijn);
  border-radius: 50%;
  color: var(--navy);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.s-logos__pauze-input:hover + .s-logos__pauze { border-color: var(--navy); background: var(--grijs-licht); }
.s-logos__pauze-input:focus-visible + .s-logos__pauze {
  box-shadow: var(--focus);
  outline: 2px solid transparent; /* wordt zichtbaar in Windows-contrastmodus, waar box-shadow wegvalt */
  outline-offset: 3px;
}

/* Twee streepjes = pauzeren; driehoek = verder afspelen */
.s-logos__pauze-icoon {
  width: .62rem;
  height: .72rem;
  background: linear-gradient(90deg, currentColor 0 33%, transparent 33% 67%, currentColor 67%);
}
.s-logos__pauze-input:checked + .s-logos__pauze .s-logos__pauze-icoon {
  width: .7rem;
  margin-left: .14rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Windows-contrastmodus: achtergronden vallen weg, dus icoon en bolletjes
   expliciet in de systeemtekstkleur tekenen */
@media (forced-colors: active) {
  .s-logos__pauze-icoon,
  .s-logos__naam::after { forced-color-adjust: none; }
  .s-logos__pauze-icoon { color: CanvasText; }
  .s-logos__naam::after { background: CanvasText; }
}

/* --- Desktop: label links met scheidingslijn, baan ernaast --------------- */
@media (min-width: 1024px) {
  .s-logos__grid {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "titel baan pauze";
    gap: clamp(1.75rem, .5rem + 2vw, 2.75rem);
  }
  .s-logos__titel {
    box-sizing: content-box;
    max-width: 17ch;
    padding-right: clamp(1.75rem, .5rem + 2vw, 2.75rem);
    border-right: 1px solid var(--lijn);
  }
  .s-logos__marquee { margin-inline: 0; }
}

/* --- Minder beweging: stilstaande lijst die gewoon over regels loopt ----
   Het bolletje staat dan vóór elke naam, in de marge links ervan. De lijst
   schuift die marge naar links in, zodat bolletjes aan het begin van een
   regel buiten de (overflow: hidden) baan vallen: alleen scheiders tússen
   namen blijven zichtbaar. */
@media (prefers-reduced-motion: reduce) {
  /* Zonder pauzeknop geen lege kolom: label boven (mobiel) of links (desktop) */
  .s-logos__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titel" "baan";
  }
  .s-logos__marquee {
    margin-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .s-logos__lijst {
    flex: 1 1 auto;
    flex-wrap: wrap;
    row-gap: .65rem;
    margin-left: calc(-2 * var(--s-logos-ruimte));
    animation: none;
  }
  .s-logos__naam {
    position: relative;
    margin-left: calc(2 * var(--s-logos-ruimte));
  }
  .s-logos__naam::after {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--s-logos-ruimte));
    margin: 0;
    transform: translate(-50%, -50%);
  }
  .s-logos__lijst[aria-hidden="true"],
  .s-logos__pauze,
  .s-logos__pauze-input { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .s-logos__grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "titel baan";
  }
}