/* Sennasearch V2 — S2 Oplossingen (navy, on-dark)
   Vervolg op de hero: zelfde navy, bescheiden bovenpadding zodat S1+S2 één
   doorlopend donker blok vormen. Onderpadding normaal; daarna harde seam
   naar de cream van S3. */

.s2 {
  padding-block: clamp(2.75rem, 6vh, 4.5rem) var(--space-section);
}

/* ---------- Bovenste grid: intro links, 2 kaarten rechts ----------
   BESLISSING Timo 2026-08-11 (call 5 augustus 2026): nog maar twee diensten.
   Oude sectiekop verbatim: "Bovenste grid: intro links, 3 kaarten rechts". */

.s2-grid {
  display: grid;
  grid-template-columns: minmax(280px, 350px) 1fr;
  /* Twee rijen sinds 2026-08-20: de "bekijk alle oplossingen"-knop is uit
     .s2-intro gehaald en is nu een eigen gridkind. Rij 2 is 1fr, zodat de knop er
     met align-self:end onderin zakt en zijn onderkant weer gelijk ligt met die van
     de kaarten -- precies waar hij stond. De kaartenkolom overspant beide rijen.
     row-gap staat daarom op 0: de afstand tussen lead en knop komt uit de
     margin-bottom van de lead, net als voorheen. Onder 1100px wordt dit allemaal
     teruggezet, zie de media query onderaan. */
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 4.5vw, 72px);
  row-gap: 0;
  align-items: start;
}

.s2-intro { grid-column: 1; grid-row: 1; }

.s2-alle {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-self: start;
}

.s2-cards { grid-column: 2; grid-row: 1 / -1; }

.s2-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* BESLISSING Timo 2026-08-11 (kaartopbouw gelijkgetrokken met de oplossingen-
     pagina): de uitlijning kaart-onderkant = knop-onderkant liep tot nu toe maar
     één kant op. De kaartenkolom rekte mee met de introkolom (align-self: stretch
     op .s2-cards), maar andersom niet. Met het citaat erbij zijn de kaarten in de
     band 1101-1360px juist HOGER dan de introkolom (gemeten: 448 tegen 336 op
     1101), en dan bleef de knop 74 tot 112px boven de kaart-onderkant hangen.
     De introkolom rekt nu ook mee en de knop zakt met margin-top:auto naar
     onderen, zodat de uitlijning in beide richtingen klopt. Onder 1100px is de
     grid éénkoloms en heeft de rij geen vrije ruimte, dus daar verandert er
     niets. Nieuw in deze ronde (er was geen oude waarde).

     BIJ 2026-08-20: de knop zit niet meer IN dit blok, dus het rekken en de
     margin-top:auto zijn hier niet meer nodig; dat werk doet nu de tweede
     gridrij bovenaan dit bestand. Oude waarden verbatim:
       align-self: stretch;
       .s2-intro > .btn--ghost { margin-top: auto; } */
  align-self: start;
}
.s2-intro .eyebrow { margin-bottom: 18px; }
.s2-intro h2 {
  margin-bottom: 22px;
  /* PNG: 3 vaste regels; --text-h2 wrapt in deze kolom naar 4 */
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
}
.s2-intro .lead {
  max-width: 36ch;
  margin-bottom: 36px;
}

/* ---------- Oplossingskaarten (paper op navy) ---------- */

