/* /kennisbank/ (fase 7.0). Bovenop tokens.css, herbouw.css en pagina.css.
   Waarden uit tokens.css, regels uit merk/STYLEGUIDE.md, de vorm uit
   ux-onderzoek/poort-kennisbank.md: de rijen met alleen een titel van Linear
   Method (K44), de categorielijst die meeloopt van Stripe, en als eigen zet de
   tekening van het stuk waar je op wijst. */

/* Alleen voor een schermlezer. */
.zkb-weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- hero ---------- */

.zkb-hero{position:relative;isolation:isolate;padding-block:var(--ruimte-sectie) calc(var(--ruimte-sectie) * 1.2)}
.zkb-hero .zh-vlekken{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.zkb-hero__in{display:grid;gap:calc(var(--ruimte-blok-l) * 2);align-items:end}
@media (min-width:961px){.zkb-hero__in{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.zkb-hero__tekst{display:grid;gap:var(--ruimte-blok-m);justify-items:start;min-width:0}
body.zh .zkb-hero__titel{font-size:var(--type-maat-titel);line-height:var(--type-regel-kop);max-width:26ch;text-wrap:balance}

/* De twee bestanden: een tegel met de soort, de naam, de maat en een pijl omlaag.
   De hele tegel is de downloadlink (zoals de kaart op /vergelijk/). */
.zkb-bestanden{display:grid;gap:var(--ruimte-blok-s);min-width:0}
.zkb-bestanden__lijst{display:grid;gap:var(--ruimte-blok-s);margin:0;padding:0;list-style:none}
.zkb-bestand{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--ruimte-blok-s);
  padding:var(--ruimte-blok-s) var(--ruimte-blok-m) var(--ruimte-blok-s) var(--ruimte-blok-s);
  border-radius:var(--radius-kaart);background:var(--kleur-glas-paneel);border:1px solid var(--kleur-glas-paneel-rand);
  transition:box-shadow var(--motion-duur-kaart) var(--motion-curve-uit),translate var(--motion-duur-kaart) var(--motion-curve-uit);
}
/* De tegel is ook een .rv, en die regel in pagina.css wint: hier staan ze samen. */
html.js .zkb-bestand.rv{
  transition:opacity var(--motion-duur-lade) var(--motion-curve-uit),transform var(--motion-duur-lade) var(--motion-curve-uit),
    box-shadow var(--motion-duur-kaart) var(--motion-curve-uit),translate var(--motion-duur-kaart) var(--motion-curve-uit);
}
.zkb-bestand__soort{
  display:grid;place-items:center;width:var(--ruimte-merktegel);height:var(--ruimte-merktegel);border-radius:var(--radius-tegel);
  background:var(--kleur-balk);color:var(--kleur-op-balk);
  font-size:var(--type-maat-groepslabel);font-weight:var(--type-gewicht-nadruk);letter-spacing:var(--type-spatie-groepslabel);text-transform:uppercase;
}
.zkb-bestand__naam{color:var(--kleur-tekst);font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);text-decoration:none}
.zkb-bestand__naam::after{content:"";position:absolute;inset:0;border-radius:inherit}
.zkb-bestand__naam:focus-visible{outline:none}
.zkb-bestand:has(.zkb-bestand__naam:focus-visible){outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand)}
.zkb-bestand__maat{color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);font-variant-numeric:tabular-nums}
.zkb-bestand__pijl{color:var(--kleur-link);font-weight:var(--type-gewicht-kop);transition:transform var(--motion-duur-kaart) var(--motion-curve-uit)}
@media (hover:hover) and (pointer:fine){
  .zkb-bestand:hover{box-shadow:var(--schaduw-op);translate:0 calc(var(--motion-verplaatsing-kaart) * -1)}
  .zkb-bestand:hover .zkb-bestand__pijl{transform:translateY(var(--motion-verplaatsing-pijl))}
}
.zkb-bestand:active{scale:var(--motion-schaal-druk)}

/* ---------- de lijst, op het lichte vlak ---------- */

.zkb-lijst{
  --zkb-kop:calc(var(--ruimte-knop) + var(--ruimte-blok-l) + 1px);
  --zkb-balk:calc(var(--ruimte-tikdoel) + var(--ruimte-blok-s) * 2 + 1px);
  padding-top:0;
}

/* De thema's als pillen die meelopen onder de kop. De actieve pil is het
   actieve item uit de stijlgids: de goudwas, geen goud (goud is actie). */
.zkb-themas{
  position:sticky;top:var(--zkb-kop);z-index:5;
  padding-block:var(--ruimte-blok-s);
  background:color-mix(in srgb, var(--kleur-grond) 82%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--kleur-glas-paneel-rand);
}
.zkb-themas__lijst{
  display:flex;gap:calc(var(--ruimte-blok-s) / 2);margin:0;padding:0;list-style:none;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
}
.zkb-themas__lijst::-webkit-scrollbar{display:none}
.zkb-themas__lijst li{flex:none;scroll-snap-align:start}
/* Met een muis zie je geen scrollbalk: dan breekt de balk af in plaats van een
   pil half te verstoppen. kennisbank.js houdt --zkb-balk gelijk aan zijn hoogte. */
@media (hover:hover) and (pointer:fine){.zkb-themas__lijst{flex-wrap:wrap;overflow-x:visible}}
.zkb-pil{position:relative;
  display:inline-flex;align-items:center;gap:.5em;min-height:var(--ruimte-tikdoel);padding-inline:var(--ruimte-blok-s);
  border-radius:var(--radius-pil);border:1px solid var(--kleur-glas-rand);background:var(--kleur-glas-vol);
  color:var(--kleur-tekst);font-size:var(--type-maat-knop);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--motion-duur-hover) var(--motion-curve-uit),border-color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zkb-pil__aantal{color:var(--kleur-tekst-2);font-variant-numeric:tabular-nums}
