/* OS2 — De twee routes (LICHT, op de cream body).
   BESLISSING Timo 2026-08-11 (call 5 augustus 2026): Sennasearch voert nog maar
   twee diensten, Werving & Selectie en RPO; de derde routekaart is vervallen.
   Oude titelregel verbatim: "OS2 — De drie routes (LICHT, op de cream body)."
   COHESIE-RONDE 2026-07-20 (HERO-SYSTEEM §9b): direct onder de PageHero hoort
   een lichte sectie; het oude navy/on-dark-regime ("samen één donker blok" met
   de hub-hero) is vervallen. Kaarten + band blijven paper en leunen nu op het
   .card-idioom van base.css (paper, 1px var(--line-paper), var(--shadow-card));
   op de cream body krijgt de band een eigen 1px rand zodat hij zich blijft
   aftekenen. Koppen = var(--text-strong), body = var(--text-body), gedempt =
   var(--text-muted) — grotendeels via base.css, hier alleen wat afwijkt.
   Kaart-DNA = s2 (T20, RUN 2, 2026-07-20): de DIENSTNAAM is de kaartkop
   (h3, Anton, zelfde regime als s2-kaartkoppen); het trigger-citaat is de
   herkenningslaag eronder (oranje quote-teken + Public Sans — een citaat in
   kapitalen zou schreeuwen). Band = het s2-bandrecept, gescoped als .os-band
   (zelfde overweging als de o5-carousel op over-ons: geen s2.css laden voor
   een andere paginacontext). */

.os-routes {
  /* Eigen ritme (de oude bouw leunde op het donkere blok met os1): strak
     boven — hero-onderpadding + dit blok ≈ één --space-section — en strak
     onder, zodat de volle bovenpadding van os3 de seam draagt en de afstand
     niet verdubbelt nu beide secties cream zijn. */
  padding-block: var(--space-section-s);
}

/* Intro-regel gecentreerd boven de kaarten (copy: "Kies wat het dichtst…") */
.os-routes-intro {
  text-align: center;
  color: var(--text-body);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4.5vh, 3rem);
}

/* ---------- Routekaarten (paper op cream, .card-idioom) ---------- */

.os-cards {
  display: grid;
  /* BESLISSING Timo 2026-08-11 (call 5 augustus 2026): nog maar twee diensten,
     dus twee routekaarten. Oude waarde verbatim: repeat(3, minmax(0, 1fr));
     met drie kolommen zou de derde cel leeg blijven. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
  /* BREEDTE-CORRECTIE 2026-08-11 (tweede ronde, na de omzetting naar twee
     diensten): de kaartenrij loopt weer over de VOLLE containerbreedte, gelijk
     aan de scan-band eronder, zodat de sectie één rechte linker- en rechterrand
     heeft. Gemeten op 1440: de container is 1284px breed (1380px box minus
     2x48px padding), de rij was 900px en stond gecentreerd, dus er bleef links
     en rechts 192px leeg terwijl de band er wel tegenaan liep. Met drie kaarten
     viel dat niet op, met twee las het als een fout: ingesnoerde kaarten boven
     een band op volle breedte. De 900px-cap is daarmee vervallen; de leesmaat
     die die cap moest bewaken wordt nu BINNEN de kaart begrensd (zie de
     max-width op .os-card-trigger en .os-card-body), niet meer door de kaart
     zelf smal te houden. Oude waarden verbatim:
       max-width: 900px;
       margin-inline: auto;
     en de oude motivering verbatim: "Twee kaarten over de volle
     containerbreedte (1380px) worden ~638px breed: dan rekt de kaart uit en
     loopt de regellengte van de body ver over de leesbare maat heen. De rij
     krijgt daarom een eigen maximum zodat een kaart ongeveer even breed blijft
     als in de oude drieluik-opzet (~420px), en staat gecentreerd onder de
     gecentreerde introregel. De scan-band eronder blijft wel de volle breedte
     houden; die oplopende ritmiek intro > kaarten > band is bewust. Nieuw in
     deze ronde (er was geen oude waarde)."
     De introregel blijft wel gecentreerd op 52ch (zie .os-routes-intro); die
     staat bewust als smalle gecentreerde regel boven de volle rij. */
  align-items: stretch;
}

