/* ============================================================
   NONIUS — case-template (master base)
   Laadt bovenop home.css. Alles hier is klantonafhankelijk:
   elke case-pagina en de case-index gebruiken exact deze regels.
   ============================================================ */

.case-hero{ padding-block:clamp(2.4rem,6vw,4.4rem) clamp(1.4rem,3vw,2.2rem); }
.case-hero h1{ font-size:clamp(2.1rem,5.2vw,3.7rem); margin:.9rem 0 0; max-width:18ch; }
.case-hero .lead{ font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--muted);
  max-width:56ch; margin:1.1rem 0 0; }

.case-meta{ display:flex; flex-wrap:wrap; gap:1.6rem 2.6rem; margin:2rem 0 0;
  padding-top:1.4rem; border-top:1px solid var(--line-soft); }
.case-meta div{ min-width:0; }
.case-meta dt{ font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.case-meta dd{ margin:.35rem 0 0; font-weight:600; font-size:.96rem; max-width:34ch; }
.case-meta a{ color:var(--goud-deep); text-decoration:none; border-bottom:1px solid currentColor; }

/* ---- het vertoon-slot: slideshow over de volle vensterbreedte --------- */
/* <main class="case"> is zelf niet begrensd — de .wrap binnen elke sectie doet
   dat. Deze sectie laat de wrap weg en loopt dus vanzelf van rand tot rand,
   zonder 100vw-trucs die op de scrollbar stuklopen. */
.case-stage-wrap{ margin-block:0 clamp(1.4rem,3vw,2.4rem); }
.case-stage{ position:relative; width:100%; overflow:hidden;
  height:clamp(320px,58vw,760px);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:color-mix(in srgb,var(--ink) 10%,transparent); }

.stage-track{ position:absolute; inset:0; }
.stage-track img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0; transition:opacity .7s ease; }
.stage-track img.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .stage-track img{ transition:none; } }

.stage-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:rgba(20,15,9,.42);
  color:#fff; font-size:1.7rem; line-height:1; padding:0 0 .18em;
  backdrop-filter:blur(3px); transition:background .16s, transform .16s; }
.stage-nav:hover{ background:rgba(20,15,9,.72); }
.stage-nav:focus-visible{ outline:3px solid var(--goud); outline-offset:2px; }
.stage-nav.prev{ left:clamp(.6rem,2vw,1.6rem); }
.stage-nav.next{ right:clamp(.6rem,2vw,1.6rem); }

