/* ==========================================================================
   SmartPresent · De presentaties (SP-005): kijkomgeving
   Podium = size-container ("podium"). De ruimte (SVG, 1600x1000) schaalt op de
   hoogte (object-fit: cover, onderaan verankerd) zolang het podium niet breder is
   dan 16:10, dus montagepunten in cqh blijven op de juiste plek:
     wand  : midden op 37cqh
     balie : onderkant op 38cqh (bovenkant balie, y=620)
     vloer : onderkant op 20cqh (vloerlijn, y=780)
   Apparaatbreedte in cqh (verhouding t.o.v. de ruimte), begrensd door cqw.
   ========================================================================== */

/* ---------- hero ---------- */
.pres-hero .lead{max-width:40em}

/* ---------- kijkomgeving ---------- */
.kijk{border-top:1px solid var(--c-line)}
.kijk__kop{max-width:46rem;margin-bottom:clamp(28px,4vw,48px)}
.kijk__kop .lead{margin-top:14px}
.kijk__grid{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);align-items:start}

.podium{
  position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  background:#121317;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 40px 80px -40px rgba(0,0,0,.8);
  container-type:size;container-name:podium;
  view-transition-name:kijk-podium;
}
.podium__ruimte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;user-select:none}
.podium__device{position:absolute;left:50%;z-index:2;margin:0;--b:80cqh;width:min(var(--b),92cqw)}
/* montage */
.podium[data-montage="wand"] .podium__device{top:37cqh;transform:translate(-50%,-50%)}
.podium[data-montage="balie"] .podium__device{bottom:38cqh;transform:translateX(-50%)}
.podium[data-montage="vloer"] .podium__device{bottom:20cqh;transform:translateX(-50%)}
.podium[data-montage="vloer"] .podium__device::before{content:"";position:absolute;left:8%;right:8%;bottom:-1.2cqh;height:2.4cqh;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
/* groottes per apparaat */
.podium__device.device--tv{--b:80cqh}
.podium__device.device--balie{--b:40cqh}
.podium__device.device--staand{--b:28cqh}
.podium[data-montage="vloer"] .podium__device.device--staand{--b:34cqh}
.podium__device.device--staand.device--compact{--b:17cqh}
.podium[data-montage="balie"] .podium__device.device--staand.device--compact{--b:15cqh}
.podium__device.device--spiegel-groot{--b:28cqh}
.podium__device.device--spiegel-klein{--b:30cqh}
.podium__tag{z-index:3}

.kijk__onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px}
.kijk__status{font-size:.9rem;color:var(--c-soft);min-height:1.5em;flex:1 1 16rem}

/* ---------- filters (native radio's als chips) ---------- */
.kijk__filters{display:grid;gap:20px}
.kijk__uitleg{margin-top:8px;font-size:.84rem;color:var(--c-muted)}

/* ---------- voorbeelden ---------- */
/* binnen .kijk__grid, zodat het sticky podium op mobiel ook boven de voorbeelden blijft staan */
.kijk__voorbeelden{grid-column:1 / -1;margin-top:clamp(8px,2vw,16px)}
.kijk__voorbeelden-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:14px}
.voorbeelden{list-style:none;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.kijk__lijst{columns:2 18rem;column-gap:32px;color:var(--c-soft);padding-left:1.1em}
.kijk__lijst li{margin-bottom:6px}
.kijk__meer{margin-top:22px;font-size:.92rem;color:var(--c-soft)}

html:not(.js) .kijk__grid,html:not(.js) .echt__grid{grid-template-columns:minmax(0,1fr)}

/* ---------- wat heeft u nodig ---------- */
.nodig{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:clamp(28px,4vw,48px);list-style:none}
.nodig li{border-top:2px solid var(--c-ink);padding-top:18px}
.nodig__nr{font-family:var(--f-display);font-size:2.2rem;line-height:1;color:var(--c-accent-text)}
.nodig h3{font-family:var(--f-label);font-weight:800;font-size:1.15rem;margin:10px 0 8px}
.nodig p{color:var(--c-soft)}
.nodig a{display:inline-block;margin-top:10px}

/* ---------- overgang (View Transitions): alleen het podium vervloeit ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(kijk-podium){animation-duration:.45s;animation-timing-function:var(--ease-soft)}

/* ---------- mobiel: podium blijft in beeld tijdens filteren ---------- */
@media (max-width:899px){
  /* minmax(0,1fr): anders rekt de (nowrap) scroll-rij met chips de kolom op tot ver buiten beeld */
  .kijk__grid{grid-template-columns:minmax(0,1fr)}
  .kijk__podium{position:sticky;top:calc(var(--header-h) + 6px);z-index:5;background:var(--c-bg);padding-bottom:8px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  /* breedte max. 16:10 van de hoogte: anders schaalt de ruimte op de breedte en kloppen de montagepunten (cqh) niet */
  .podium{--podium-h:min(44svh,105vw);aspect-ratio:auto;height:var(--podium-h);width:min(100%,calc(var(--podium-h) * 1.6));margin-inline:auto}
  .kijk__onder{margin-top:8px}
  .kijk__status{font-size:.82rem}
  .chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-block:7px;margin-block:-7px;scroll-padding-inline:var(--pad)}
  .chips--scroll::-webkit-scrollbar{display:none}
  .voorbeelden{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(200px,70%);overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-block:7px;margin-block:-7px;scroll-padding-inline:var(--pad)}
  .voorbeelden::-webkit-scrollbar{display:none}
}
@media (max-width:899px) and (max-height:560px){
  .kijk__podium{position:static}
  .podium{--podium-h:72svh}
}

/* ==========================================================================
   SP-009: echte voorbeelden, "Eén verhaal" en rekenvoorbeeld
   ========================================================================== */

/* ---------- echte voorbeelden: kijker ---------- */
.echt{border-top:1px solid var(--c-line)}
.echt__grid{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);align-items:start}
.echt__kijker{display:grid;justify-items:center;gap:12px}
.echt__device.device--tv{width:100%}
/* staande zuil: hoogte begrensd, zodat het scherm in beeld past */
.echt__device.device--staand{width:min(100%,calc(68svh * 9 / 16),420px)}
.echt__kijker .kijk__status{justify-self:stretch}

