/* ==========================================================================
   Blok — Stappen als route
   Zelfde beeldtaal als home-diensten: genummerde stippen op een blauwe
   stippellijn met een roze eindpunt (de bestemming). De stip neemt de kleur
   van de band aan, zodat de lijn er netjes achter verdwijnt.
   - Mobiel en tablet: verticale route langs de linkerkant.
   - Vanaf 960px (verticaal): stapnaam links, toelichting rechts.
   - Vanaf 1100px, 2–4 stappen: horizontale route in kolommen.
   - Vanaf 1100px, 5+ stappen (--lang): blijft verticaal, want horizontaal
     worden de kolommen te smal.
   ========================================================================== */
.b-stappen {
  --stip: 2.5rem;                     /* doorsnede nummerstip */
  --eind: .875rem;                    /* roze eindpunt */
  --b-stappen-kolom: clamp(1.75rem, 1rem + 2vw, 3rem);
  --b-stappen-lijn: var(--blauw);
  --b-stappen-rand: var(--blauw);
  --b-stappen-nummer: var(--blauw);   /* ≥ 18,7px bold: grote tekst, haalt 3:1 op alle lichte banden */
  --b-stappen-vlak: var(--wit);
  --b-stappen-halo: var(--roze-licht);
  --stippel: radial-gradient(circle, var(--stippel-kleur) 0 2.5px, transparent 3px);
}
.b-stappen.band--grijs { --b-stappen-vlak: var(--grijs-licht); }
.b-stappen.band--roze {
  --b-stappen-vlak: var(--roze-licht);
  --b-stappen-halo: var(--wit);
}
.b-stappen.band--navy {
  --b-stappen-lijn: var(--blauw-licht);
  --b-stappen-rand: var(--blauw-licht);
  --b-stappen-nummer: var(--wit);
  --b-stappen-vlak: var(--navy);
  --b-stappen-halo: var(--navy-80);
}

/* --- De route (lijst) ------------------------------------------------- */
.b-stappen__route {
  position: relative;
  display: grid;
  gap: 2.25rem;
}
/* Ruimte onder de laatste stap voor het eindpunt (specifieker dan ol[role="list"]) */
.b-stappen .b-stappen__route { padding: 0 0 calc(var(--eind) + 2rem); }

/* Stippellijn: van het midden van stip 01 tot het eindpunt (decoratief) */
.b-stappen__route::before {
  content: "";
  position: absolute;
  top: calc(var(--stip) / 2);
  bottom: calc(var(--eind) / 2);
  left: calc(var(--stip) / 2 - 3px);
  width: 6px;
  background: var(--stippel) 50% 0 / 6px 11px repeat-y;
}

/* Roze eindpunt */
.b-stappen__route::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(var(--stip) / 2 - var(--eind) / 2);
  width: var(--eind);
  height: var(--eind);
  border-radius: 50%;
  background: var(--roze);
  box-shadow: 0 0 0 5px var(--b-stappen-halo);
}

/* --- Stap ------------------------------------------------------------- */
.b-stappen__stap {
  display: grid;
  grid-template-columns: var(--stip) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.b-stappen__nummer {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--stip);
  height: var(--stip);
  border: 2px solid var(--b-stappen-rand);
  border-radius: 50%;
  background: var(--b-stappen-vlak);
  color: var(--b-stappen-nummer);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Icoon in plaats van het nummer (bijv. een groeipad); zelfde kleur als het nummer */
.b-stappen__nummer--icoon .icoon { width: 46%; height: 46%; }

/* Eerste regel van de stapnaam op het midden van de stip */
.b-stappen__inhoud { padding-top: calc((var(--stip) - var(--fs-h3) * var(--lh-head)) / 2); }

/* Een lange samenstelling ("aanbestedingsdocumenten") breekt in een smalle
   kolom als laatste redmiddel af in plaats van uit te steken */
.b-stappen__titel { max-width: 24ch; }

/* 15px in smalle kolommen, oplopend naar 17px (zoals routes en diensten) */
.b-stappen__tekst {
  max-width: 56ch;
  margin-top: .6rem;
  color: var(--tekst-zacht);
  font-size: clamp(var(--fs-small), .47rem + .725vw, var(--fs-body));
  line-height: 1.6;
}

/* Knop onder de route, uitgelijnd met de tekstkolom */
.b-stappen__actie { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }

/* --- Tablet ------------------------------------------------------------ */
@media (min-width: 720px) {
  .b-stappen { --stip: 2.75rem; }
  .b-stappen__route { gap: 2.5rem; }
  .b-stappen__stap { gap: 1.5rem; }
  .b-stappen__actie { padding-left: calc(var(--stip) + 1.5rem); }
}

/* --- Breed en verticaal: stapnaam links, toelichting rechts, dunne
   scheidingslijnen tussen de stappen (zoals de punten bij home-diensten) */
@media (min-width: 960px) {
  .b-stappen__route { gap: 1.75rem; }
  .b-stappen__inhoud {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--b-stappen-kolom);
    align-items: baseline;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--lijn);
  }
  .b-stappen__stap:last-child .b-stappen__inhoud {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .b-stappen__tekst { margin-top: 0; }
}

