/* Persberichten — persoverzicht, voor de pers */

.pers-feiten{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.pers-feiten b{color:var(--tekst);font-variant-numeric:tabular-nums}
.pers-blok{padding-top:clamp(30px,5vw,70px)}
.pers-blok .kop{max-width:18ch}

/* ── 01 persoverzicht ── */
.pb-lijst{margin-top:clamp(34px,5vw,60px);border-top:1px solid var(--glas-rand)}
.pb{border-bottom:1px solid var(--glas-rand);transition:background .4s}
.pb[open]{background:linear-gradient(180deg,rgba(143,107,255,.06),transparent 70%)}
.pb summary{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr) 28px;gap:8px 28px;align-items:center;
  padding:26px 6px;cursor:pointer;list-style:none;border-radius:10px}
.pb summary::-webkit-details-marker{display:none}
.pb-meta{display:grid;gap:5px;min-width:0}
.pb-datum{font:500 .8rem/1.4 var(--mono);color:var(--tekst-zacht);font-variant-numeric:tabular-nums}
.pb-kop{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--tekst);text-wrap:balance;transition:color .3s}
.pb summary:hover .pb-kop{color:var(--lila)}
.pb-plus{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid var(--glas-rand);justify-self:end;transition:border-color .3s,transform .5s var(--zacht),background .3s}
.pb-plus::before,.pb-plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--tekst);border-radius:2px;transition:transform .5s var(--zacht),background .3s}
.pb-plus::after{transform:rotate(90deg)}
.pb summary:hover .pb-plus{border-color:rgba(143,107,255,.6)}
.pb[open] .pb-plus{border-color:rgba(255,122,26,.5);background:rgba(255,122,26,.08);transform:rotate(180deg)}
.pb[open] .pb-plus::before,.pb[open] .pb-plus::after{background:var(--oranje)}
.pb[open] .pb-plus::after{transform:rotate(0deg)}

.pb-tekst{padding:0 6px 32px;margin-left:calc(210px + 28px);max-width:68ch;animation:pbOpen .6s var(--zacht)}
@keyframes pbOpen{from{opacity:0;transform:translateY(-8px);filter:blur(4px)}}
.pb-tekst p{color:var(--tekst-zacht);font-size:1.02rem;line-height:1.7}
.pb-dateline{font:500 .8rem var(--mono);letter-spacing:.04em;color:var(--tekst);margin-right:.35em;white-space:nowrap}
.pb-tekst .pb-voet{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);font-size:.86rem}
.pb-voet span{font:500 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-dof)}
.pb-voet a,.pb-kopieer{font-weight:600;color:var(--lila);transition:color .3s}
.pb-voet a::after{content:" →"}
.pb-voet a:hover,.pb-kopieer:hover{color:var(--tekst)}
.pb-kopieer{margin-left:auto;padding:0;font-size:.86rem}
.pb-kopieer.is-klaar{color:var(--oranje)}

.kit-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
/* ── 03 voor de pers ── */
.pers-slot{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:stretch}
.pers-uitnodiging{padding:clamp(28px,4.4vw,52px);gap:16px}
.pers-uitnodiging .oogje{margin-bottom:6px}
.pers-uitnodiging h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
.pers-uitnodiging h2 em{font-style:normal;color:var(--tekst-dof)}
.pers-uitnodiging p:not(.oogje){max-width:58ch;font-size:1.02rem}
.pers-over{padding:clamp(24px,3.4vw,36px);gap:14px}
.pers-over p:not(.label){font-size:1rem;color:var(--tekst)}
.pers-over .pers-over-noot{font-size:.84rem;color:var(--tekst-dof)}
.pers-over .verder{margin-top:auto;padding-top:10px}

@media (max-width:1000px){
  .kleuren{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px){
  .kit,.pers-slot{grid-template-columns:1fr}
  .pb summary{grid-template-columns:minmax(0,1fr) 28px;padding:20px 2px}
  .pb-meta{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
  .pb-tekst{margin-left:0;padding:0 2px 26px}
  .pb-dateline{white-space:normal}
  .pb-kopieer{margin-left:0}
}
@media (max-width:560px){
  .kleuren{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit-balk{padding:14px}
  .kit-knoppen .knop{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  .pb-tekst,.kit-logo.is-wissel{animation:none}
  .kleur,.kleur:hover{transform:none}
}