/* /prijzen/ (templates/prijzen.php): de hero met de proef op een meetlat, de
   kaart op het lichte vlak, de stations van na de proef, twee regels, de vragen
   met een inhoudsopgave die meeloopt, en het slot. Waarden uit tokens.css, regels
   uit merk/STYLEGUIDE.md, de poort in ux-onderzoek/poort-prijzen.md. Gedeelde
   bouwstenen in pagina.css, het gedrag in assets/js/prijzen.js. */

/* ---------- 1. hero: eerst werken, dan kiezen ---------- */

.zp-hero{
  position:relative;isolation:isolate;
  /* Net niet het hele scherm: de bovenrand van het lichte vlak komt in beeld,
     de goudknop op de kaart blijft eronder (een goudknop per scherm, STYLEGUIDE 5). */
  min-height:calc(100svh - var(--ruimte-knop) - var(--ruimte-blok-l) - 15rem);
  display:flex;align-items:center;padding-block:var(--ruimte-sectie) calc(var(--ruimte-sectie) * 1.5);
}
.zp-hero .zh-wrap{width:100%;display:grid;gap:var(--ruimte-blok-l);justify-items:start}
body.zh .zp-hero__titel{font-size:var(--type-maat-titel);max-width:14ch;line-height:var(--type-regel-kop)}

/* De proef als duimstok: vijf leden van zes dagen in kleur.actie die eenmaal
   uitvouwen, daarna loopt de lat door in kleur.rand tot de rand. */
.zp-proef{width:100%;margin-top:calc(var(--ruimte-blok-l) * 1.5)}
.zp-proef__lat{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,2.2fr);height:24px}
.zp-proef__lid,.zp-proef__daarna{
  background:
    repeating-linear-gradient(90deg, var(--lat-streep) 0 1px, transparent 1px calc(100% / 6)) left bottom / 100% 12px no-repeat,
    linear-gradient(var(--lat-streep), var(--lat-streep)) left bottom / 100% var(--lat-lijn) no-repeat;
}
.zp-proef__lid{--lat-streep:var(--kleur-actie);--lat-lijn:3px;border-left:2px solid var(--kleur-actie);transform-origin:left center}
.zp-proef__daarna{
  --lat-streep:var(--kleur-rand);--lat-lijn:1px;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent);
}
.zp-proef__labels{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,2.2fr);margin-top:.6rem;
  font-size:var(--type-maat-tekst);font-weight:var(--type-gewicht-label);color:var(--kleur-tekst-2);font-variant-numeric:tabular-nums;
}
.zp-proef__labels span:nth-child(2){grid-column:5;justify-self:end}
.zp-proef__labels span:nth-child(3){grid-column:6;padding-left:.6rem;color:var(--kleur-tekst)}
/* Uitvouwen: lid voor lid, als een duimstok die je openklapt. */
html.js .zp-proef__lid{animation:zp-vouw var(--motion-duur-vouw) var(--motion-curve-uit) both;animation-delay:calc(var(--motion-duur-menu) + var(--i) * var(--motion-duur-vouw) / 6)}
html.js .zp-proef__daarna,html.js .zp-proef__labels{animation:zh-in var(--motion-duur-lade) var(--motion-curve-uit) both;animation-delay:calc(var(--motion-duur-menu) + var(--motion-duur-vouw))}
@keyframes zp-vouw{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}

/* ---------- 2. de kaart, op het lichte vlak ---------- */

/* Het enige vlak dat van de grond loskomt, ook in het donker: data-vlak="licht"
   zet de lichte tokens en de grond van de app in licht (pagina.css, K41). */