/* --- Desktop: 2–4 stappen horizontaal ---------------------------------- */
@media (min-width: 1100px) {
  .b-stappen__route--2,
  .b-stappen__route--3,
  .b-stappen__route--4 {
    --stip: 3.75rem;
    gap: 0 var(--b-stappen-kolom);
  }
  .b-stappen__route--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-stappen__route--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-stappen__route--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .b-stappen .b-stappen__route:is(.b-stappen__route--2, .b-stappen__route--3, .b-stappen__route--4) { padding: 0; }

  :is(.b-stappen__route--2, .b-stappen__route--3, .b-stappen__route--4)::before {
    top: calc(var(--stip) / 2 - 3px);
    bottom: auto;
    left: calc(var(--stip) / 2);
    right: calc(var(--eind) / 2);
    width: auto;
    height: 6px;
    background: var(--stippel) 0 50% / 11px 6px repeat-x;
  }
  :is(.b-stappen__route--2, .b-stappen__route--3, .b-stappen__route--4)::after {
    top: calc(var(--stip) / 2 - var(--eind) / 2);
    bottom: auto;
    left: auto;
    right: 0;
  }

  :is(.b-stappen__route--2, .b-stappen__route--3, .b-stappen__route--4) .b-stappen__stap {
    display: block;
  }
  :is(.b-stappen__route--2, .b-stappen__route--3, .b-stappen__route--4) .b-stappen__nummer {
    margin-bottom: 1.75rem;
    font-size: 1.375rem;
  }
  :is(.b-stappen__route--2, .b-stappen__route--3, .b-stappen__route--4) .b-stappen__inhoud {
    display: block;
    padding: 0;
    border: 0;
  }
  :is(.b-stappen__route--2, .b-stappen__route--3, .b-stappen__route--4) .b-stappen__tekst {
    margin-top: .75rem;
  }
  /* Knop onder de eerste kolom (de route staat in .b-stappen__baan) */
  :is(.b-stappen__route--2, .b-stappen__route--3, .b-stappen__route--4) + .b-stappen__actie,
  :is(.b-stappen__baan--2, .b-stappen__baan--3, .b-stappen__baan--4) + .b-stappen__actie {
    margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
    padding-left: 0;
  }
}

/* Horizontaal: de toelichtingen beginnen op één hoogte, ook als een
   stapnaam over twee regels loopt (subgrid, zoals usps en cijfers).
   Zonder subgrid blijven de kolommen gewoon onder elkaar gestapeld. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1100px) {
    :is(.b-stappen__route--2, .b-stappen__route--3, .b-stappen__route--4) .b-stappen__stap {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0;
    }
    :is(.b-stappen__route--2, .b-stappen__route--3, .b-stappen__route--4) .b-stappen__inhoud {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }
  }
}


/* --- Stroompuls (altijd aan) ---------------------------------------------
   Zoals de diensten-route op de homepage: groene puntjes lopen over de
   stippellijn van 01 naar het eindpunt, en het eindpunt licht bij aankomst
   even groen op. Dezelfde puntjes als de lijn, op exact dezelfde plek; een
   bewegend masker laat er steeds een stukje van oplichten. De puls staat
   vóór de lijst in .b-stappen__baan (eigen stapelcontext): onder de
   nummerstippen, boven de grijze lijn (z-index -1). --stroom-duur is de
   lengte van één cyclus: puls, eindpunt en het oplichten van de stappen
   (hieronder) lopen er alle drie op. */
