/* Startpagina: de vaste sfeerfoto bovenaan, de prikkelende vragen, de korte zin bij de deuren en de reviewband.
   Volgorde van de blokken: groen (hero), Joppen blauw (vragen), groen (deuren), Joppen blauw (reviews), groen (plannen) */


/* Deuren: één korte zin onder de kop */
.deuren-zin { margin: 0 0 1.5rem; max-width: 46ch; }

@media (min-width: 48em) {
  .deuren h2 { margin-bottom: 1rem; }
  .deuren-zin { grid-column: 1; grid-row: 2; }
  .deur-beeld { grid-row: 1 / span 3; }
  .deur-lijst { grid-row: 3; }
}


@media (max-width: 47.99em) {
  .deuren-zin { margin-bottom: 24px; }
}

/* Reviews: lopende band. Het spoor bevat twee gelijke lijsten; bij -50% sluit de lus naadloos aan */
/* Reviews op 59 Joppen blauw, de secundaire kleur, met groene letters */
.reviews { padding: 40px 0; background: var(--color-kalk); color: var(--color-text-inverse); }
.reviews h2 { margin: 0 0 24px; padding: 0 var(--marge); }   /* opmaak als subkop: .slogan */
.reviews-band { overflow: clip; margin-inline: var(--marge); padding-inline: 24px; }
.reviews-spoor { display: flex; width: max-content; animation: reviews-loop 48s linear infinite;   /* vier lange reviews: vlot tempo, zo'n twaalf seconden per review (wens Geert, 2026-11-03) */ }
.reviews-spoor:hover, .reviews-spoor:focus-within { animation-play-state: paused; }
.reviews-lijst { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.reviews-lijst li { display: flex; flex-direction: column; gap: 12px; width: min(82vw, 28rem); padding-right: 48px; box-sizing: border-box; }
.reviews-lijst p { margin: 0; font-family: var(--font-display); font-size: var(--text-basis); line-height: 1.45; }
.reviews-lijst span { font-size: var(--text-klein); color: var(--color-text-inverse-muted); }

@keyframes reviews-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Weinig beweging: geen animatie, items naast elkaar met horizontaal scrollen; de kopie blijft verborgen */
@media (prefers-reduced-motion: reduce) {
  .reviews-band { overflow-x: auto; padding: 0 var(--marge); }
  .reviews-spoor { animation: none; width: auto; }
  .reviews-lijst[aria-hidden="true"] { display: none; }
}

/* Prikkelende vragen: in twee kolommen, met een rond bolletje in Eijk voor elke vraag in Lora */
.vragen { padding: var(--sectie-ruimte) var(--marge); background: var(--color-kalk); color: var(--color-text-inverse); }
/* Raster in plaats van krantenkolommen: links vraag 1-4, rechts 5-8, en elke rij even hoog, zodat de lijntjes links en rechts op één hoogte liggen.
   Bij meer of minder vragen: het aantal rijen aanpassen (helft van het aantal vragen, naar boven afgerond) */
.vragen-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 56px; list-style: none; margin: 0; padding: 0; }
.vragen-lijst li {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline;
  padding: 0.9rem 0;
  border-top: 1px solid rgb(28 33 21 / 0.18);
  font-family: var(--font-display); font-size: var(--text-basis); line-height: 1.45;   /* zelfde maat als de reviews */
}
.vragen-lijst li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-diep); transform: translateY(-0.06em); }   /* midden op de kleine letters */

@media (max-width: 47.99em) {
  .vragen-lijst { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

/* Silhouetten van de leiders: lopende band onder de vragen, in de inkt van Joppen blauw; de gezichten zijn leeg.
   De randen vervagen, zodat de figuren rustig in en uit beeld lopen */
.leiders-band {
  overflow: clip; margin-top: 3rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.leiders-spoor { display: flex; width: max-content; animation: reviews-loop 40s linear infinite; will-change: transform; }   /* zo'n 60 pixels per seconde; will-change houdt de beweging soepel op telefoon en tablet */
.leiders-lijst { display: flex; flex: none; gap: 56px; margin: 0; padding: 0 56px 0 0; list-style: none; }
.leiders-lijst img { display: block; height: 180px; width: auto; }   /* breedte volgt uit width/height in de HTML, dus de band heeft al vóór het laden zijn vaste lengte en houdt een gelijk tempo */
/* De slogan als subkop boven de vragen: cursief, iets kleiner dan de zin in de hero erboven */
.slogan { max-width: none; margin: 0 0 2rem; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-subkop); text-transform: none; text-wrap: balance; color: var(--color-text-inverse); }

@media (max-width: 47.99em) {
  .leiders-band { margin-top: 2rem; }
  .leiders-lijst { gap: 32px; padding-right: 32px; }
  .leiders-lijst img { height: 120px; }
  .leiders-spoor { animation-duration: 26s; }   /* kleinere figuren, kortere band: zelfde tempo als op de laptop */
}
@media (prefers-reduced-motion: reduce) {
  .leiders-band { overflow-x: auto; }
  .leiders-spoor { animation: none; }
  .leiders-lijst[aria-hidden="true"] { display: none; }
}