.os-card {
  position: relative;
  overflow: hidden; /* cropt het ghost-nummer */
  display: flex;    /* de kaart-anchor (.os-card-link) vult de kaart */
  color: var(--text-body);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

/* Hele kaart = één echte link (zoals de "verder met dit onderwerp"-kaart): het
   <a class="os-card-link"> vult de kaart mét de padding, dus overal op de kaart
   klikken navigeert (niet alleen het "Zo werkt…"-linkje). Het ghost-nummer ligt
   eronder (z-index 0). */
.os-card-link {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* BREEDTE-CORRECTIE 2026-08-11: de kaart is van 438px naar 630px gegaan
     (1284px container minus 24px gap, gedeeld door twee), dus ruim anderhalf keer
     zo breed, en werd tegelijk lager omdat de tekst over minder regels valt. Met
     de oude 30px zijmarge oogde die bredere, lagere kaart plat: de vulling stond
     te dicht op de rand. Zijmarge en bovenmarge iets ruimer; de tabletregel op
     1100px (30px 28px 28px) houdt de smalle kaart onveranderd, dus deze bijstelling
     raakt alleen de brede tweekoloms-stand. Oude waarde verbatim:
     padding: 34px 30px 30px; */
  padding: 38px 40px 32px;
  color: inherit;
  text-decoration: none;
}

/* Reusachtig ghost-nummer rechtsboven (s2-canon: 7% ink op paper —
   kaart blijft paper, dus ongewijzigd op licht). */
.os-card-num {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--font-display);
  /* BREEDTE-CORRECTIE 2026-08-11: het ghost-nummer is een hoekmerk en moet mee
     ademen met de kaart. Op de oude 438px-kaart was 96px goed voor 22% van de
     kaartbreedte; op de nieuwe 630px-kaart bleef het op 96px steken (15%) en
     hing het los in een lege hoek. De klacht "het nummer staat te dicht op de
     dienstnaam" is met de bredere kaart vanzelf weg: de horizontale afstand
     tussen het einde van "Werving & Selectie" en de linkerrand van de 01 gaat
     op 1440 van 124px naar 316px. Nu dus mee opgeschaald tot 118px op 1440
     (19% van de kaart), wat visueel getoetst is tegen 96px (te klein) en 138px
     (het nummer zakt dan tot achter het trigger-citaat).
     Oude waarde verbatim: font-size: 96px; */
  font-size: clamp(96px, 8.2vw, 118px);
  line-height: 1;
  letter-spacing: .01em;
  color: rgba(2, 14, 44, .07);
  pointer-events: none;
  user-select: none;
  z-index: 0;   /* onder de kaart-link (z-index 1) */
}

/* Dienstnaam = kaartkop (T20). Anton via base-h3; alleen de maat hier —
   de kleur (var(--text-strong)) komt op licht al uit base.css, de oude
   specificiteitsstrijd met .on-dark h3 is met het donkere regime vervallen. */
.os-card .os-card-dienst {
  font-size: clamp(1.4rem, 1.7vw, 1.65rem);
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

/* Oranje quote-teken (merk-element uit s5/s6) boven het trigger-citaat */
.os-card-quotemark {
  display: block;
  width: 22px;
  color: var(--orange-500);
  margin-bottom: 10px;
}

/* Trigger-citaat = herkenningslaag onder de kop: één zin in de woorden van de
   lezer. Public Sans (geen Anton/kapitalen — een citaat schreeuwt niet),
   zwaarder dan de body maar duidelijk ondergeschikt aan de dienstnaam-kop. */
/* LEESMAAT 2026-08-11 (hoort bij de BREEDTE-CORRECTIE in .os-cards): de kaart
   draagt vanaf nu de breedte, de tekstkolom draagt de leesbaarheid. Zonder deze
   grens liep de body op de brede kaart naar ~79 tekens per regel en op de
   gestapelde stand (1100px en smaller, waar één kaart de volle rij vult) zelfs
   naar 97 tekens op 768 en 124 op 1024 — dat laatste was al zo vóór deze ronde en
   is hier meteen meegenomen. Bovengrens is ~70 tekens per regel.
   Opgemeten in Public Sans, headless Chromium: body 15px → 1ch = 9,19px en een
   gemiddeld teken 6,98px, dus 70 tekens ≈ 488px ≈ 53ch; trigger 16,8px → 1ch =
   10,58px en gemiddeld teken 8,70px, dus 488px ≈ 46ch. Twee verschillende
   ch-waarden, één en dezelfde rechterrand (~488px), zodat het tekstblok in de
   kaart één rechte kolom blijft. Op smalle schermen bijt de grens niet: daar is
   de kaart zelf smaller dan 488px. Nieuw in deze ronde (er was geen oude waarde). */

.os-card-trigger {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--text-strong);
  margin-bottom: 14px;
  max-width: 46ch;
}

.os-card-body {
  font-size: .9375rem;
  line-height: 1.6;
  margin-bottom: 26px;
  max-width: 53ch;
}

/* Kaartlink onderin; kleur + hover (text-strong / orange-600) komen op licht
   al uit het btn--link-basiscontract, de oude .on-dark-override is vervallen. */
.os-card .btn--link {
  margin-top: auto;           /* link onderin, kaarten even hoog */
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .12em;
  padding-bottom: 3px;
}

