/* WS3 — Hoe het werkt (cream, start licht middenrif): kopgroep links (sticky,
   blijft staan terwijl de tijdlijn langs scrollt), verticale tijdlijn rechts.
   De rail vult oranje mee met de scrollpositie (--ws-fill, gezet door motion.js)
   en elke num-badge kleurt oranje zodra de vullijn zijn hart bereikt (o4-recept).
   Geen .proc-contract; .num-badge komt uit base.css. Reveals centraal via
   base.css (data-reveal). Sectie op cream: geen .on-dark, kale klassen volstaan. */

.ws-proces {
  padding-block: var(--space-section) var(--space-section-s);
}

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

/* — Kopgroep links — */

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

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

.ws-proces-sub {
  max-width: 40ch;
}

/* — Tijdlijn: doorlopende 1px rail door het hart van de badges (left 22px =
   het midden van de 44px .num-badge); top/bottom 22px laten de rail exact op
   het midden van de eerste en laatste badge beginnen en eindigen — */

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

/* De rail loopt van het hart van badge 1 tot het hart van de laatste badge
   (--ws-line-top / --ws-line-h gezet door motion.js). Zonder JS-fallback:
   top 22px .. bottom 22px, zoals voorheen. Het exacte einde voorkomt dat de
   lijn onder het laatste bolletje uitsteekt (de laatste stap-tekst maakt de
   <ol> langer dan dat bolletje). */
.ws-tijdlijn::before {
  content: '';
  position: absolute;
  left: 22px;
  top: var(--ws-line-top, 22px);
  height: var(--ws-line-h, calc(100% - 44px));
  width: 1px;
  background: var(--line);
}

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

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

/* Num-badge kleurt oranje zodra de vullijn zijn hart passeert (.is-reached,
   door motion.js gezet). Scoped op de tijdlijn: .num-badge is canon en staat
   ook in rpo4/ti3, die mogen niet meekleuren. */
.ws-tijdlijn .num-badge {
  transition: background-color .35s ease;
}

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

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

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

/* :first-child is hier veilig: de ol bevat uitsluitend li's
   (de :first-of-type-gotcha speelt alleen bij gemengde siblings) */
.ws-stap:first-child { padding-top: 0; }
.ws-stap:last-child { padding-bottom: 0; }

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

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

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

/* — Link na de lijst, uitgelijnd op de contentkolom (44px badge + 28px gap) — */

.ws-proces-link {
  margin: 28px 0 0 72px;
}

/* — Responsive — */

@media (max-width: 880px) {
  .ws-proces-grid {
    grid-template-columns: 1fr;
    row-gap: var(--gap-md);
  }

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

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

@media (max-width: 560px) {
  .ws-stap { column-gap: 18px; }

  /* Badge blijft 44px, raillijn blijft op left 22px */
  .ws-stap-body { font-size: .9375rem; }

  .ws-proces-link { margin-left: 0; }
}