.b-stappen__baan { --stroom-duur: 4.2s; position: relative; isolation: isolate; }
.b-stappen__baan .b-stappen__route::before { z-index: -1; }
.b-stappen__stroom {
  --stroom-lengte: 7rem;
  position: absolute;
  top: calc(var(--stip) / 2);
  bottom: calc(var(--eind) / 2);
  left: calc(var(--stip) / 2 - 3px);
  width: 6px;
  background: radial-gradient(circle, var(--groen) 0 2.75px, transparent 3.25px) 50% 0 / 6px 11px repeat-y;
  filter: drop-shadow(0 0 2.5px rgba(0, 242, 130, .85));
  -webkit-mask: linear-gradient(180deg, transparent, rgba(0, 0, 0, .3) 45%, #000 90%, transparent) no-repeat;
  mask: linear-gradient(180deg, transparent, rgba(0, 0, 0, .3) 45%, #000 90%, transparent) no-repeat;
  -webkit-mask-size: 100% var(--stroom-lengte);
  mask-size: 100% var(--stroom-lengte);
  animation: b-stappen-stroom-y var(--stroom-duur) linear infinite;
  pointer-events: none;
}
@keyframes b-stappen-stroom-y {
  from { -webkit-mask-position: 0 calc(var(--stroom-lengte) * -1); mask-position: 0 calc(var(--stroom-lengte) * -1); }
  76%, to { -webkit-mask-position: 0 calc(100% + var(--stroom-lengte)); mask-position: 0 calc(100% + var(--stroom-lengte)); }
}
.b-stappen__baan .b-stappen__route::after { animation: b-stappen-laadpaal var(--stroom-duur) linear infinite; }
@keyframes b-stappen-laadpaal {
  0%, 66%, 94%, 100% { background: var(--roze); box-shadow: 0 0 0 5px var(--b-stappen-halo); }
  72%, 86% { background: var(--groen); box-shadow: 0 0 0 5px rgba(0, 242, 130, .25), 0 0 12px 3px rgba(0, 242, 130, .55); }
}

/* Desktop, 2–4 stappen: horizontale route, de puls loopt van links naar rechts.
   --stip staat daar op de lijst; de baan krijgt dezelfde waarde. */
@media (min-width: 1100px) {
  :is(.b-stappen__baan--2, .b-stappen__baan--3, .b-stappen__baan--4) { --stip: 3.75rem; }
  :is(.b-stappen__baan--2, .b-stappen__baan--3, .b-stappen__baan--4) .b-stappen__stroom {
    top: calc(var(--stip) / 2 - 3px);
    bottom: auto;
    left: calc(var(--stip) / 2);
    right: calc(var(--eind) / 2);
    width: auto;
    height: 6px;
    background: radial-gradient(circle, var(--groen) 0 2.75px, transparent 3.25px) 0 50% / 11px 6px repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .3) 45%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .3) 45%, #000 90%, transparent);
    -webkit-mask-size: var(--stroom-lengte) 100%;
    mask-size: var(--stroom-lengte) 100%;
    animation-name: b-stappen-stroom-x;
  }
  @keyframes b-stappen-stroom-x {
    from { -webkit-mask-position: calc(var(--stroom-lengte) * -1) 0; mask-position: calc(var(--stroom-lengte) * -1) 0; }
    76%, to { -webkit-mask-position: calc(100% + var(--stroom-lengte)) 0; mask-position: calc(100% + var(--stroom-lengte)) 0; }
  }
}

/* --- Stappen lichten op als de puls ze passeert (klantwens 22 okt 2026) -----
   Elke nummerstip krijgt dezelfde cyclus als de puls, met een eigen
   vertraging: het moment waarop de kop van de puls de stip bereikt. Dan
   kleurt de rand groen met een zachte gloed, wordt het vlak iets lichter en
   het icoon (of nummer) even groen; daarna dooft hij rustig uit. Eén keer
   per stap per cyclus van 4,2 s: geen knipperen (ruim onder 3 flitsen per
   seconde).
   - Zonder JavaScript: de vertraging volgt uit de plek in de route
     (--stap, --stappen uit stappen.php), een benadering.
   - stappen.js meet de echte positie van elke stip op de lijn, zet die als
     --licht-start en houdt de stippen gelijk met de puls (ook na het wisselen
     tussen horizontaal en verticaal).
   De piek ligt op 4% van de cyclus; stappen.js rekent daarmee (PIEK). */
.b-stappen {
  --b-stappen-licht-vlak: #e8fef4;    /* wit met een vleug groen */
  --b-stappen-licht-gloed: 0 0 0 4px rgba(0, 242, 130, .18), 0 0 18px 3px rgba(0, 242, 130, .5);
}
.b-stappen.band--navy {
  --b-stappen-licht-vlak: #183a67;    /* navy-80 met een vleug groen */
  --b-stappen-licht-gloed: 0 0 0 4px rgba(0, 242, 130, .22), 0 0 20px 4px rgba(0, 242, 130, .55);
}
.b-stappen__baan .b-stappen__nummer {
  animation: b-stappen-licht var(--stroom-duur) linear infinite;
  animation-delay: var(--licht-start, calc(var(--stroom-duur) * (.72 * var(--stap, 0) / var(--stappen, 1) - .04)));
}
@keyframes b-stappen-licht {
  0%, 24%, 100% {
    border-color: var(--b-stappen-rand);
    background-color: var(--b-stappen-vlak);
    box-shadow: 0 0 0 0 rgba(0, 242, 130, 0), 0 0 0 0 rgba(0, 242, 130, 0);
    color: var(--b-stappen-nummer);
  }
  4% {
    border-color: var(--groen);
    background-color: var(--b-stappen-licht-vlak);
    box-shadow: var(--b-stappen-licht-gloed);
    color: var(--groen);
    animation-timing-function: cubic-bezier(.3, 0, .6, 1); /* rustig uitdoven */
  }
}

@media (prefers-reduced-motion: reduce) {
  .b-stappen__stroom { display: none; }
  .b-stappen__baan .b-stappen__route::after,
  .b-stappen__baan .b-stappen__nummer { animation: none; }
}