.zkb-pil[aria-current="true"]{background:var(--kleur-accent-goud-was);border-color:var(--kleur-glas-ring-hover)}
.zkb-pil:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:calc(var(--ruimte-focus-afstand) * -1)}
@media (hover:hover) and (pointer:fine){
  .zkb-pil:hover{background:var(--kleur-vlak);border-color:var(--kleur-glas-ring-hover)}
  .zkb-pil[aria-current="true"]:hover{background:var(--kleur-accent-goud-was)}
}

.zkb-lijst__in{padding-top:calc(var(--ruimte-blok-l) * 2)}
.zkb-groepen{display:grid;gap:calc(var(--ruimte-sectie) * 1.2);min-width:0}
.zkb-thema{scroll-margin-top:calc(var(--zkb-kop) + var(--zkb-balk) + var(--ruimte-blok-l))}
.zkb-thema__kop{display:grid;gap:var(--ruimte-blok-s);margin-bottom:var(--ruimte-blok-l)}
body.zh .zkb-thema h2{font-size:var(--type-maat-kop-2);line-height:var(--type-regel-kop)}
.zkb-thema h2:focus{outline:none}

/* Een rij is alleen een titel (K44), met een pijl. De rijen staan tussen lijnen,
   zoals de inhoudsopgave van Linear Method; onder de muis zakken de andere
   rijen naar tekst-2 en schuift de titel een fractie op. */
.zkb-rijen{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--kleur-rand)}
.zkb-rij{border-top:1px solid var(--kleur-rand)}
.zkb-rij a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--ruimte-blok-m);
  min-height:var(--ruimte-tikdoel);padding-block:var(--ruimte-blok-s);
  color:var(--kleur-tekst);text-decoration:none;
  transition:color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zkb-rij__titel{
  font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);text-wrap:pretty;
  transition:translate var(--motion-duur-kaart) var(--motion-curve-uit);
}
.zkb-rij__pijl{color:var(--kleur-link);font-weight:var(--type-gewicht-kop);transition:transform var(--motion-duur-kaart) var(--motion-curve-uit)}
.zkb-rij a:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand);border-radius:var(--radius-tip)}
@media (hover:hover) and (pointer:fine){
  .zkb-rijen:hover .zkb-rij a{color:var(--kleur-tekst-2)}
  .zkb-rijen .zkb-rij a:hover{color:var(--kleur-tekst)}
  .zkb-rij a:hover .zkb-rij__titel{translate:calc(var(--motion-verplaatsing-kaart) * 2) 0}
  .zkb-rij a:hover .zkb-rij__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
}

/* Het eerste stuk van een thema draagt zijn tekening; smal staat die in de rij,
   breed in de plaat ernaast. */
.zkb-rij__beeld{grid-column:1 / -1;display:block;max-width:var(--ruimte-meet);overflow:hidden;border-radius:var(--radius-tegel);border:1px solid var(--kleur-glas-paneel-rand)}
.zkb-rij__beeld img{display:block;width:100%;height:auto;aspect-ratio:1024 / 572;object-fit:cover}

/* ---------- de plaat: de tekening van het stuk waar je op wijst ---------- */

.zkb-plaat{display:none}
@media (min-width:1024px){
  .zkb-lijst__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:calc(var(--ruimte-goot) * 1.5);align-items:start}
  .zkb-rij__beeld{display:none}
  .zkb-plaat{display:block;position:sticky;top:calc(var(--zkb-kop) + var(--zkb-balk) + var(--ruimte-blok-l) * 2)}
  .zkb-plaat__vlak{
    display:block;overflow:hidden;color:var(--kleur-tekst);text-decoration:none;
    border-radius:var(--radius-paneel);border:1px solid var(--kleur-glas-paneel-rand);background:var(--kleur-glas-paneel);
    transition:box-shadow var(--motion-duur-kaart) var(--motion-curve-uit);
  }
  .zkb-plaat__beeld{display:block;position:relative;aspect-ratio:1024 / 572;overflow:hidden}
  .zkb-plaat__onder{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--ruimte-blok-m);padding:var(--ruimte-blok-m) var(--ruimte-blok-l)}
  /* Twee regels vast, zodat de plaat niet op en neer springt bij een wissel. */
  .zkb-plaat__titel{font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);min-height:calc(var(--type-regel-ui) * 2em);text-wrap:pretty}
  .zkb-plaat__pijl{color:var(--kleur-link);font-weight:var(--type-gewicht-kop);transition:transform var(--motion-duur-kaart) var(--motion-curve-uit)}
  .zkb-plaat__img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:calc(2 - var(--motion-schaal-druk));
    transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit),scale var(--motion-duur-lade) var(--motion-curve-uit);
  }
  .zkb-plaat__img.is-aan{opacity:1;scale:1}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .zkb-plaat__vlak:hover{box-shadow:var(--schaduw-op)}
  .zkb-plaat__vlak:hover .zkb-plaat__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
}

/* ---------- slot ---------- */

.zkb-slot{padding-block:calc(var(--ruimte-sectie) * 1.5)}

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

@media (max-width:600px){
  .zkb-bestand{grid-template-columns:auto minmax(0,1fr) auto}
  .zkb-bestand__maat{display:none}
}

/* ---------- minder beweging ---------- */

@media (prefers-reduced-motion:reduce){
  html.js .zkb-bestand.rv,.zkb-bestand,.zkb-bestand__pijl,.zkb-pil,.zkb-rij a,.zkb-rij__titel,.zkb-rij__pijl,.zkb-plaat__img,.zkb-plaat__vlak,.zkb-plaat__pijl{transition:none}
  .zkb-plaat__img{scale:1}
}