/* /blog/ en /blog/onderwerp/<term>/ (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-blog.md: de datumkolom die blijft staan van Linear
   changelog, de onderwerpen als zijbalk en smal als pillen van Buttondown, en
   per stuk alleen de titel (K44). */

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

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

.zbl-hero{position:relative;isolation:isolate;padding-block:var(--ruimte-sectie) calc(var(--ruimte-sectie) * 1.2)}
.zbl-hero .zh-vlekken{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.zbl-hero__in{display:grid;gap:var(--ruimte-blok-m);justify-items:start}
body.zh .zbl-hero__titel{font-size:var(--type-maat-titel);line-height:var(--type-regel-kop);max-width:18ch;text-wrap:balance}
.zbl-hero .zh-inleiding{max-width:var(--ruimte-meet)}
.zbl-terug{display:inline-flex;align-items:center;gap:calc(var(--ruimte-blok-s) / 2);min-height:var(--ruimte-tikdoel);color:var(--kleur-tekst-2);text-decoration:none;transition:color var(--motion-duur-hover) var(--motion-curve-uit)}
.zbl-terug:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand)}
@media (hover:hover) and (pointer:fine){.zbl-terug:hover{color:var(--kleur-tekst)}}

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

.zbl-lijst{--zbl-kop:calc(var(--ruimte-knop) + var(--ruimte-blok-l) + 1px)}
.zbl-lijst__in{display:grid;gap:calc(var(--ruimte-blok-l) * 2);align-items:start}

/* De onderwerpen: echte links naar hun archief. Smal een rij pillen die
   zijwaarts scrolt, breed een zijbalk die meeloopt. Het actieve onderwerp is
   het actieve item uit de stijlgids: de goudwas. */
.zbl-onderwerpen{display:grid;gap:var(--ruimte-blok-s);min-width:0}
.zbl-onderwerpen__lijst{display:flex;gap:calc(var(--ruimte-blok-s) / 2);margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.zbl-onderwerpen__lijst::-webkit-scrollbar{display:none}
.zbl-onderwerpen__lijst li{flex:none}
.zbl-onderwerp{
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--ruimte-blok-s);
  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);
}
.zbl-onderwerp__aantal{color:var(--kleur-tekst-2);font-variant-numeric:tabular-nums}
.zbl-onderwerp[aria-current="page"]{background:var(--kleur-accent-goud-was);border-color:var(--kleur-glas-ring-hover)}
.zbl-onderwerp: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){
  .zbl-onderwerp:hover{background:var(--kleur-vlak);border-color:var(--kleur-glas-ring-hover)}
  .zbl-onderwerp[aria-current="page"]:hover{background:var(--kleur-accent-goud-was);border-color:var(--kleur-tekst-2)}
}

/* ---------- de tijdlijn ---------- */

.zbl-stroom{min-width:0}
.zbl-tijdlijn{display:grid;gap:calc(var(--ruimte-blok-l) * 2);margin:0;padding:0;list-style:none}
.zbl-maand{display:grid;gap:var(--ruimte-blok-s)}
body.zh .zh-sectie .zbl-maand__kop{max-width:none;font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);color:var(--kleur-tekst-2)}

/* De stukken hangen aan een lijn, elk met een stip: de tijdlijn. */
.zbl-stukken{
  --zbl-stip:calc(var(--ruimte-blok-s) / 2);
  margin:0;padding:0 0 0 var(--ruimte-blok-l);list-style:none;border-left:1px solid var(--kleur-rand);
}
.zbl-stuk{position:relative}
.zbl-stuk::before{
  content:"";position:absolute;left:calc(var(--ruimte-blok-l) * -1 - var(--zbl-stip) / 2 - 0.5px);top:calc(var(--ruimte-blok-m) + var(--zbl-stip) / 2);
  width:var(--zbl-stip);height:var(--zbl-stip);border-radius:var(--radius-pil);
  background:var(--kleur-grond);border:1px solid var(--kleur-tekst-2);
  transition:background-color var(--motion-duur-hover) var(--motion-curve-uit),border-color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zbl-stuk__link{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--ruimte-blok-m);row-gap:calc(var(--ruimte-blok-s) / 4);
  min-height:var(--ruimte-tikdoel);padding-block:var(--ruimte-blok-m);
  color:var(--kleur-tekst);text-decoration:none;
}
.zbl-stuk__meta{grid-column:1;grid-row:1;transition:translate var(--motion-duur-kaart) var(--motion-curve-uit);color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui);font-variant-numeric:tabular-nums}
.zbl-stuk__titel{
  grid-column:1;grid-row:2;font-size:var(--type-maat-inleiding);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);
}
.zbl-stuk__pijl{grid-column:2;grid-row:1 / span 2;color:var(--kleur-link);font-weight:var(--type-gewicht-kop);transition:transform var(--motion-duur-kaart) var(--motion-curve-uit)}
.zbl-stuk__link: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){
  .zbl-stuk:hover::before{background:var(--kleur-link);border-color:var(--kleur-link)}
  .zbl-stuk__link:hover .zbl-stuk__titel,.zbl-stuk__link:hover .zbl-stuk__meta{translate:calc(var(--motion-verplaatsing-kaart) * 2) 0}
  .zbl-stuk__link:hover .zbl-stuk__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
}
/* Met het toetsenbord dezelfde beweging als met de muis. */
.zbl-stuk:has(.zbl-stuk__link:focus-visible)::before{background:var(--kleur-link);border-color:var(--kleur-link)}
.zbl-stuk__link:focus-visible .zbl-stuk__titel,.zbl-stuk__link:focus-visible .zbl-stuk__meta{translate:calc(var(--motion-verplaatsing-kaart) * 2) 0}
.zbl-stuk__link:focus-visible .zbl-stuk__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}