/* ---------- een verhaal: demonstratie ---------- */
.verhaal__demo{position:relative;border-radius:14px;padding:clamp(48px,6vw,72px) clamp(16px,3vw,40px) clamp(20px,3vw,32px)}
.verhaal__tag{position:absolute;top:clamp(14px,2vw,22px);left:clamp(16px,3vw,40px)}
.verhaal__schermen{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,.8fr) minmax(0,1.35fr) minmax(0,.7fr);gap:clamp(12px,2.4vw,36px);align-items:end}
.verhaal__naam{margin-top:8px;text-align:center;font-family:var(--f-label);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.verhaal__bediening{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:clamp(20px,3vw,32px);padding-top:clamp(16px,2vw,24px);border-top:1px solid var(--c-line)}
.verhaal__vraag{flex:1 1 100%;font-size:.92rem;color:var(--c-soft)}
.verhaal__knoppen{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto}
.verhaal__knop{width:auto;min-height:44px}
/* boodschap verschijnt kort na elkaar op de vier schermen */
@keyframes verhaal-in{from{opacity:0;transform:translateY(6%)}to{opacity:1;transform:none}}
.verhaal__schermen .scene.is-nieuw .scene__slide{animation:verhaal-in .6s var(--ease-out) both}
.verhaal__scherm:nth-child(2) .scene.is-nieuw .scene__slide{animation-delay:.12s}
.verhaal__scherm:nth-child(3) .scene.is-nieuw .scene__slide{animation-delay:.24s}
.verhaal__scherm:nth-child(4) .scene.is-nieuw .scene__slide{animation-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .verhaal__schermen .scene.is-nieuw .scene__slide{animation:none}
}

/* ---------- rekenvoorbeeld ---------- */
.reken{margin-top:clamp(40px,6vw,72px);max-width:62rem}
.reken__titel{font-family:var(--f-label);font-weight:800;font-size:clamp(1.15rem,1.6vw,1.4rem)}
.reken__intro{margin-top:8px;color:var(--c-soft);max-width:44rem}
.reken__lijst{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,32px);margin-top:clamp(20px,3vw,28px)}
.reken__kol{border-top:2px solid var(--c-ink);padding-top:14px}
.reken__aantal{font-family:var(--f-label);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.reken__balk{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;height:14px;margin:12px 0}
.reken__balk span{background:var(--red-vlak);border-radius:2px}
.reken__bedrag{font-size:1rem;color:var(--c-soft)}
.reken__bedrag span{font-family:var(--f-display);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--c-ink);margin-left:.15em}
.reken__kol:first-child .reken__bedrag span{margin-left:0}
.reken__disclaimer{margin-top:16px;font-size:.86rem;color:var(--c-muted);max-width:44rem}

@media (max-width:899px){
  .echt__grid{grid-template-columns:minmax(0,1fr)}
  .verhaal__schermen{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,.7fr)}
  .verhaal__scherm.device--tv{grid-column:1 / -1;width:min(100%,520px);justify-self:center}
}
@media (max-width:560px){
  .reken__lijst{grid-template-columns:minmax(0,1fr)}
}