/* WP6 (Aether #414): publieke pagina's — blog, jurisprudentie, bekende zaken,
   statistieken. Alleen tokens uit tokens.css; hergebruikt .paneel, .chip,
   .eyebrow, .hero (site.css/detail.css). Geen JavaScript. */

/* ── lijsten en kaarten ─────────────────────────────────────────────────── */
.blog-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:22px}
.blog-kaart{display:flex;flex-direction:column;gap:8px;padding:20px;color:var(--tx-2)}
.blog-kaart-titel{margin:0;font-size:19px;line-height:1.3}
.blog-kaart-titel a{color:var(--tx-1)}
.blog-kaart-titel a:hover{color:var(--accent-2)}
.blog-meta{margin:0;font-size:12px;color:var(--tx-4)}
.blog-uittreksel{margin:0;color:var(--tx-2);font-size:.95rem}
.blog-kaart .chips{margin-top:auto;padding-top:4px}

/* bekende zaken: grote kaarten */
.bekend-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:22px}
.bekend-kaart{padding:26px}
.bekend-kaart .blog-kaart-titel{font-size:22px}
.bekend-cta{margin:6px 0 0}

/* ── enkele post ────────────────────────────────────────────────────────── */
.blog-post{max-width:820px}
.blog-post .hero{margin-bottom:8px}
.blog-inhoud{max-width:72ch;margin-top:22px;font-size:1.02rem;line-height:1.65;color:var(--tx-2)}
.blog-inhoud h2,.blog-inhoud h3{margin:30px 0 10px;line-height:1.25}
.blog-inhoud p{margin:0 0 14px}
.blog-inhoud ul,.blog-inhoud ol{margin:0 0 14px;padding-left:22px}
.blog-inhoud li{margin:4px 0}
.blog-inhoud blockquote{margin:0 0 14px;padding:10px 16px;border-left:3px solid var(--accent);color:var(--tx-3)}
.blog-inhoud code{font:85% var(--f-mono);background:var(--bg-2);border:1px solid var(--lijn);border-radius:6px;padding:1px 5px}
.blog-inhoud hr{border:0;border-top:1px solid var(--lijn);margin:24px 0}
.tabel-wrap{overflow-x:auto;margin:0 0 14px}
.blog-inhoud table{border-collapse:collapse;width:100%;font-size:.93rem}
.blog-inhoud th,.blog-inhoud td{border:1px solid var(--lijn);padding:8px 12px;text-align:left;vertical-align:top}
.blog-inhoud th{background:var(--bg-2);color:var(--tx-1);font-family:var(--f-display)}

/* FAQ */
.blog-faq{margin-top:34px}
.blog-faq h2{margin-bottom:12px}
.faq-item{margin:10px 0;padding:0;overflow:hidden}
.faq-item summary{cursor:pointer;padding:14px 18px;font:600 .95rem var(--f-display);color:var(--tx-1)}
.faq-item summary:hover{color:var(--accent-2)}
.faq-item[open] summary{border-bottom:1px solid var(--lijn)}
.faq-item p{margin:0;padding:14px 18px;color:var(--tx-2)}

/* gekoppelde uitspraken */
.blog-uitspraken{margin-top:34px}
.blog-uitspraken h2{margin-bottom:6px}

/* verwante posts */
.blog-verwant{margin-top:34px}
.blog-verwant h2{margin-bottom:12px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.blog-verwant .blog-kaart{padding:18px;text-decoration:none}
.blog-verwant .blog-kaart:hover{border-color:var(--accent)}
.blog-verwant .blog-kaart b{color:var(--tx-1);line-height:1.3}
.blog-verwant .blog-kaart:hover b{color:var(--accent-2)}

/* ── statistieken ───────────────────────────────────────────────────────── */
.stats-paneel{padding:22px;margin:18px 0}
.stats-paneel h2{margin:0 0 16px}
.staafdiagram{display:flex;flex-direction:column;gap:7px}
.staaf-rij{display:grid;grid-template-columns:64px 1fr 84px;align-items:center;gap:12px}
.staaf-label{font-size:12.5px;color:var(--tx-3);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staaf-track{display:block;height:14px;background:var(--bg-2);border-radius:999px;overflow:hidden}
.staaf-balk{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}
.staaf-n{font-size:12.5px;color:var(--tx-3);text-align:right}
.stats-tabel{border-collapse:collapse;width:100%;font-size:.93rem}
.stats-tabel th,.stats-tabel td{border-bottom:1px solid var(--lijn);padding:9px 12px;text-align:left}
.stats-tabel th{font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-4)}
.stats-tabel .getal{text-align:right}
.stats-bijgewerkt{color:var(--tx-4);font:12px var(--f-mono);margin-top:10px}

/* ── mobiel (390): geen zijscroll ───────────────────────────────────────── */
@media (max-width:760px){
  .blog-lijst,.blog-grid,.bekend-grid{grid-template-columns:1fr}
  .staaf-rij{grid-template-columns:52px 1fr 68px;gap:8px}
  .staaf-label{font-size:11.5px}
}

/* ── toetsenbordfocus (WP11) ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* WP30 (Aether #466) — V10: labels mogen niet buiten hun doos lopen.
   staaf-labels (rechtsgebieden) wrappen nu binnen hun kolom; tegel-labels
   breken lange woorden als "Citatieverwijzingen" netjes af. */
.staaf-label{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.tegel span{overflow-wrap:anywhere}