/* Bladeren: nieuwer, de nummers, ouder. */
.zbl-bladeren{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--ruimte-blok-s) / 2);margin-top:calc(var(--ruimte-blok-l) * 2)}
.zbl-bladeren a,.zbl-bladeren .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:var(--ruimte-tikdoel);min-height:var(--ruimte-tikdoel);padding-inline:var(--ruimte-blok-s);
  border-radius:var(--radius-pil);color:var(--kleur-tekst);font-size:var(--type-maat-knop);font-weight:var(--type-gewicht-label);text-decoration:none;font-variant-numeric:tabular-nums;
}
.zbl-bladeren a{border:1px solid var(--kleur-glas-rand);background:var(--kleur-glas-vol);transition:background-color var(--motion-duur-hover) var(--motion-curve-uit),border-color var(--motion-duur-hover) var(--motion-curve-uit)}
.zbl-bladeren .page-numbers.current{background:var(--kleur-accent-goud-was)}
.zbl-bladeren .page-numbers.dots{min-width:0;padding-inline:0;color:var(--kleur-tekst-2)}
.zbl-bladeren a:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand)}
@media (hover:hover) and (pointer:fine){.zbl-bladeren a:hover{background:var(--kleur-vlak);border-color:var(--kleur-glas-ring-hover)}}

/* De lege stand: geen kaart, een kop, een zin en de thema's van de kennisbank. */
.zbl-leeg{display:grid;gap:var(--ruimte-blok-m);justify-items:start;max-width:var(--ruimte-meet)}
body.zh .zbl-leeg h2{font-size:var(--type-maat-kop-2);line-height:var(--type-regel-kop)}
/* Label en lijst in één groep zonder gap, zodat het label bij de lijst hoort en niet bij de alinea erboven
   (een losse margin op het label verliest van body.zh h3 in herbouw.css). */
.zbl-leeg__groep{margin-top:var(--ruimte-blok-s)}
.zbl-leeg__themas{display:grid;gap:var(--ruimte-blok-s);margin:0;padding:0;list-style:none}

/* ---------- breed ---------- */

@media (min-width:1024px){
  .zbl-lijst__in{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:calc(var(--ruimte-goot) * 1.5)}
  /* Zonder onderwerpen (nul stukken, de stand op productie) krijgt de stroom de hele breedte. */
  .zbl-lijst__in:not(:has(> .zbl-onderwerpen)){grid-template-columns:minmax(0,1fr)}
  .zbl-onderwerpen{position:sticky;top:calc(var(--zbl-kop) + var(--ruimte-blok-l) * 2)}
  .zbl-onderwerpen__lijst{flex-direction:column;overflow:visible}
  .zbl-onderwerp{display:flex;width:100%}
  .zbl-maand{grid-template-columns:minmax(0,2fr) minmax(0,7fr);gap:var(--ruimte-goot)}
  .zbl-maand__kop{position:sticky;top:calc(var(--zbl-kop) + var(--ruimte-blok-l) * 2);align-self:start;padding-block:var(--ruimte-blok-m)}
}

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

.zbl-slot{padding-block:calc(var(--ruimte-sectie) * 1.5)}
.zbl-slot__in{display:grid;gap:var(--ruimte-blok-l);justify-items:start}
@media (min-width:861px){
  .zbl-slot__in{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}
body.zh .zbl-slot h2{font-size:var(--type-maat-kop-2);line-height:var(--type-regel-kop);max-width:20ch;text-wrap:balance}

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

@media (prefers-reduced-motion:reduce){
  .zbl-onderwerp,.zbl-stuk::before,.zbl-stuk__meta,.zbl-stuk__titel,.zbl-stuk__pijl,.zbl-terug,.zbl-bladeren a{transition:none}
  .zbl-stuk__link .zbl-stuk__titel,.zbl-stuk__link .zbl-stuk__meta{translate:none !important}
  .zbl-stuk__link .zbl-stuk__pijl{transform:none !important}
}