/* Klantcase, ontwerp 2 (src/_includes/case2/case.njk, werking in case2.js).
   Kop van een halve pagina, daarna één beeld dat bij het scrollen van kant wisselt en verandert:
   Situatie (links) → Uitdaging (rechts) → Resultaat (links). Alleen tokens en bestaande bouwstenen (.panel, .surface). */

/* ================= 1. Kop: halve pagina ================= */
.case2-kop {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(380px, 50svh, 560px);
  padding: calc(var(--sc-masthead-h) + var(--sc-space-5)) 0 clamp(var(--sc-space-6), 4vw, var(--sc-space-7));
  background: var(--sc-ink); color: var(--sc-white);
  border-radius: 0 0 var(--sc-radius-xl) var(--sc-radius-xl);
  box-shadow: var(--sc-shadow-3);
}
/* foto van de klant; minder gedimd dan in de hero, zodat de logo's van de klant zichtbaar blijven */
.case2-kop__foto { position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover; filter: brightness(.78) saturate(.9); }
/* donkere zweem links en onderaan, achter de tekst */
.case2-kop__zweem {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(50, 50, 50, .7) 0%, rgba(50, 50, 50, 0) 55%),
    linear-gradient(90deg, rgba(50, 50, 50, .78) 0%, rgba(50, 50, 50, .4) 45%, rgba(50, 50, 50, 0) 75%);
}
.case2-kop__tekst { position: relative; width: 100%; }
.case2-kop__label { margin: 0 0 var(--sc-space-3); font-size: var(--sc-fs-small); font-weight: 600; color: var(--sc-lime); }
.case2-kop__titel {
  margin: 0; max-width: 20ch; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); font-weight: 800; line-height: var(--sc-lh-tight);
  letter-spacing: var(--sc-tracking-tight); text-wrap: balance;
}
.case2-kop__intro { margin: var(--sc-space-4) 0 0; max-width: 60ch; font-size: var(--sc-fs-lead); color: var(--sc-on-dark-muted); }
/* Glazen kaartje met beide logo's: rechts, voor de helft over de kop en voor de helft over de inhoud.
   De logo's staan op een wit vlak binnen het glas, zodat ze op donker én licht leesbaar blijven. */
.case2-merken {
  --logo-h: 56px; --vlak-y: var(--sc-space-5); --vlak-x: var(--sc-space-6);
  /* hoogte van het kaartje; de helft daarvan valt over de kop, de andere helft neemt ruimte in */
  --kaart-h: calc(var(--logo-h) + 2 * var(--vlak-y) + 2 * var(--sc-space-4) + 2px);
  position: relative; z-index: 3; display: flex; justify-content: flex-end;
  margin-bottom: calc(var(--kaart-h) / -2);
}
.case2-merken__kaart { margin: 0; padding: var(--sc-space-4); transform: translateY(-50%); }
.case2-merken__vlak {
  display: flex; align-items: center; gap: var(--sc-space-5);
  padding: var(--vlak-y) var(--vlak-x);
  background: var(--sc-white); border-radius: var(--sc-radius-sm);
}
.case2-merken__vlak img { display: block; height: var(--logo-h); width: auto; }
/* brede logo's (zoals het OM) niet breder dan het logo van Student Consultant; ze schalen binnen dat vlak */
.case2-merken__vlak img + span + img { max-width: calc(var(--logo-h) * 3.9); object-fit: contain; }
.case2-merken__x { font-size: var(--sc-fs-h3); font-weight: 400; line-height: 1; color: var(--sc-ink-muted); }
/* minder lege ruimte tussen het kaartje en de eerste scène (Situatie) */
@media (min-width: 881px) {
  .case2-merken + .case2-verhaal { margin-top: -22svh; }
  /* de titel van de eerste scène staat altijd ruim onder het kaartje, ook als de tekst lang is */
  .case2-merken + .case2-verhaal .case2-stap:first-child { padding-top: calc(22svh + var(--sc-space-8)); }
}
@media (max-width: 720px) {
  .case2-merken { --logo-h: 34px; --vlak-y: var(--sc-space-3); --vlak-x: var(--sc-space-4); justify-content: center; }
  .case2-kop:has(+ .case2-merken) { padding-bottom: calc(var(--sc-space-7) + var(--sc-space-4)); }
  .case2-merken { margin-bottom: 0; }
  .case2-merken__kaart { padding: var(--sc-space-3); }
  .case2-merken + .case2-verhaal { margin-top: calc(var(--kaart-h) / -2 + var(--sc-space-3)); }
  .case2-merken__vlak { gap: var(--sc-space-3); }
  .case2-kop__zweem { background: linear-gradient(180deg, rgba(50, 50, 50, .35), rgba(50, 50, 50, .8)); }
}