.zp-kaart{padding-block:calc(var(--ruimte-sectie) * 1.6)}
.zp-keuze{
  display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);gap:clamp(1.75rem,4vw,4rem);
  align-items:start;margin-top:calc(var(--ruimte-blok-l) * 2);
}
.zp-prijs{
  display:grid;gap:var(--ruimte-blok-s);justify-items:start;padding:clamp(1.5rem,3vw,2.25rem);
  border-radius:var(--radius-kaart);border:1px solid var(--kleur-glas-paneel-rand);background:var(--kleur-glas-paneel);
}
.zp-prijs__bedrag{display:flex;align-items:baseline;gap:.6rem;margin-top:var(--ruimte-blok-s)}
.zp-prijs__getal{
  font-size:var(--type-maat-titel);font-weight:var(--type-gewicht-kop);line-height:1;letter-spacing:var(--type-spatie-kop);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.zp-prijs__per{font-size:var(--type-maat-inleiding);color:var(--kleur-tekst-2)}
.zp-prijs__jaar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--type-maat-tekst);font-variant-numeric:tabular-nums}
.zp-prijs__jaar b{font-weight:var(--type-gewicht-nadruk)}
.zp-pil{
  display:inline-flex;align-items:center;min-height:24px;padding:0 .7rem;border-radius:var(--radius-pil);
  background:var(--kleur-accent-mos-was);color:var(--kleur-tekst);
  font-size:var(--type-maat-groepslabel);font-weight:var(--type-gewicht-nadruk);letter-spacing:var(--type-spatie-groepslabel);text-transform:uppercase;
}
.zp-prijs__btw{font-size:var(--type-maat-klein);color:var(--kleur-tekst-2)}
.zp-prijs__lancering{font-size:var(--type-maat-tekst);line-height:var(--type-regel-tekst);color:var(--kleur-tekst-2);font-variant-numeric:tabular-nums}
.zp-prijs__lancering b{color:var(--kleur-tekst);font-weight:var(--type-gewicht-label)}
.zp-prijs .knop{margin-top:var(--ruimte-blok-s);width:100%}

/* De onderdelen: de vier vaste op een eigen rij, daaronder de negen schakelaars
   in drie bij drie. */
.zp-delen{display:grid;gap:var(--ruimte-blok-s);min-width:0}
.zp-delen__lijst{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1rem,2.5vw,2rem);
  border-top:1px solid var(--kleur-rand);
}
.zp-delen__lijst--kern{grid-template-columns:repeat(4,minmax(0,1fr))}
.zp-delen .zh-schakel{border-bottom:1px solid var(--kleur-rand)}
.zp-delen .zh-schakel:last-child{border-bottom:1px solid var(--kleur-rand)}
.zp-lid > span:first-child{transition:color var(--motion-duur-hover) var(--motion-curve-uit)}
.zp-lid.is-uit > span:first-child{color:var(--kleur-tekst-3);text-decoration:line-through;text-decoration-thickness:1px}
.zp-delen__stand{font-size:var(--type-maat-klein);color:var(--kleur-tekst-2);font-variant-numeric:tabular-nums}
.zp-delen__stand span{color:var(--kleur-tekst);font-weight:var(--type-gewicht-nadruk)}
/* Binnenkomen: de rijen vouwen een voor een open als de leden van een duimstok.
   De prijs ernaast staat stil (STYLEGUIDE 7). */
html.js .zp-delen .zp-lid{transform-origin:left center}
html.js .zp-delen:not(.is-open) .zp-lid{opacity:0;transform:scaleX(.2)}
html.js .zp-delen.is-open .zp-lid{
  animation:zp-vouw var(--motion-duur-vouw) var(--motion-curve-uit) both;animation-delay:calc(var(--n, 0) * var(--motion-duur-kaart) / 8);
}

/* ---------- 3. na de proef, en eruit ---------- */

/* Vier kreten onder elkaar, elk een regel op kopmaat, met de meetlat staand
   ernaast: wie voorbij scrolt leest vier regels en niets anders. */
