/* RPO4 — RPO: de operatie (cream, strak middenrif, id="proces").
   Kopgroep + twee sub-blokken in één sectie: A = horizontale 4-staps FLOW-RIJ
   (num-badges op één verbindingslijn — bewust ander stappen-device dan de
   verticale ws3-tijdlijn, de interactieve homepage-.proc en de o4-band) en
   B = ruled systeem-CHECKLIST in twee kolommen (kolomsgewijs gevuld, 4 links /
   3 rechts) met dezelfde oranje vink-iconen als rpo3 (model-belofte →
   geleverd systeem). Alles statisch; .num-badge komt uit base.css. */

.rpo-operatie {
  padding-block: var(--space-section-s);
}

/* — Kopgroep — */

.rpo-operatie-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.rpo-operatie-head h2 {
  font-size: clamp(2.3rem, 3.6vw, 3.4rem);
}

.rpo-operatie-sub {
  max-width: 56ch;
}

.rpo-operatie-subkop {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* — Sub-blok A: flow-rij. Verbindingslijn door het hart van de badges
   (top 22px = het midden van de 44px .num-badge); left/right 22px laten de
   lijn bij het midden van de eerste en laatste badge beginnen en eindigen. — */

.rpo-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 32px);
}

.rpo-flow::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 22px;
  height: 1px;
  background: var(--line);
}

/* Oranje scroll-vullijn over de verbindingslijn: groeit van links (stap 1) naar
   rechts (stap 4) mee met de scrollpositie via --rpo-fill (0..1), gezet door
   motion.js (horizontaal recept, gelijk aan de o4-band). 2px zodat de vulling
   boven de 1px track leest; hart op top 21.5px. Zonder JS / reduced motion staat
   hij vol (oranje). Op <=1024 is de verbindingslijn verborgen (2x2/1-kolom), dus
   verbergen we de vullijn daar ook. */
.rpo-flow::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 21.5px;
  height: 2px;
  border-radius: 1px;
  background: var(--orange-500);
  transform: scaleX(var(--rpo-fill, 1));
  transform-origin: left;
}

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

.rpo-flow-stap { position: relative; }

/* Badge schildert over de verbindingslijn (navy vulling uit base.css) en kleurt
   oranje zodra de vullijn zijn hart passeert (.is-reached, door motion.js gezet).
   Scoped op .rpo-flow: .num-badge is canon en staat ook in ws3/ti3. */
.rpo-flow-stap .num-badge {
  position: relative;
  z-index: 1;
  transition: background-color .35s ease;
}

.rpo-flow-stap .num-badge.is-reached {
  background: var(--orange-500);
}

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

.rpo-flow-kop {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--text-strong);
  margin: 14px 0 8px;
}

.rpo-flow-body {
  font-size: .9063rem;
  line-height: 1.6;
}

/* — Sub-blok B: systeem-checklist, ruled 2 kolommen — */

.rpo-operatie-systeemblok {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.rpo-systeem {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 4vw, 4rem);
  /* Kolomsgewijs: items 1-2 links, 3-4 rechts (DOM = copy-volgorde) */
  grid-auto-flow: column;
  /* BESLISSING Timo 2026-08-20: de checklist in rpo4.html ging van zeven naar vier
     items, dus van 4/3 naar 2/2. Oude waarde verbatim: grid-template-rows:
     repeat(4, auto); met de comment "Kolomsgewijs: items 1-4 links, 5-7 rechts".
     Bleef die op vier rijen staan, dan vielen alle vier de items in de linker
     kolom en bleef de rechter leeg. */
  grid-template-rows: repeat(2, auto);
}

.rpo-systeem-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 12px;
  padding-block: 12px;
  font-size: .9375rem;
  line-height: 1.6;
  border-top: 1px solid var(--line);
}

/* Eerste rij van elke kolom zonder bovenlijn.
   BESLISSING Timo 2026-08-20: de tweede kolom begint nu bij item 3 in plaats van
   item 5 (checklist van zeven naar vier). Oude waarde verbatim:
   .rpo-systeem-item:nth-child(5) */
.rpo-systeem-item:nth-child(1),
.rpo-systeem-item:nth-child(3) {
  border-top: 0;
  padding-top: 0;
}

.rpo-operatie-link {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

/* — Responsive — */

/* ≤1024: flow 2x2; een verbindingslijn die twee rijen kruist is ruis → weg */
@media (max-width: 1024px) {
  .rpo-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(1.75rem, 3vw, 2.25rem);
  }
  .rpo-flow::before,
  .rpo-flow::after { display: none; }
}

