/* CS — Cases (23 augustus 2026). Enig nieuw stylesheet van deze pagina.

   WAT HIER STAAT EN WAAROM ZO WEINIG: de pagina is bijna volledig hergebruik.
   - cs1  = PageHero-contract        -> css/sections/page-hero.css + css/sections/s1.css
   - cs2  = magazine-index uit o8    -> css/over-ons/o8.css (.oa-cijfers-*)
   - cs3/cs5 = .card uit base.css + het kop-plus-body-item uit o7
                                     -> css/base.css + css/over-ons/o7.css
   - cs4  = svc-proof-duo uit ws5 + de paper-band uit o6
                                     -> css/sections/svc-proof.css + css/over-ons/o6.css
   - cs6  = slotblok uit nf3         -> css/over-ons/o10.css
   - cs7  = footer uit nf4           -> css/over-ons/o11.css

   Alleen wat GEEN bestaand contract dekt staat hieronder: de afwijkingen op de
   wegwijzerrij, de klikbare rij, de blokindeling van een caseblok en de
   logoregel. Geen nieuwe kleur, geen nieuw font, geen nieuwe radius, geen
   !important; alles via de semantische tokens uit css/tokens.css.

   ANKERS EN DE STICKY HEADER. Er staat hier BEWUST geen scroll-margin-top op
   #advion / #hotelchamp / #decathlon / #bossekop. css/sections/s1.css regel 7
   zet sitebreed html{scroll-padding-top:96px}, en dat is exact de waarde waar
   _qa/verify-anchor-offset.js op meet. Een tweede waarde hier zou daar bovenop
   komen (scroll-padding op de container en scroll-margin op het doel tellen op)
   en het doel onnodig ver naar beneden duwen. Nagemeten op 1440 en 390px met
   datzelfde script: de vier ankers komen met de sitebrede waarde onder de
   header uit. Verandert de headerhoogte, dan verandert die ene regel in s1.css,
   niet deze. */

/* ---------- cs2 — De wegwijzer ---------- */

.cs-weg {
  padding-block: var(--space-section-s);
}

/* De rij is het klikvlak van de stretched link, dus hij heeft een draagvlak
   nodig. Recept uit css/kennisbank/nf2.css (.nf-card-titel a::after). */
.cs-weg .oa-cijfers-row {
  position: relative;
  transition: background-color .15s ease;
}

/* Situatiezin links. Draagt BEWUST geen .display: Anton is een displayfont voor
   losse feiten van twee woorden (o8: "20+ jaar"), en een hele zin tussen
   aanhalingstekens wordt daarin een blok hoofdletters dat niet meer als citaat
   leest. Public Sans 600 op een maat tussen --text-lead en --text-h3 houdt hem
   groot genoeg om de rij te dragen en leesbaar genoeg om een zin te zijn. */
.cs-weg-situatie {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-strong);
  text-wrap: balance;
}

/* Rechterkolom: labelrij (pill + klantnaam) boven de uitkomstzin. */
.cs-weg-wie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.cs-weg-naam {
  font-weight: 700;
  color: var(--text-strong);
}

.cs-weg-uitkomst {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Stretched link: de hele rij klikt, het naam-anker blijft het enige anker. */
.cs-weg-link {
  color: inherit;
}

.cs-weg-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cs-weg .oa-cijfers-row:hover {
  background: var(--surface-card);
}

.cs-weg-link:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 3px;
}

.cs-weg .arr {
  color: var(--orange-500);
  transition: transform .15s ease;
}

.cs-weg .oa-cijfers-row:hover .arr {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .cs-weg .arr { transition: none; }
  .cs-weg .oa-cijfers-row:hover .arr { transform: none; }
}

/* ---------- cs3 / cs5 — De caseblokken ---------- */

.cs-cases {
  padding-block: var(--space-section-s);
}

/* cs5 draagt geen eigen sectiekop en sluit direct op cs3 aan; alleen de
   onderkant houdt het strakke ritme vast. */
.cs-meer {
  padding-block: 0 var(--space-section-s);
}

.cs-lijst {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.cs-case {
  padding: clamp(26px, 3vw, 44px);
}

/* Kopregel: dienstlabel links, klantlogo rechts. Op smalle schermen wrapt het
   logo onder de pill; het blijft dan links staan, in lijn met de rest. */
.cs-case-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 20px;
}

/* KLANTLOGO'S (Timo, 23 augustus 2026).
   Bron en herkleuring: zie het comment bij het eerste logo in
   sections/cases/cs3.html. Hier alleen de maatvoering.

   De hoogtes verschillen PER LOGO en dat is de hele bedoeling. Op gelijke
   boxhoogte oogt Advion (kale kapitalen die de hele box vullen) veel groter dan
   Decathlon (kapitalen op 70% van de box) en Bossekop (kapitalen op 50%, met
   een tagline eronder), terwijl Hotelchamps massieve vierkant juist te zwaar
   weegt. Gemeten letterband per logo op de master van 176px: Advion 96%,
   Decathlon 70%, Bossekop 50%, Hotelchamp x-hoogte 40%. De hoogtes hieronder
   brengen die letterbanden op één register; het gemiddelde ligt op 31px, de
   maat die deze pagina aanhoudt. Naast elkaar gerenderd en beoordeeld voordat
   ze hier zijn vastgelegd.
   Geen opacity-demping zoals in de marquee (css/sections/s1.css zet .85, o8
   zet .8): daar zijn de logo's decor, hier zijn ze identificatie en horen ze op
   dezelfde sterkte te staan als de klantnaam ernaast. De inkt is --navy-950,
   exact de kleur van .display, dus vol staat hier gelijk aan de kop. */
.cs-case-logo {
  height: 31px;
  width: auto;
  max-width: 62vw;
  flex: none;
}

.cs-case-logo--advion     { height: 22px; }
.cs-case-logo--hotelchamp { height: 32px; }
.cs-case-logo--decathlon  { height: 29px; }
.cs-case-logo--bossekop   { height: 40px; }

/* Klantnaam in Anton, één trap onder de sectiekop zodat de sectie de hiërarchie
   houdt en het blok een kaartkop blijft. */
.cs-case-naam {
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
}

.cs-case-sector {
  margin-top: 10px;
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* De drie geregelde items. Label + alinea = het o7-contract
   (.oa-standpunt-item-kop / -body); hier draagt het label de meta-typografie
   van .nf-card-meta (12px / 700 / .14em / uppercase / --text-muted), zodat een
   caseblok dezelfde labeltaal spreekt als een artikelkaart. */
.cs-case-items {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
  margin-top: clamp(22px, 2.6vw, 30px);
}

.cs-case-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.cs-case-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 78ch;
}

/* Derde alinea = de uitkomst; die staat in de sterke tekstkleur zodat het
   resultaat het zwaartepunt van het blok is, ook zonder cijferblok. */
.cs-case-item--uitkomst .cs-case-body {
  color: var(--text-strong);
}

.cs-case-slot {
  margin-top: clamp(24px, 2.8vw, 32px);
}

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  /* De wegwijzerrij klapt naar één kolom (o8-gedrag); de pijl blijft achter de
     uitkomstzin staan en krijgt dus geen eigen regel. */
  .cs-weg-situatie { max-width: none; }
}

@media (max-width: 560px) {
  .cs-case-logo { max-width: 100%; }
  .cs-case-logo--bossekop { height: 34px; }
  .cs-case-logo--hotelchamp { height: 28px; }
  .cs-case-logo--decathlon { height: 25px; }
  .cs-case-logo--advion { height: 19px; }
}