.stage-dots{ position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  z-index:4; display:flex; gap:.5rem; }
.stage-dots button{ width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.6); background:transparent; transition:background .16s; }
.stage-dots button.on{ background:#fff; }
.stage-dots button:focus-visible{ outline:2px solid var(--goud); outline-offset:3px; }

/* Subtiele klantnaam linksonder: fluistert tot je erover gaat, dan licht hij op. */
.stage-title{ position:absolute; left:clamp(1rem,4vw,2.4rem); bottom:1.1rem; z-index:4;
  font-family:var(--display); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(1.1rem,2.4vw,1.9rem); color:#fff; opacity:.34;
  text-shadow:0 2px 14px rgba(0,0,0,.55); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease; }
.case-stage:hover .stage-title{ opacity:.95; transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .stage-title{ transition:none; } }

.stage-label{ position:absolute; right:1rem; top:.9rem; z-index:4;
  font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#f6efe1; opacity:.85; pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* ---- lopende tekst --------------------------------------------------- */
.case-body .case-sec{ display:grid; gap:.4rem 3rem; padding-block:clamp(1.1rem,2.4vw,1.8rem);
  border-top:1px solid var(--line-soft); }
.case-body .case-sec:first-child{ border-top:0; padding-top:0; }
@media (min-width:820px){ .case-body .case-sec{ grid-template-columns:minmax(0,15ch) minmax(0,1fr); } }
.case-body .case-sec h2{ font-size:clamp(1.05rem,1.5vw,1.2rem); margin:0; color:var(--goud-deep);
  font-family:var(--mono); letter-spacing:.04em; }
.case-body .case-sec p{ margin:0; color:var(--ink); font-size:clamp(1rem,1.25vw,1.12rem);
  line-height:1.72; max-width:64ch; }

.case-palette{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.case-palette .sw{ display:flex; flex-direction:column; gap:.35rem; min-width:112px; }
.case-palette .sw span{ height:56px; border-radius:12px; border:1px solid var(--line-soft); }
.case-palette .sw b{ font-size:.82rem; }
.case-palette .sw code{ font-family:var(--mono); font-size:.7rem; color:var(--muted); }

/* Techniek — leesbare tekst, geen beeld, zodat het meetelt voor zoekmachines. */
.case-stack{ margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid var(--line-soft); }
.case-stack h2{ font-family:var(--mono); font-size:1rem; letter-spacing:.04em;
  color:var(--goud-deep); margin:0 0 .9rem; }
.case-stack ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.case-stack li{ font-family:var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.03em;
  padding:.42rem .8rem; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink); }
.case-stack li:first-child{ border-color:var(--goud); color:var(--goud-deep);
  background:color-mix(in srgb,var(--goud) 10%,transparent); }

/* ---- beeldblokken ---------------------------------------------------- */
.case-gallery .wrap{ display:grid; gap:clamp(1.2rem,3vw,2.2rem); }
@media (min-width:860px){ .case-gallery .wrap{ grid-template-columns:1fr 1fr; } }
.case-fig{ margin:0; }
.case-fig.wide{ grid-column:1/-1; }
.case-fig img{ width:100%; height:auto; display:block; border-radius:var(--r-lg);
  border:1px solid var(--line-soft); background:var(--bg-2); }
.case-fig figcaption{ margin-top:.7rem; font-size:.86rem; color:var(--muted);
  line-height:1.6; max-width:60ch; }

/* ---- resultaat ------------------------------------------------------- */
.case-result ul{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:.7rem; }
@media (min-width:820px){ .case-result ul{ grid-template-columns:1fr 1fr; gap:.7rem 2.4rem; } }
.case-result li{ position:relative; padding-left:1.7rem; font-size:1rem; line-height:1.65; }
.case-result li::before{ content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%; background:var(--goud); }

/* ---- volgende case + cta --------------------------------------------- */
.case-next .wrap{ display:grid; gap:1.4rem; }
@media (min-width:820px){ .case-next .wrap{ grid-template-columns:1.3fr .9fr; align-items:stretch; } }
.next-card{ display:flex; flex-direction:column; gap:.45rem; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.6vw,1.9rem); transition:transform .18s, border-color .18s, box-shadow .18s; }
.next-card:hover{ transform:translateY(-3px); border-color:var(--goud);
  box-shadow:0 10px 30px rgba(33,28,21,.09); }
.next-card strong{ font-size:clamp(1.3rem,2.4vw,1.8rem); }
.next-card .t{ color:var(--muted); max-width:44ch; }
.next-card .open{ margin-top:.6rem; font-weight:700; font-size:.92rem; color:var(--goud-deep); }
.next-card .arw{ display:inline-block; transition:transform .18s; }
.next-card:hover .arw{ transform:translateX(4px); }

.case-cta{ display:flex; flex-direction:column; justify-content:center; gap:.8rem;
  border:1px dashed var(--line); border-radius:var(--r-lg); padding:clamp(1.3rem,2.6vw,1.9rem); }
.case-cta p{ margin:0; font-size:1.15rem; font-weight:600; }

/* ---- overzichtspagina ------------------------------------------------ */
.case-index{ display:grid; gap:clamp(1.1rem,2.4vw,1.8rem); margin-top:2rem; }
@media (min-width:760px){ .case-index{ grid-template-columns:1fr 1fr; } }
.case-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .18s, border-color .18s, box-shadow .18s; }
.case-card:hover{ transform:translateY(-3px); border-color:var(--goud);
  box-shadow:0 10px 30px rgba(33,28,21,.09); }
/* Screenshot binnen een rand: tegen de kaarthoek aan sneed de ronding de
   header van de site eraf. 16/10 = de verhouding waarin geschoten wordt,
   dus er valt verticaal ook niets meer weg. */
.case-card .ct{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background:var(--bg); padding:.6rem .6rem .9rem; }
.case-card .ct img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block; border-radius:10px; border:1px solid var(--line-soft); }
/* Klantnaam over de beeldhoek: fluistert tot je de kaart aanraakt, dan licht hij op.
   De verloop erachter houdt hem leesbaar, ook op een licht screenshot. */
.case-card .ct-title{ position:absolute; left:1.25rem; right:1.25rem; bottom:1.5rem;
  font-family:var(--display); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(1rem,1.9vw,1.45rem); line-height:1.15; color:#fff; opacity:.38;
  text-shadow:0 2px 12px rgba(0,0,0,.75); pointer-events:none;
  transition:opacity .28s ease, transform .28s ease; }
.case-card:hover .ct-title,
.case-card:focus-visible .ct-title{ opacity:1; transform:translateY(-3px); }
@media (prefers-reduced-motion:reduce){ .case-card .ct-title{ transition:none; } }
.case-card .cb{ display:flex; flex-direction:column; gap:.4rem; padding:1.2rem 1.35rem 1.4rem; flex:1; }
.case-card strong{ font-size:1.35rem; }
.case-card .t{ color:var(--muted); font-size:.94rem; }
.case-card .open{ margin-top:auto; padding-top:.7rem; font-weight:700; font-size:.9rem; color:var(--goud-deep); }
.case-card .arw{ display:inline-block; transition:transform .18s; }
.case-card:hover .arw{ transform:translateX(4px); }