/* /privacy/ (fase 7.0). Bovenop kbartikel.css, de leeslaag van het
   kennisbankartikel: hero, kruimel, inhoudsopgave, leeskolom. Hier alleen wat de
   privacyverklaring eigen heeft, uit ux-onderzoek/poort-privacy.md: de twee
   deuren site en app (Plausible, "two types of data") en het blok wie
   verantwoordelijk is, als eerste in de tekst (Plausible, "data controller"). */

/* ---------- de twee deuren ---------- */

.zpr-hero .zka-hero__in{grid-template-columns:minmax(0,1fr)}
.zpr-deuren{
  justify-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-blok-m);
  max-width:56rem;margin:var(--ruimte-blok-s) 0 0;padding:0;list-style:none;
}
/* De standaardkaart uit de stijlgids: glas-vlak, glas-rand, radius-kaart, schaduw-glas. */
.zpr-deur{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--ruimte-blok-s);
  padding:var(--ruimte-blok-l);border-radius:var(--radius-kaart);
  background:var(--kleur-glas-vlak);border:1px solid var(--kleur-glas-rand);box-shadow:var(--schaduw-glas);
}
body.zh .zpr-deur__kop{font-size:var(--type-maat-kaartkop);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);margin:0;max-width:none}
.zpr-deur p{margin:0;color:var(--kleur-tekst-2);line-height:var(--type-regel-tekst)}
.zpr-deur .knop{margin-top:auto;max-width:100%;white-space:normal;text-align:left;padding-block:.55em}
/* De deur waar je staat: geen link, wel een stip die zegt dat je hier bent. */
.zpr-deur__hier{
  display:inline-flex;align-items:center;gap:.5em;margin-top:auto;min-height:var(--ruimte-knop);
  color:var(--kleur-tekst);font-size:var(--type-maat-klein);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
}
.zpr-deur__hier::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kleur-tekst)}

/* ---------- wie verantwoordelijk is ---------- */

/* Geen kaart: de lijn links van de callout in de leeslaag, en rijen zoals een
   feitenlijst. */
.zpr-wie{
  max-width:var(--ruimte-meet);padding-left:var(--ruimte-blok-m);border-left:var(--ruimte-focus-gloed) solid var(--kleur-tekst-3);
}
body.zh .zpr-wie h2{
  font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-kop);
  max-width:none;margin:0 0 var(--ruimte-blok-s);scroll-margin-top:var(--zka-boven);
}
.zpr-wie__lijst{margin:0}
.zpr-wie__lijst > div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--ruimte-blok-s);padding-block:calc(var(--ruimte-blok-s) / 2);border-top:1px solid var(--kleur-rand-zacht)}
.zpr-wie dt{color:var(--kleur-tekst-2);line-height:var(--type-regel-tekst)}
.zpr-wie dd{margin:0;line-height:var(--type-regel-tekst)}
.zpr-wie a{color:var(--kleur-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.zpr-wie 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){
  .zpr-wie a:hover{text-decoration-thickness:2px}
}

/* ---------- smal ---------- */

@media (max-width:700px){
  .zpr-deuren{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .zpr-wie__lijst > div{grid-template-columns:1fr;gap:2px}
}