.s2-cards {
  display: grid;
  /* BESLISSING Timo 2026-08-11 (call 5 augustus 2026): nog maar twee diensten,
     dus twee kaarten. Oude waarde verbatim: repeat(3, minmax(0, 1fr)) — met drie
     kolommen zou de derde cel leeg blijven staan en op tablet (880 tot 1100px)
     een zichtbaar gat geven. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
  /* Timo 2026-07-10: kaart-onderkanten gelijk met de outline-knop links.
     align-self op de kaartenkolom (niet align-items op de grid), zodat de
     intro-kolom bovenaan blijft staan.
     BESLISSING Timo 2026-08-11: van end naar stretch. Twee kaarten dragen minder
     tekst dan drie en werden dus lager, waardoor er boven de kaartenrij een gat
     viel tegenover de introkolom. Stretch laat de kaartenkolom de volle rijhoogte
     vullen: onderkanten liggen nog steeds gelijk met de outline-knop links (die is
     het laatste kind van de introkolom), en de bovenkanten lijnen nu ook uit. De
     "MEER INFO"-link blijft onderin de kaart hangen via margin-top: auto.
     Oude waarde verbatim: align-self: end; */
  align-self: stretch;
}

.s2-card {
  position: relative;
  overflow: hidden; /* cropt het ghost-nummer */
  display: flex;    /* de kaart-anchor (.s2-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="s2-card-link"> vult de kaart mét de padding, dus overal op de kaart
   klikken navigeert (niet alleen "MEER INFO"). Het ghost-nummer ligt eronder. */
.s2-card-link {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px;
  color: inherit;
  text-decoration: none;
}

.s2-card-icon {
  color: var(--text-strong);
  /* BESLISSING Timo 2026-08-11 (kaartopbouw gelijkgetrokken met de oplossingen-
     pagina): de grote luchtkolom onder het icoon was er om een kaart met weinig
     inhoud te vullen. De kaart draagt nu een citaat + quote-teken erbij, dus die
     lucht is niet meer nodig en zou de kaart alleen maar hoger maken dan de
     introkolom links. Teruggebracht naar ongeveer de helft; het icoon houdt zijn
     eigen ademruimte, de tekstblokken erven het ritme van os2.
     Oude waarde verbatim: margin-bottom: clamp(36px, 4.5vw, 58px); */
  margin-bottom: clamp(22px, 2.4vw, 32px);
}

/* Reusachtig ghost-nummer rechtsboven.
   Canon: 7% ink op paper; hiervoor bestaat geen token (bewuste uitzondering). */
.s2-card-num {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 96px;
  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) */
}

.s2-card h3 {
  color: var(--text-strong);
  /* BESLISSING Timo 2026-08-11: onder de dienstnaam komt nu het quote-teken en
     niet meer direct de bodytekst; die overgang heeft iets meer lucht nodig,
     gelijk aan de ondergrens van .os-card-dienst op de oplossingenpagina
     (clamp(18px, 2.2vw, 26px)). Bewust de ondergrens en geen clamp: de homepage-
     kaart heeft het icoonblok er nog boven en moet lager blijven dan de os-kaart.
     Oude waarde verbatim: margin-bottom: 14px; */
  margin-bottom: 18px;
  /* AFGEWOGEN EN VERWORPEN 2026-08-11, hier genoteerd omdat het verklaart waarom
     kaart 01 onderin nog een restgat houdt: `margin-top: auto` op deze h3 zou de
     restruimte van de kortste kaart verdelen over twee plekken (onder het icoon
     en boven de CTA) in plaats van hem volledig boven "MEER INFO" te laten
     vallen. Gemeten op 1440px halveert dat het gat van 74 naar 50px. Het kost
     alleen de belangrijkste scanlijn van de rij: de dienstnaam van kaart 01 zakt
     dan 24px (op 1280px zelfs 36px) onder die van kaart 02, en met de kop
     schuiven ook het quote-teken, het citaat en de body mee. Twee kaarten naast
     elkaar met koppen op verschillende hoogte lezen als een fout, een restgat
     onderin niet. Alles lijnt dus vanaf de bovenkant uit, precies zoals de
     routekaarten op de oplossingenpagina, waar kaart 01 om dezelfde reden een gat
     van 98px houdt. Dat gat komt uit de kortere teaser van kaart 01, niet uit de
     opbouw. */
}

