/* S3 · Proces (cream) — verticale tijdlijn LINKS + kopgroep RECHTS (sticky).
   Zelfde device als de W&S-processectie (ws3), maar GESPIEGELD voor de homepage:
   kop rechts (alle andere homepage-koppen staan links → variatie), tijdlijn links.
   De rail vult oranje mee met de scroll (--s3-fill, gezet door motion.js) en elke
   num-badge kleurt oranje zodra de vullijn zijn hart bereikt (o4/ws3-recept).
   Geen .proc-stepper meer; .num-badge komt uit base.css. Prefix: .s3 */

/* Ritme: boven --space-section (na de navy seam), onder strak richting S4 */
.s3.section { padding-bottom: var(--space-section-s); }

/* ---------- Grid: tijdlijn links (7fr), kop rechts (5fr) ---------- */
/* Kop staat eerst in de DOM (leesvolgorde), grid-area plaatst hem rechts. */

.s3-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "rail head";
  column-gap: clamp(3rem, 6vw, 6rem);
  row-gap: var(--gap-lg);
  align-items: start;
}

.s3 .s3-head        { grid-area: head; }
.s3 .s3-tijdlijn-wrap { grid-area: rail; }

/* De eyebrow "HET PROCES" is 2026-07-31 uit .s3-head hierheen verplaatst, zodat
   hij boven stap 1 staat en je vóór het lezen van de stappen al weet dat 1-2-3
   het proces is (feedback Lise). In .s3-head kreeg hij zijn ruimte van de flex
   `gap: 18px`; deze wrap is geen flex-container, dus die afstand moet hier
   expliciet. base.css zet p { margin: 0 } en .s3-stap:first-child heeft
   padding-top: 0, dus zonder deze regel plakt de eyebrow tegen badge 1 aan.

   CORRECTIE Timo 2026-07-31, twee dingen:

   1. margin-top: -8px — de eyebrow moest optisch uitlijnen met de bovenkant van
      de H2 rechts. De BOXEN lagen al gelijk, maar Anton (de displayfont) begint
      met zijn kapitalen direct op de bovenrand van zijn regelbox, terwijl de
      kleine eyebrow-letters daar ruimte boven hebben. Gemeten met een
      pixelscan: de eyebrow-inkt begon 7,5px lager dan de titel-inkt. Dit haalt
      dat verschil eruit. Verandert er iets aan de titelgrootte of het font, dan
      moet dit opnieuw gemeten worden.

   2. margin-bottom: 41px — badge 1 is een gevulde oranje cirkel en weegt
      optisch zwaar. Gemeten gat tot die badge is de marge plus ~1px, dus dit
      geeft ~42px. Was 18px (gat 19px), tussenstand 28px (gat 29px).

   LET OP: deze regel stond een ronde lang in kapot commentaar waardoor hij
   helemaal niet toepaste. Controleer bij wijziging de COMPUTED waarde in de
   browser, niet alleen de broncode. */
.s3 .s3-tijdlijn-wrap > .eyebrow {
  /* De eyebrow is display:inline-flex; een negatieve margin-top werkt daar maar
     half op omdat de regelbox blijft staan. Vandaar een relatieve verschuiving:
     die verplaatst hem optisch exact zonder de flow te raken. */
  position: relative;
  top: -7px;
  margin-bottom: 34px;
}

/* ---------- Kopgroep rechts (sticky, blijft staan terwijl de tijdlijn langs scrollt) ---------- */

.s3 .s3-head {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.s3 .s3-head h2 {
  font-size: clamp(2.3rem, 3.4vw, 3.2rem);
  max-width: 16ch;
}

.s3 .s3-head .s3-sub { max-width: 40ch; }

/* ---------- Tijdlijn: doorlopende 1px rail door het hart van de badges
   (left 22px = het midden van de 44px .num-badge); top/hoogte gezet door
   motion.js (--s3-line-top / --s3-line-h) zodat de rail exact van het hart van
   badge 1 tot dat van de laatste loopt. Fail-open fallback in de var()'s. ---------- */

.s3 .s3-tijdlijn {
  position: relative;
  max-width: 680px;
}

.s3 .s3-tijdlijn::before {
  content: '';
  position: absolute;
  left: 22px;
  top: var(--s3-line-top, 22px);
  height: var(--s3-line-h, calc(100% - 44px));
  /* KLEM, 24 augustus 2026. --s3-line-h wordt door motion.js uit gemeten posities
     gezet. Meet dat script voordat de layout is uitgezakt, dan wordt de waarde te
     groot; deze container heeft geen overflow:hidden, dus liep de lijn door over de
     secties eronder. Op een Android van een collega was dat een dunne oranje streep
     dwars door de over-ons-sectie. Geen overflow:hidden op de container zelf, want
     dat knipt de reveal-animatie van de stappen af; deze max-height begrenst
     uitsluitend de lijn zelf en kan verder niets raken. */
  max-height: calc(100% - var(--s3-line-top, 22px));
  width: 1px;
  background: var(--line);
}

/* Oranje scroll-vullijn: groeit van boven (stap 1) naar onder (stap 5) mee met
   --s3-fill (0..1). 2px zodat de vulling boven de 1px rail leest; hart op x=22.5px.
   Zonder JS / reduced motion staat hij vol. */
.s3 .s3-tijdlijn::after {
  content: '';
  position: absolute;
  left: 21.5px;
  top: var(--s3-line-top, 22px);
  height: var(--s3-line-h, calc(100% - 44px));
  max-height: calc(100% - var(--s3-line-top, 22px));   /* zie de klem bij ::before */
  width: 2px;
  border-radius: 1px;
  background: var(--orange-500);
  transform: scaleY(var(--s3-fill, 1));
  transform-origin: top;
}

@media (prefers-reduced-motion: reduce) {
  .s3 .s3-tijdlijn::after { --s3-fill: 1; }
}

/* Num-badge kleurt oranje zodra de vullijn zijn hart passeert (.is-reached,
   door motion.js gezet). Scoped op de tijdlijn. */
.s3 .s3-tijdlijn .num-badge {
  position: relative;
  z-index: 1;
  transition: background-color .35s ease;
}

.s3 .s3-tijdlijn .num-badge.is-reached {
  background: var(--orange-500);
}

@media (prefers-reduced-motion: reduce) {
  .s3 .s3-tijdlijn .num-badge.is-reached { transition: none; }
}

/* ---------- Stappen ---------- */

.s3 .s3-stap {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 28px;
  padding-block: clamp(20px, 2.6vw, 28px);
}

/* De <ol> bevat uitsluitend li's, dus :first/:last-child is hier veilig */
.s3 .s3-stap:first-child { padding-top: 0; }
.s3 .s3-stap:last-child  { padding-bottom: 0; }

/* Badge schildert over de raillijn (navy vulling uit base.css) */
.s3 .s3-stap .num-badge {
  position: relative;
  z-index: 1;
}

.s3 .s3-stap-kop { margin-bottom: 10px; }

.s3 .s3-stap-body {
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.65;
}

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .s3-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "rail";
    row-gap: var(--gap-md);
  }

  /* Eén kolom: de kop staat boven de tijdlijn, sticky heeft hier geen zin. */
  .s3 .s3-head {
    position: static;
    top: auto;
  }

  .s3 .s3-tijdlijn { max-width: 640px; }
}

@media (max-width: 560px) {
  .s3 .s3-stap { column-gap: 18px; }
  .s3 .s3-stap-body { font-size: .9375rem; }
}