/* Home, de herbouw van fase 7.0 in de vorm van K38: de hero van variant B, de
   vier stappen van variant C, het uitzetblok van variant A. Waarden uit
   tokens.css, regels uit merk/STYLEGUIDE.md, de poort in ux-onderzoek/poort-home.md.
   De gedeelde bouwstenen (wrap, sectie, link, venster, schakelaar, binnenkomen)
   staan in pagina.css, het demovenster in het merk onderaan demo.css. Het gedrag staat in assets/js/home.js. */

/* ---------- 1. hero: displaykop, dan de demo over de volle breedte ---------- */

.zh-hero{position:relative;isolation:isolate;padding-top:var(--ruimte-sectie)}
body.zh .zh-hero__titel{font-size:var(--type-maat-display);max-width:17ch;line-height:var(--type-regel-kop)}
.zh-hero__onder{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--ruimte-goot);
  margin-top:calc(var(--ruimte-blok-l) * 1.5);
}
.zh-hero__onder .zh-inleiding{min-width:0}
.zh-hero__actie{display:grid;gap:.75rem;justify-items:end;flex:none}
/* ---------- 2. naast je boekhouding ---------- */

.zh-statement{
  font-size:var(--type-maat-kop-2);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-kop);
  letter-spacing:var(--type-spatie-kop);max-width:22ch;text-wrap:balance;
}
/* De eerste zin is de kop, de rest de inleiding eronder: allebei op de schaal. */
.zh-statement span{
  display:block;margin-top:var(--ruimte-blok-m);max-width:44ch;
  font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-tekst);line-height:var(--type-regel-tekst);
  letter-spacing:normal;color:var(--kleur-tekst-2);text-wrap:pretty;
}
.zh-naast__beeld{margin-top:calc(var(--ruimte-sectie) * 1.1)}

/* ---------- 3. de maker ---------- */

.zh-maker__in{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--ruimte-blok-m) var(--ruimte-goot);
  padding-block:var(--ruimte-blok-l);border-block:1px solid var(--kleur-glas-paneel-rand);
}
.zh-maker__wie{display:flex;align-items:center;gap:var(--ruimte-blok-m);min-width:0;flex:1 1 30rem}
.zh-maker__wie img{width:72px;height:72px;border-radius:50%;flex:none}
.zh-maker__wie p{font-size:var(--type-maat-inleiding);line-height:var(--type-regel-tekst);color:var(--kleur-tekst-2);min-width:0}
.zh-maker__wie b{color:var(--kleur-tekst);font-weight:var(--type-gewicht-label)}

/* ---------- 4. uitzetten ---------- */

.zh-uitzet{position:relative;isolation:isolate}
/* Bij het uitzetblok krimpt de kaart als je iets uitzet; gecentreerd schoof de rij
   dan onder de muis weg. */
.zh-uitzet .zh-twee{align-items:start}
.zh-uitzet::before{
  content:"";position:absolute;z-index:-1;right:4vw;top:8%;width:34vw;height:34vw;border-radius:50%;
  background:var(--kleur-vlek-twee);filter:blur(80px);opacity:.8;pointer-events:none;
}
/* Geen kaart: de schakelaars staan open op het zand, zodat deze sectie zich
   onderscheidt van de app-schermen in hun venster eronder (bouwregel kaarten). */
.zh-uitzet__kaart{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start;
  border-top:1px solid var(--kleur-glas-paneel-rand);border-bottom:1px solid var(--kleur-glas-paneel-rand);
}
.zh-uitzet__menu{display:grid;align-content:start;gap:.6rem;padding-block:var(--ruimte-blok-m);padding-left:clamp(1rem,2.5vw,2rem);border-left:1px solid var(--kleur-glas-paneel-rand)}
.zh-minimenu{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--type-maat-klein)}
.zh-minimenu li{
  padding:.4rem .75rem;border-radius:var(--radius-tip);background:var(--kleur-glas-vol);
  transition:opacity var(--motion-duur-hover) var(--motion-curve-uit),transform var(--motion-duur-hover) var(--motion-curve-uit);
}
.zh-minimenu li.is-weg{opacity:0;transform:translateX(calc(-1 * var(--motion-verplaatsing-kaart) * 2))}

/* ---------- 5. van afspraak tot betaald: vastgezet paneel met de meetlat ---------- */

.build{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);
  margin-top:var(--ruimte-sectie);
}
/* Ruimte onder de laatste stap, zodat het paneel nog vaststaat als Betaald op de
   middellijn komt; zonder deze ruimte schoof het onder de kop (rondloop 21 oktober). */
.build__steps{list-style:none;margin:0;padding:0 0 24vh}
.build__step{
  min-height:72vh;display:flex;flex-direction:column;justify-content:center;gap:var(--ruimte-blok-s);
  transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit);
}
/* Een kop-3: de inleidingsmaat op het kopgewicht (STYLEGUIDE 2). */
body.zh .build__title{font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);max-width:24ch}
.build__step .zh-link{align-self:flex-start}
/* .85 en niet lager: het label haalt dan 4,82:1 in licht (fase 5, WCAG 1.4.3). */
html.js .build[data-step] .build__step{opacity:.85}
html.js .build[data-step="1"] .build__step[data-step="1"],
html.js .build[data-step="2"] .build__step[data-step="2"],
html.js .build[data-step="3"] .build__step[data-step="3"],
html.js .build[data-step="4"] .build__step[data-step="4"]{opacity:1}
.build__mobile-stage{display:none}