/* Oranje quote-teken + citaat in de stem van de bezoeker, 1-op-1 het recept van
   de routekaarten (.os-card-quotemark / .os-card-trigger in
   css/oplossingen/os2.css). Zelfde maatvoering, zelfde merk-oranje; de kaart
   blijft verder paper op navy, dus de kleurregie van de oplossingenpagina is
   NIET meegenomen. Nieuw in deze ronde (er was geen oude waarde). */
.s2-card-quotemark {
  display: block;
  width: 22px;
  color: var(--orange-500);
  margin-bottom: 10px;
}

/* LEESMAAT 2026-08-11 (controleronde, hoort bij het gelijktrekken met de
   oplossingenpagina): de os-kaart kreeg deze ronde een tekstkolom-grens
   (max-width op .os-card-trigger en .os-card-body in css/oplossingen/os2.css),
   de s2-kaart niet, en juist die grens bewaakt de leesbaarheid zodra de kaarten
   onder 880px naar één kolom vallen en de kaart de volle containerbreedte pakt.
   Zonder grens gemeten in headless Chromium, langste regel van de body:
   768px viewport 95 tekens, 820px 95, 879px 108 (kaart 809px breed, tekst 747px),
   en het citaat liep daar naar 79 tekens. Op de oplossingenpagina bleef dezelfde
   tekst in dezelfde band op 71 tot 73 tekens staan, precies door die grens.
   Waarden 1-op-1 overgenomen van os2, inclusief de meting die daar is genoteerd:
   body 15px -> 70 tekens ~ 488px ~ 53ch, trigger 16,8px -> 488px ~ 46ch. Twee
   verschillende ch-waarden, dezelfde rechterrand, zodat het tekstblok in de kaart
   één rechte kolom blijft.
   Bijt ALLEEN in de gestapelde band van ongeveer 597 tot 880px; daarboven is de
   kaart twee-koloms en dus zelf smaller dan 488px (1024: tekst 397px, 1280: 314px,
   1440: 361px), daaronder is de kaart smaller (390: 296px). Op geen van de vijf
   controlebreedtes verandert er dus iets aan het beeld dat is goedgekeurd.
   Nieuw in deze ronde (er was geen oude waarde). */

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

/* BESLISSING Timo 2026-08-11: van elementselector naar klasse. De kaart heeft
   sinds deze ronde TWEE alinea's (trigger + body); .s2-card p (0-1-1) pakte ze
   allebei en won bovendien van .s2-card-trigger (0-1-0), waardoor het citaat de
   body-maat kreeg. Waarden zelf ongewijzigd.
   Oude waarde verbatim: .s2-card p { */
.s2-card-body {
  font-size: .9375rem;
  line-height: 1.6;
  margin-bottom: 26px;
  /* Zie het LEESMAAT-blok boven .s2-card-trigger. Nieuw in deze ronde (er was
     geen oude waarde). */
  max-width: 53ch;
}

.s2 .s2-card .btn--link {
  margin-top: auto;           /* link onderin, kaarten even hoog */
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .12em;
  padding-bottom: 3px;
  color: var(--text-strong);  /* override .on-dark .btn--link (kaart = paper) */
}
.s2 .s2-card .btn--link:hover { color: var(--orange-600); }

/* ---------- 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. Grotere lift (-6px) want op de navy sectie
   draagt de schaduw nauwelijks; de beweging is het signaal. Hover/focus alleen op
   hover-apparaten (geen sticky-hover op touch, eerste tap navigeert). transform-
   selector met html.motion-prefix overruled de reveal-eindstand (.is-in
   { transform:none }, 0-3-1); plain = JS-uit-fallback. */
html.motion .s2-card[data-reveal] {
  transition: opacity .5s ease, transform .16s ease, box-shadow .16s ease;
}
@media (hover: hover) {
  .s2-card:hover,
  .s2-card:focus-within,
  html.motion .s2-card:hover,
  html.motion .s2-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }
  .s2 .s2-card:hover .btn--link,
  .s2 .s2-card:focus-within .btn--link { color: var(--orange-600); }
  .s2-card:hover .arr,
  .s2-card:focus-within .arr { transform: translateX(3px); }
}