/* ================= 2. Verhaal ================= */
.case2-verhaal { position: relative; --kloof: clamp(var(--sc-space-6), 5vw, var(--sc-space-8)); }

/* Het podium staat stil (sticky) terwijl de tekst eroverheen scrolt */
/* het podium staat in een laag van precies de hoogte van het verhaal, zodat het daarna meescrolt */
.case2-podiumhouder { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.case2-podium {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center;
}
.case2-podium__raster { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--kloof); width: 100%; padding-top: calc(var(--sc-masthead-h) * .6); }
.case2-beeld {
  grid-column: 1;
  /* --zijde: 0 = links, 1 = rechts (case2.js) */
  transform: translateX(calc(var(--zijde, 0) * (100% + var(--kloof))));
  will-change: transform;
}
.case2-paneel {
  position: relative; padding: 0; width: 100%;
  aspect-ratio: 1; max-height: calc(100svh - var(--sc-masthead-h) - 96px); margin-inline: auto;
}
@supports (aspect-ratio: 1) { .case2-paneel { width: min(100%, calc(100svh - var(--sc-masthead-h) - 96px)); } }
.case2-paneel__foto {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: var(--foto, 1); filter: saturate(calc(.4 + var(--foto, 1) * .6));
}
.case2-paneel__svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.case2-paneel__labels { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; }
.case2-paneel__labels li {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -150%);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(50, 50, 50, .72); border: 1px solid rgba(255, 255, 255, .22);
  font-size: var(--sc-fs-small); font-weight: 500; color: var(--sc-white);
  opacity: 0; transition: none;
}

/* Beelden op maat (case2/beelden.njk): één beeld per scène, op elkaar gestapeld; case2.js toont het beeld
   van de scène in beeld en laat het overlopen in het volgende. Zonder JS staat alleen het eerste beeld er. */
.case2-lagen { display: grid; align-items: center; max-height: calc(100svh - var(--sc-masthead-h) - 96px); }
.case2-laag { grid-area: 1 / 1; min-width: 0; }
.case2-laag > * { max-height: calc(100svh - var(--sc-masthead-h) - 96px); overflow: hidden; }
html:not(.js) .case2-laag + .case2-laag { display: none; }
.js .case2-laag { opacity: 0; visibility: hidden; transition: opacity 700ms var(--sc-ease), visibility 0s linear 700ms; }
.js .case2-laag.is-zicht { opacity: 1; visibility: visible; transition: opacity 700ms var(--sc-ease); }
/* resultaat zonder eigen beeld: Student Consultant × klant, op de kopfoto als die er is */
.case2-samenfoto {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--sc-radius-lg);
  background: var(--sc-ink); box-shadow: var(--sc-shadow-3);
}
.case2-samenfoto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.85) saturate(.9); }
.case2-samenfoto__merken {
  position: absolute; left: 50%; bottom: var(--sc-space-5); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--sc-space-4); padding: var(--sc-space-4) var(--sc-space-5);
  width: max-content; max-width: calc(100% - 2 * var(--sc-space-5));
  background: var(--sc-white); border-radius: var(--sc-radius-sm); box-shadow: var(--sc-shadow-3); white-space: nowrap;
}
.case2-samenfoto__merken img { display: block; height: clamp(24px, 3vw, 40px); width: auto; min-width: 0; max-width: 45%; object-fit: contain; }
.case2-samenfoto__merken span { color: var(--sc-ink-muted); font-size: var(--sc-fs-lead); }
/* zonder foto: de logo's groot in het midden van het merkvlak */
.case2-samenfoto.is-zonder-foto .case2-samenfoto__merken { bottom: auto; top: 50%; transform: translate(-50%, -50%); gap: var(--sc-space-5); padding: var(--sc-space-5) var(--sc-space-6); }
.case2-samenfoto.is-zonder-foto .case2-samenfoto__merken img { height: clamp(32px, 4vw, 52px); }