/* Nooit hoger dan het scherm en geen overflow hidden op het sticky element. */
.build__sticky{
  position:sticky;top:calc(var(--ruimte-knop) + var(--ruimte-blok-l) + 7vh);align-self:start;
  display:grid;gap:var(--ruimte-blok-m);margin-top:12vh;
}
.build__stage{position:relative;aspect-ratio:1440 / 900}
/* Het paneel krimpt mee met een lage viewport (scherm, meetlat en sla-over samen),
   zodat het nooit onder de onderrand schuift: gemeten op 1280 bij 643. */
.build__sticky{width:min(100%, calc((100svh - 300px) * 1.6));justify-self:end}
.zh-route__beeld{position:absolute;inset:0;opacity:0;transition:opacity var(--motion-duur-lade) var(--motion-curve-uit)}
.zh-route__beeld img{width:100%;height:100%;aspect-ratio:auto}
.build:not([data-step]) .zh-route__beeld[data-beeld="1"],
.build[data-step="1"] .zh-route__beeld[data-beeld="1"],
.build[data-step="2"] .zh-route__beeld[data-beeld="2"],
.build[data-step="3"] .zh-route__beeld[data-beeld="3"],
.build[data-step="4"] .zh-route__beeld[data-beeld="4"]{opacity:1}

/* De meetlat meet hier echt iets: hoe ver je van afspraak naar betaald bent.
   Dezelfde duimstok als onder de demo: streepjes en basislijn in kleur.rand, het
   stuk dat je al gehad hebt opengevouwen in kleur.actie, de stappen eronder klikbaar. */
.zh-meetlat{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:14px}
.zh-meetlat::before,.zh-meetlat__vul{
  content:"";position:absolute;left:0;right:0;top:0;height:10px;
  background:
    repeating-linear-gradient(90deg, var(--lat-streep) 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat,
    linear-gradient(var(--lat-streep), var(--lat-streep)) left bottom / 100% var(--lat-lijn) no-repeat;
}
.zh-meetlat::before{--lat-streep:var(--kleur-rand);--lat-lijn:1px}
.zh-meetlat__vul{
  --lat-streep:var(--kleur-actie);--lat-lijn:2px;clip-path:inset(0 75% 0 0);
  transition:clip-path var(--motion-duur-vouw) var(--motion-curve-uit);
}
.build[data-step="2"] .zh-meetlat__vul{clip-path:inset(0 50% 0 0)}
.build[data-step="3"] .zh-meetlat__vul{clip-path:inset(0 25% 0 0)}
.build[data-step="4"] .zh-meetlat__vul{clip-path:inset(0 0 0 0)}
.zh-meetlat__stap{
  min-height:var(--ruimte-tikdoel);padding:0;border:0;border-left:1px solid var(--kleur-rand);
  padding-left:.6rem;background:none;text-align:left;cursor:pointer;
  font:var(--type-gewicht-menu) var(--type-maat-klein)/var(--type-regel-ui) var(--type-familie-tekst);color:var(--kleur-tekst-2);
  transition:color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zh-meetlat__stap[aria-current]{color:var(--kleur-tekst);font-weight:var(--type-gewicht-nadruk)}
.build__skip{
  justify-self:end;display:inline-flex;align-items:center;gap:.4em;min-height:var(--ruimte-tikdoel);
  font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-label);color:var(--kleur-tekst-2);text-decoration:none;
}
.zh-sectie[tabindex="-1"]:focus{outline:none}
.build__skip span{display:inline-block;transition:transform var(--motion-duur-hover) var(--motion-curve-uit)}
@media (hover:hover) and (pointer:fine){
  .zh-meetlat__stap:hover{color:var(--kleur-link)}
  .build__skip:hover{color:var(--kleur-link)}
  .build__skip:hover span{transform:translateY(var(--motion-verplaatsing-pijl))}
}

/* Onder 1024: geen sticky, elke stap krijgt zijn eigen scherm (scroll-skelet). */
@media (max-width:1023px){
  .build{grid-template-columns:1fr;gap:0}
  .build__sticky{display:none}
  .build__steps{padding-bottom:0}
  .build__step{min-height:0;padding-block:var(--ruimte-blok-l)}
  html.js .build[data-step] .build__step{opacity:1}
  .build__mobile-stage{display:block;margin-top:var(--ruimte-blok-s)}
}

/* ---------- 6. je eigen AI ---------- */

.zh-ai .zh-venster{order:0}

/* ---------- 7. het slot ---------- */

.zh-slot .zh-wrap{display:grid;justify-items:center;text-align:center;gap:var(--ruimte-blok-l)}
body.zh .zh-slot h2{font-size:var(--type-maat-titel);max-width:14ch}
.zh-slot .zh-inleiding{margin-inline:auto}
.zh-slot .zh-knoppen{justify-content:center}

/* ---------- smaller ---------- */

@media (max-width:860px){
  .zh-hero__onder{flex-direction:column;align-items:flex-start}
  .zh-hero__actie{justify-items:start}
  .zh-uitzet__kaart{grid-template-columns:1fr}
  .zh-uitzet__menu{padding-left:0;border-left:0;padding-top:var(--ruimte-blok-m);border-top:1px solid var(--kleur-glas-paneel-rand)}
  .zh-minimenu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zh-ai .zh-venster{order:1}
}
@media (max-width:600px){
  .zh-hero__actie{width:100%}
}

/* ---------- minder beweging: alles stil, alles zichtbaar ---------- */

@media (prefers-reduced-motion:reduce){
  .build__step,.zh-route__beeld,.zh-meetlat__vul,.zh-meetlat__stap,.zh-minimenu li,.build__skip span{transition:none}
}