/* ---------- Scan-band (witte band onderin de navy sectie) ---------- */

.s2-band {
  margin-top: var(--gap-lg);
  background: var(--surface-card);
  border-radius: var(--r-band);
  padding: 22px 48px; /* Timo 2026-07-10: band minder hoog (was 36px) */
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  color: var(--text-body);
  box-shadow: var(--shadow-card);
}

.s2-band-copy {
  flex: 0 1 auto;
  min-width: 0;
  /* genoeg ruimte zodat de subregel op 1 regel blijft (band laag houden) */
  flex-basis: 460px;
}

.s2 .s2-band-title {
  color: var(--text-strong); /* override .on-dark h3 (band = paper) */
  margin-bottom: 8px;
}

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

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

.s2-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;
}
.s2-band-usps li + li { border-left: 1px solid var(--line-paper); }

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

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

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

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

@media (max-width: 1100px) {
  .s2-grid {
    grid-template-columns: 1fr;
    /* Rij-indeling terug naar automatisch en de rij-afstand terug, anders worden
       de drie blokken in twee rijen geperst en plakken ze tegen elkaar. */
    grid-template-rows: none;
    row-gap: var(--gap-md);
  }
  .s2-intro,
  .s2-alle,
  .s2-cards {
    grid-column: auto;
    grid-row: auto;
  }
  /* Eenkoloms volgt de markup, en daar staat de knop NA de kaarten. Dat is precies
     de bedoeling: eerst de twee oplossingen, dan pas "bekijk alle oplossingen". */
  .s2-alle { justify-self: start; }

  /* De 36px onder de lead hoorde bij de knop die er tot 20 augustus ONDER stond.
     Nu de knop naar beneden is verhuisd stapelde die marge op de rij-afstand van
     de grid: 36 + 40 = 76px leeg tussen de lead en de eerste kaart. De lead is
     hier het laatste blok van de intro, dus de afstand hoort alleen nog uit de
     rij-afstand te komen. Op desktop blijft de 36px staan: daar zit de knop nog
     steeds in dezelfde kolom, alleen een rij lager. */
  .s2-intro .lead { margin-bottom: 0; }
  .s2-intro { max-width: 560px; }
}

@media (max-width: 880px) {
  .s2-cards { grid-template-columns: 1fr; }
  /* BESLISSING Timo 2026-08-11: deze override bestond om de desktop-clamp (tot
     58px) op smalle schermen terug te brengen. De nieuwe clamp staat hier al op
     zijn ondergrens van 22px, dus 28px zou de icoonlucht op mobiel juist GROTER
     maken dan op 1100px breed. Regel vervallen; de clamp regelt het nu zelf.
     Oude waarde verbatim: .s2-card-icon { margin-bottom: 28px; } */
  .s2-card-num { font-size: 84px; }

  .s2-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 32px 36px;
  }
  /* Kolom-layout: flex-basis 460px is de desktop-BREEDTE; hier wordt het de
     hoogte en rekt de band enorm uit — terug naar auto (Timo 2026-07-10). */
  .s2-band-copy { flex-basis: auto; }
  .s2-band-usps { margin-left: 0; }
  .s2-band-usps li {
    align-items: flex-start;
    text-align: left;
  }
  .s2-band-usps li:first-child { padding-left: 0; }
}

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

@media (max-width: 560px) {
  .s2 { padding-top: 2.5rem; }

  .s2-card-link { padding: 26px 22px; }
  /* Citaat een maat kleiner op mobiel, zelfde stap als .os-card-trigger op de
     oplossingenpagina: de kaart is hier smal en het citaat van kaart 02 loopt
     anders over te veel regels. Nieuw in deze ronde (er was geen oude waarde). */
  .s2-card-trigger { font-size: 1rem; }

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

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