/* ---------- Hover (Timo 260722) ----------
   Reveal-transition (base.css: html.motion [data-reveal], opacity+transform .6s +
   stagger transition-delay) op hogere specificiteit overschrijven: transition-delay
   terug naar 0 zodat de HOVER meteen reageert — de reveal-stagger-delay (.08–.24s)
   lekte anders in de hover en gaf ~een halve seconde vertraging. transform snel
   (.16s); reveal-opacity blijft .5s. Hover/focus alleen op hover-apparaten (geen
   sticky-hover op touch, eerste tap navigeert). De transform-selector met
   html.motion-prefix overruled de reveal-eindstand (.is-in { transform:none },
   0-3-1); de plain selector is de fallback als JS/motion uit staat. Reduced-motion
   is al afgevangen door base.css (transform:none !important). */
html.motion .os-card[data-reveal] {
  transition: opacity .5s ease, transform .16s ease, box-shadow .16s ease;
}
@media (hover: hover) {
  .os-card:hover,
  .os-card:focus-within,
  html.motion .os-card:hover,
  html.motion .os-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }
  .os-card:hover .btn--link,
  .os-card:focus-within .btn--link { color: var(--orange-600); }
  .os-card:hover .arr,
  .os-card:focus-within .arr { transform: translateX(3px); }
}

/* ---------- Scan-band (s2-bandrecept, gescoped) ---------- */

.os-band {
  margin-top: var(--gap-lg);
  background: var(--surface-card);
  /* Op licht tekent de band zich niet meer vanzelf af tegen navy:
     1px paper-rand + shadow-card (zelfde duo als het .card-idioom). */
  border: 1px solid var(--line-paper);
  border-radius: var(--r-band);
  padding: 22px 48px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  color: var(--text-body);
  box-shadow: var(--shadow-card);
}

.os-band-copy {
  flex: 0 1 auto;
  min-width: 0;
  flex-basis: 460px;
}

/* Kleur (text-strong) komt op licht uit base-h3; alleen de marge hier. */
.os-band-title { margin-bottom: 8px; }

.os-band-sub { font-size: var(--text-small); }

.os-band-usps {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  flex: none;
}

/* Hairlines ín de band blijven var(--line-paper): de band is paper, dus het
   paper-hairline-recept geldt (var(--line) is voor hairlines op de cream). */
.os-band-usps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 9px;
  max-width: 156px;
  padding-inline: 14px;
}
.os-band-usps li + li { border-left: 1px solid var(--line-paper); }

.os-usp-icon {
  color: var(--text-strong);
  flex: none;
}

.os-usp-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-strong);
}

.os-band > .btn--primary { flex: none; }

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
  .os-cards { grid-template-columns: 1fr; }
  .os-card-link { padding: 30px 28px 28px; }
  .os-card .os-card-dienst { margin-bottom: 16px; }

  /* Hier valt de rij terug naar één kolom, dus de kaart springt van ~490px naar
     de volle containerbreedte (op 1024 is dat 942px). De tekstkolom blijft op de
     leesmaat van ~488px staan, en zonder deze regel bleef daardoor de hele
     rechterhelft van de kaart leeg — dat was op 1024 het lelijkste beeld van de
     hele sectie. Het ghost-nummer schaalt daarom in de gestapelde stand harder
     mee en vult die hoek als bewust hoekmerk: 123px op 768, 164px op 1024.
     Onder 561px bijt de mobiele regel (84px) weer. Nieuw in deze ronde
     (er was geen oude waarde: het nummer stond hier op de basiswaarde 96px). */
  .os-card-num { font-size: clamp(96px, 16vw, 180px); }
}

@media (max-width: 880px) {
  .os-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 32px 36px;
  }
  .os-band-copy { flex-basis: auto; }
  .os-band-usps { margin-left: 0; }
  .os-band-usps li {
    align-items: flex-start;
    text-align: left;
  }
  .os-band-usps li:first-child { padding-left: 0; }
}

/* ---------- Mobiel ---------- */

@media (max-width: 560px) {
  .os-card-link { padding: 26px 22px; }
  .os-card-num { font-size: 84px; }
  .os-card .os-card-dienst { font-size: 1.35rem; }
  .os-card-trigger { font-size: 1rem; }

  .os-band {
    padding: 28px 24px;
    gap: 22px;
  }
  .os-band-usps {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .os-band-usps li {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
    max-width: none;
    padding: 12px 0;
  }
  .os-band-usps li + li {
    border-left: 0;
    border-top: 1px solid var(--line-paper);
  }
  .os-band-usps li:first-child { padding-top: 0; }
  .os-band-usps li:last-child { padding-bottom: 0; }

  .os-band > .btn--primary {
    width: 100%;
    justify-content: center;
  }
}