/* ≤760: checklist 1 kolom, DOM-volgorde leidend; de kolomkop-uitzondering
   resetten (alleen item 1 zonder bovenlijn).
   BESLISSING Timo 2026-08-20: mee verschoven van item 5 naar item 3, samen met de
   kolomverdeling hierboven. Oude waarde verbatim: .rpo-systeem-item:nth-child(5) */
@media (max-width: 760px) {
  .rpo-systeem {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
  }
  .rpo-systeem-item:nth-child(3) {
    border-top: 1px solid var(--line);
    padding-top: 12px;
  }
}

@media (max-width: 560px) {
  .rpo-flow { grid-template-columns: 1fr; row-gap: 1.5rem; }
}

/* BESLISSING Timo 2026-08-11: afbreken toegestaan in deze kop op de kleinste
   telefoons. Het woord "recruitmentoperatie" is hier 310px breed (de h2 staat
   op deze breedtes vast op de ondergrens van zijn clamp, 2.3rem/36.8px). De h2
   is een flex-item met min-width:auto, dus die 310px werd de breedte van het
   element zelf; in een container van 272px (320px viewport min 2x24 gutter)
   was dat de laatste 14px van de documentoverloop op rpo.html.
   hyphens:auto laat de browser op een lettergreepgrens afbreken (html lang="nl")
   in plaats van het woord er hard doorheen te hakken zoals
   overflow-wrap:break-word zou doen.
   Grens bewust op 359px en niet op de gebruikelijke 560px: vanaf 358px viewport
   past het woord uit zichzelf, en op 360, 375, 390 en 414px was er al geen
   overloop. Zo verandert het ontwerp op geen enkel formaat dat het al goed deed
   (gemeten: identieke kophoogte op 375, 390, 414 en 560px; op 360px zou
   hyphens:auto de kop van 5 naar 4 regels hebben getrokken, en dat gebeurt nu
   dus niet). Er stond hier geen regel voor deze kop, dus geen oude waarde. */
/* AANGEVULD 2026-08-11 (site tweetalig NL/EN): overflow-wrap als vangnet.
   hyphens:auto hangt aan de taal van het document. Op /en/ staat er
   html lang="en", en dan kent de browser de Nederlandse afbreekpatronen niet;
   "recruitmentoperatie" bleef daar onafgebroken en gaf op 320px opnieuw 14px
   documentoverloop (gemeten: en/rpo.html scrollWidth 334 tegen clientWidth 320).
   overflow-wrap:anywhere grijpt alleen in als een woord ook na afbreken nog
   niet past, dus zolang de kop wel te hyphenaten is verandert er niets aan de
   Nederlandse weergave (gemeten: kophoogte 140px en kopbreedte 272px op 320px,
   voor en na identiek). Bewust "anywhere" en niet "break-word": alleen anywhere
   telt mee in de min-content-breedte, en juist die bepaalt hier de breedte van
   de h2, want hij is een flex-item met min-width:auto. Met break-word bleef de
   overloop staan (gemeten: nog steeds 334px).
   Zodra de Engelse copy hier echt staat is dit vangnet waarschijnlijk overbodig,
   maar het mag blijven: het kost niets en dekt elk toekomstig lang woord af.
   Oude waarde verbatim:
   @media (max-width: 359px) {
     .rpo-operatie-head h2 {
       -webkit-hyphens: auto;
       hyphens: auto;
     }
   } */
@media (max-width: 359px) {
  .rpo-operatie-head h2 {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* ---------- Mobiele ws3-tijdlijn (Timo 260722) ----------
   Op ≤880 vervangt de num-badge-tijdlijn (ws3-contract, css/werving-selectie/ws3.css)
   de horizontale flow-rij "Zo richten we het in.". Zelfde vier stappen, W&S-stijl
   (nummers links, oranje scroll-vullijn). Desktop >880 ongewijzigd. De
   .rpo-operatie-prefix wint qua specificiteit van de bestaande .rpo-flow-regel. */
.svc-aanpak-mob { display: none; }

@media (max-width: 880px) {
  .rpo-operatie .rpo-flow { display: none; }
  .rpo-operatie .svc-aanpak-mob {
    display: block;
    margin-top: clamp(1.5rem, 4vw, 2rem);
  }
}