.zp-route__lijst{
  position:relative;list-style:none;margin:calc(var(--ruimte-blok-l) * 2) 0 0;padding:0 0 0 calc(var(--ruimte-blok-l) * 2);
  display:grid;
}
/* De meetlat langs de vier stations. Wat je al gepasseerd hebt is goud. */
.zp-route__lat,.zp-route__vul{position:absolute;left:0;top:0;bottom:0;width:12px}
.zp-route__lat,.zp-route__vul{
  background:
    repeating-linear-gradient(180deg, var(--lat-streep) 0 1px, transparent 1px 12px) left top / 6px 100% no-repeat,
    linear-gradient(var(--lat-streep), var(--lat-streep)) left top / var(--lat-lijn) 100% no-repeat;
}
.zp-route__lat{--lat-streep:var(--kleur-rand);--lat-lijn:1px}
.zp-route__vul{
  --lat-streep:var(--kleur-actie);--lat-lijn:2px;clip-path:inset(0 0 100% 0);
  transition:clip-path var(--motion-duur-vouw) var(--motion-curve-uit);
}
.zp-route__lijst[data-bereikt="1"] .zp-route__vul{clip-path:inset(0 0 75% 0)}
.zp-route__lijst[data-bereikt="2"] .zp-route__vul{clip-path:inset(0 0 50% 0)}
.zp-route__lijst[data-bereikt="3"] .zp-route__vul{clip-path:inset(0 0 25% 0)}
.zp-route__lijst[data-bereikt="4"] .zp-route__vul{clip-path:inset(0 0 0 0)}
.zp-station{
  display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--ruimte-blok-l);align-items:baseline;
  padding-block:var(--ruimte-blok-l);border-bottom:1px solid var(--kleur-rand);
}
.zp-station:last-child{border-bottom:0}
.zp-station__zin{
  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);color:var(--kleur-tekst-2);
  transition:color var(--motion-duur-kaart) var(--motion-curve-uit);
}
/* Bereikt: de kreet krijgt de volle tekstkleur; ervoor staat hij op tekst-2,
   dat haalt op kopmaat ruim het contrast (STYLEGUIDE 1). */
html.js .zp-route__lijst .zp-station.is-bereikt .zp-station__zin,
html:not(.js) .zp-station__zin{color:var(--kleur-tekst)}

/* ---------- 4 en 5. naast je boekhouding, met een team ---------- */

/* Twee links van een regel, de zin is de link. */
.zp-naast__in{display:flex;flex-wrap:wrap;gap:var(--ruimte-blok-s) clamp(2rem,6vw,6rem);padding-block:var(--ruimte-blok-l)}
.zp-naast__regel{
  display:inline-flex;align-items:center;gap:.5rem;min-height:var(--ruimte-tikdoel);
  font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);color:var(--kleur-link);text-decoration:none;
}
.zp-naast__regel .zh-link__pijl{transition:transform var(--motion-duur-hover) var(--motion-curve-uit)}
@media (hover:hover) and (pointer:fine){
  .zp-naast__regel:hover{color:var(--kleur-tekst)}
  .zp-naast__regel:hover .zh-link__pijl{transform:translateX(4px)}
}

/* ---------- 6. de vragen, met een inhoudsopgave die meeloopt ---------- */

.zp-vragen__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.zp-vragen__kant{
  position:sticky;top:calc(var(--ruimte-knop) + var(--ruimte-blok-l) * 2);
  display:grid;gap:var(--ruimte-blok-l);
}
.zp-inhoud{display:grid;border-left:1px solid var(--kleur-rand)}
.zp-inhoud a{
  position:relative;display:flex;align-items:center;min-height:var(--ruimte-tikdoel);padding-left:1rem;
  font-weight:var(--type-gewicht-menu);color:var(--kleur-tekst-2);text-decoration:none;
  transition:color var(--motion-duur-hover) var(--motion-curve-uit);
}
/* Het onderwerp waar je nu leest krijgt een gouden streep op de lijn. */
.zp-inhoud a::before{
  content:"";position:absolute;left:-1px;top:20%;bottom:20%;width:2px;background:var(--kleur-actie);
  transform:scaleY(0);transition:transform var(--motion-duur-menu) var(--motion-curve-uit);
}
.zp-inhoud a[aria-current]{color:var(--kleur-tekst)}
.zp-inhoud a[aria-current]::before{transform:none}
.zp-groep{display:grid;scroll-margin-top:calc(var(--ruimte-knop) + var(--ruimte-blok-l) * 2)}
.zp-groep + .zp-groep{margin-top:calc(var(--ruimte-blok-l) * 2)}
.zp-groep .zh-label{padding-bottom:var(--ruimte-blok-s);border-bottom:1px solid var(--kleur-rand)}
.zp-vraag{border-bottom:1px solid var(--kleur-rand)}
.zp-vraag summary{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:calc(var(--ruimte-tikdoel) + 16px);
  padding-block:.6rem;cursor:pointer;list-style:none;
  font-size:var(--type-maat-tekst);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
}
.zp-vraag summary::-webkit-details-marker{display:none}
/* Een plus die een min wordt: de staande streep klapt weg. */
.zp-vraag summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:
    linear-gradient(var(--kleur-tekst-2), var(--kleur-tekst-2)) center / 14px 2px no-repeat,
    linear-gradient(var(--kleur-tekst-2), var(--kleur-tekst-2)) center / 2px 14px no-repeat;
  transition:background-size var(--motion-duur-menu) var(--motion-curve-uit);
}
.zp-vraag[open] summary::after{
  background:
    linear-gradient(var(--kleur-tekst), var(--kleur-tekst)) center / 14px 2px no-repeat,
    linear-gradient(var(--kleur-tekst), var(--kleur-tekst)) center / 2px 0 no-repeat;
}
.zp-vraag__antwoord p{max-width:var(--ruimte-meet);padding-bottom:var(--ruimte-blok-m);color:var(--kleur-tekst-2);line-height:var(--type-regel-tekst)}
.zp-vraag__antwoord a{color:var(--kleur-link);text-decoration:underline;text-underline-offset:3px}
/* Openen schuift het antwoord in (details met ::details-content waar de browser
   dat kent, anders gewoon open). */