/* Tekst: elke scène een schermhoogte, in de kolom tegenover het beeld */
.case2-stappen { position: relative; z-index: 1; }
.case2-stap {
  min-height: 100svh; width: calc(50% - var(--kloof) / 2);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--sc-masthead-h) * .6) 0 0;
  opacity: var(--zicht, 1); transform: translateY(calc((1 - var(--zicht, 1)) * 24px));
}
.case2-stap--rechts { margin-left: auto; }
.case2-stap__titel { margin: 0 0 var(--sc-space-3); font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); font-weight: 800; line-height: var(--sc-lh-tight); letter-spacing: var(--sc-tracking-tight); color: var(--sc-ink); }
.case2-stap__lead { margin: 0 0 var(--sc-space-4); font-size: var(--sc-fs-h3); font-weight: 700; line-height: var(--sc-lh-snug); color: var(--sc-blue); }
.case2-stap p:not([class]) { margin: 0 0 var(--sc-space-3); max-width: 52ch; color: var(--sc-ink-muted); font-size: var(--sc-fs-lead); }
.case2-stap__vraag { margin: var(--sc-space-3) 0 0; padding-left: var(--sc-space-4); border-left: 3px solid var(--sc-lime); font-weight: 600; max-width: 52ch; }
.case2-punten { list-style: none; margin: var(--sc-space-2) 0 0; padding: 0; display: grid; gap: var(--sc-space-4); }
.case2-punten li { display: grid; grid-template-columns: minmax(7ch, auto) 1fr; gap: var(--sc-space-4); align-items: baseline; padding-top: var(--sc-space-4); border-top: 1px solid var(--sc-line); }
.case2-punten strong { font-size: var(--sc-fs-h3); font-weight: 800; color: var(--sc-ink); white-space: nowrap; }
.case2-punten span { color: var(--sc-ink-muted); }

/* Mobiel: het beeld blijft bovenaan staan, de tekst scrolt eronder; geen kantwissel */
@media (max-width: 880px) {
  .case2-podium { top: calc(var(--sc-masthead-h) - 8px); height: auto; padding: var(--sc-space-3) 0 var(--sc-space-5); background: linear-gradient(180deg, var(--sc-white) 88%, rgba(255, 255, 255, 0)); }
  .case2-stappen { padding-top: calc(38svh + var(--sc-space-6)); }
  .case2-podiumhouder { z-index: 2; }
  .case2-paneel__labels li { font-size: 11px; padding: 2px 7px; }
  .case2-podium__raster { grid-template-columns: 1fr; padding-top: 0; }
  .case2-beeld { transform: none; }
  .case2-paneel { width: min(100%, 38svh); max-height: none; }
  .case2-stap { width: 100%; min-height: 72svh; justify-content: flex-start; padding-top: var(--sc-space-6); }
  .case2-stap--rechts { margin-left: 0; }
  /* beelden op maat: vaste hoogte bovenin, zodat de tekst eronder op dezelfde plek begint */
  .case2-lagen, .case2-laag > * { max-height: 38svh; }
  .case2-lagen { height: 38svh; }
  .case2-samenfoto { aspect-ratio: auto; height: 38svh; }
}

/* ================= 3. Overzicht: kort en visueel ================= */
.case2-overzicht { position: relative; z-index: 1; }
.case2-overzicht > .container > .section__title { margin-bottom: var(--sc-space-6); }
.case2-blok__titel { margin: 0 0 var(--sc-space-5); font-size: var(--sc-fs-h3); font-weight: 700; }