@supports selector(::details-content){
  .zp-vraag::details-content{
    block-size:0;overflow:hidden;
    transition:block-size var(--motion-duur-lade) var(--motion-curve-uit),content-visibility var(--motion-duur-lade) allow-discrete;
  }
  .zp-vraag[open]::details-content{block-size:auto}
}
.zp-vragen{interpolate-size:allow-keywords}
@media (hover:hover) and (pointer:fine){
  .zp-inhoud a:hover{color:var(--kleur-link)}
  .zp-vraag summary:hover{color:var(--kleur-link)}
  .zp-vraag__antwoord a:hover{color:var(--kleur-tekst);text-decoration-thickness:2px}
}

/* ---------- 7. het slot: een mens, en de knop ---------- */

.zp-slot__in{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--ruimte-blok-l) var(--ruimte-goot);
  padding-block:var(--ruimte-blok-l);border-top:1px solid var(--kleur-rand);
}
.zp-slot__wie{display:flex;align-items:center;gap:var(--ruimte-blok-l);min-width:0;flex:1 1 32rem}
.zp-slot__wie img{width:88px;height:88px;border-radius:50%;flex:none}
body.zh .zp-slot h2{font-size:var(--type-maat-inleiding);max-width:none}
.zp-slot .zh-inleiding{font-size:var(--type-maat-tekst)}

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

@media (max-width:1023px){
  .zp-keuze{grid-template-columns:1fr}
  .zp-prijs{max-width:34rem}
  .zp-vragen__in{grid-template-columns:1fr}
  .zp-vragen__kant{position:static}
  .zp-inhoud{display:flex;flex-wrap:wrap;gap:.5rem;border-left:0}
  .zp-inhoud a{padding:0 1rem;border-radius:var(--radius-pil);background:var(--kleur-glas-vol);border:1px solid var(--kleur-glas-paneel-rand)}
  .zp-inhoud a::before{content:none}
}
@media (max-width:760px){
  .zp-hero{min-height:0}
  .zp-proef__lat,.zp-proef__labels{grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.4fr)}
  .zp-proef__labels span:nth-child(3){display:none}
  /* Smal: het label boven de kreet. */
  .zp-route__lijst{padding-left:28px}
  .zp-station{grid-template-columns:1fr;gap:var(--ruimte-blok-s)}
  .zp-delen__lijst,.zp-delen__lijst--kern{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .zp-delen__lijst:not(.zp-delen__lijst--kern){grid-template-columns:1fr}
  .zp-slot__in .knop{flex:1 1 100%}
}

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

@media (prefers-reduced-motion:reduce){
  html.js .zp-proef__lid,html.js .zp-proef__daarna,html.js .zp-proef__labels,
  html.js .zp-delen .zp-lid,html.js .zp-delen:not(.is-open) .zp-lid{animation:none;opacity:1;transform:none}
  .zp-route__vul,.zp-station__zin,.zp-naast__regel .zh-link__pijl,.zp-inhoud a,.zp-inhoud a::before,.zp-vraag summary::after,.zp-lid > span:first-child{transition:none}
  .zp-vraag::details-content{transition:none}
}