/* resultaten groot in het merkvlak, projectgegevens ernaast */
.case2-samen { display: grid; gap: var(--sc-space-6); align-items: center; }
@media (min-width: 960px) { .case2-samen { grid-template-columns: 1fr minmax(240px, .38fr); } }
/* zonder resultaatcijfers: de projectgegevens over de volle breedte naast elkaar */
.case2-samen--gegevens .case2-samen__gegevens { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 960px) { .case2-samen--gegevens { grid-template-columns: 1fr; } }
.case2-samen__cijfers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.case2-samen__cijfers li { display: flex; flex-direction: column; gap: var(--sc-space-2); padding-left: var(--sc-space-4); border-left: 3px solid var(--sc-lime); }
.case2-samen__cijfers strong { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.05; color: var(--sc-white); letter-spacing: var(--sc-tracking-tight); }
/* een woord als uitkomst ("Onderhoudbaar") kleiner, zodat het op één regel past */
.case2-samen__cijfers .is-woord strong { font-size: clamp(1.4rem, 1rem + 1vw, 1.85rem); }
.case2-samen__cijfers .is-lang strong { font-size: clamp(1.25rem, .9rem + .8vw, 1.5rem); }
.case2-samen__cijfers span { color: var(--sc-on-dark-muted); font-size: var(--sc-fs-small); line-height: 1.4; }
.case2-samen__gegevens { margin: 0; display: grid; gap: var(--sc-space-4); padding: var(--sc-space-5); border-radius: var(--sc-radius-md, 14px); background: rgba(255, 255, 255, .08); border: 1px solid var(--sc-on-dark-line); }
.case2-samen__gegevens dt { font-size: var(--sc-fs-small); color: var(--sc-on-dark-muted); }
.case2-samen__gegevens dd { margin: 2px 0 0; font-weight: 600; color: var(--sc-white); }
.case2-samen__gegevens a { color: var(--sc-white); text-decoration-color: var(--sc-lime); text-underline-offset: 3px; }

/* aanpak (scène 2) als route: genummerde stappen langs een lijn die van blauw naar lime loopt */
.case2-route { list-style: none; margin: var(--sc-space-2) 0 0; padding: 0; display: grid; gap: var(--sc-space-4); position: relative; max-width: 52ch; }
.case2-route::before {
  content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #4170B1, #5F8293, #79976F, #97AD56, #B6BE38);
}
.case2-route li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 48px; }
.case2-route__nr {
  position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%;
  background: var(--sc-white); border: 3px solid var(--sc-blue); font-size: var(--sc-fs-small); font-weight: 700; color: var(--sc-ink);
}
.case2-route li:last-child .case2-route__nr { background: var(--sc-lime); border-color: var(--sc-lime); }
.case2-route strong { font-weight: 700; line-height: var(--sc-lh-snug); color: var(--sc-ink); }
.case2-route__moment { font-size: var(--sc-fs-small); color: var(--sc-ink-muted); }
.case2-route__tekst { margin-top: 2px; font-size: var(--sc-fs-small); line-height: 1.5; color: var(--sc-ink-muted); }

/* evaluatie en team naast elkaar */
.case2-duo { display: grid; gap: var(--sc-space-6); align-items: start; margin-top: clamp(var(--sc-space-7), 6vw, var(--sc-space-8)); }
@media (min-width: 960px) { .case2-duo { grid-template-columns: 1.4fr 1fr; } }
.case2-reacties { display: grid; gap: var(--sc-space-5); }
/* evaluatie: redactionele samenvatting, bewust geen citaatvorm */
.case2-terugblik { margin: 0; padding: var(--sc-space-6); border-left: 4px solid var(--sc-lime); }
.case2-terugblik .case2-blok__titel { margin-bottom: var(--sc-space-3); }
.case2-terugblik p { margin: 0; font-size: var(--sc-fs-lead); line-height: 1.5; color: var(--sc-ink); }
.case2-stem { position: relative; margin: 0; padding: var(--sc-space-7) var(--sc-space-6) var(--sc-space-6); }
.case2-stem__teken { position: absolute; top: -.1em; left: var(--sc-space-5); font-size: 6rem; line-height: 1; font-weight: 800; color: var(--sc-lime); }
.case2-stem blockquote { margin: 0; }
.case2-stem blockquote p, .case2-stem__tekst { margin: 0; font-size: var(--sc-fs-lead); line-height: 1.5; color: var(--sc-ink); }
.case2-stem figcaption { margin-top: var(--sc-space-4); font-size: var(--sc-fs-small); color: var(--sc-ink-muted); }
.case2-team__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-space-4); grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); }
.case2-team__naam { color: var(--sc-ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .case2-stap { transform: none; }
}