/* Taak 40 · Kennisbank T12 (mockup Kennisbank op het canvas). Hero en leeskolom-basis: contentpagina.css. */

.eo-kb__in{max-width:var(--eo-container);margin-inline:auto;padding-inline:20px}

/* Hero artikel */
.eo-kb-hero{padding-bottom:88px}
.eo-kb-hero__meta{font-size:.875rem;color:var(--eo-bg);margin:0}
.eo-kb-kruimel{position:absolute;z-index:1;left:0;right:0;bottom:16px;max-width:var(--eo-container);margin:0 auto;padding:0 20px;text-align:left;font-size:.75rem;color:var(--eo-bg);overflow-wrap:anywhere}
.eo-kb-kruimel a{color:var(--eo-bg);text-decoration:none}
.eo-kb-kruimel a:hover{text-decoration:underline}
.eo-kb-kruimel a:focus-visible,.eo-kb-toc a:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}

/* Artikel: inhoudsopgave + leeskolom */
.eo-kb-art__sec{padding:72px 0}
.eo-kb-art__lay{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}
.eo-kb-art__lay--zonder-toc{grid-template-columns:minmax(0,1fr)}
.eo-kb-art__lay--zonder-toc .eo-kb-art__tekst{margin-inline:auto}
.eo-kb-toc{background:#fff;padding:20px;border-top:4px solid var(--eo-green);font-size:.875rem;position:sticky;top:24px}
.eo-kb-toc .eo-eyebrow{margin:0 0 8px}
.eo-kb-toc ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.eo-kb-toc a{color:var(--eo-navy)}
.eo-kb-toc a:hover{color:var(--eo-green-dark)}
.eo-kb-art__tekst{max-width:720px;color:#333;min-width:0}
.eo-kb-art__tekst p,.eo-kb-art__tekst li{font-size:1.0625rem;line-height:1.8;overflow-wrap:anywhere}
.eo-kb-art__tekst h2{font-size:clamp(1.6rem,3vw,1.9rem);margin:48px 0 16px;scroll-margin-top:24px}
.eo-kb-art__tekst h3{font-size:1.25rem;margin:32px 0 12px}
.eo-kb-art__tekst a{color:var(--eo-green-dark)}
.eo-kb-art__tekst img{max-width:100%;height:auto}
.eo-kb-art__tekst table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.eo-kb-art__tekst td,.eo-kb-art__tekst th{border:1px solid var(--eo-line);padding:8px 12px;text-align:left;vertical-align:top}
.eo-kb-art__tekst details{background:#fff;padding:16px 20px;margin:0 0 12px}
.eo-kb-art__tekst summary{font-weight:600;color:var(--eo-navy);cursor:pointer}
.eo-kb-lead{font-size:1.1875rem!important;color:var(--eo-navy);background:#fff;border-left:4px solid var(--eo-accent);padding:20px 24px;margin:0 0 32px}

/* Tussen-CTA (blokpatroon eo/kb-cta) */
.eo-kb-art__tekst .eo-kb-ins{background:var(--eo-blue);color:#fff;padding:24px;margin:32px 0}
.eo-kb-art__tekst .eo-kb-ins,.eo-kb-art__tekst .eo-kb-ins>.wp-block-group__inner-container{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.eo-kb-art__tekst .eo-kb-ins>.wp-block-group__inner-container{flex:1 1 100%}
.eo-kb-art__tekst .eo-kb-ins__tekst p,.eo-kb-art__tekst .eo-kb-ins__tekst h3{margin:0}
.eo-kb-ins .eo-eyebrow{color:var(--eo-accent);margin:0}
.eo-kb-art__tekst .eo-kb-ins h3{color:#fff;margin:0}
.eo-kb-ins .wp-block-buttons{margin:0}
.eo-kb-art__tekst .eo-kb-ins .wp-block-button__link{background:var(--eo-knop-bg);color:var(--eo-knop-tekst);border-radius:0;padding:15px 30px;font:700 1rem/1.2 var(--eo-font);min-height:48px;display:inline-flex;align-items:center;text-decoration:none;border-color:var(--eo-knop-rand);border:1px solid var(--eo-knop-rand)}
.eo-kb-art__tekst .eo-kb-ins .wp-block-button__link:hover{background:var(--eo-knop-hover-bg);color:var(--eo-knop-hover-tekst);border-color:var(--eo-knop-hover-bg)}

/* Kaarten (overzicht + meer) */
.eo-kb-lijst,.eo-kb-meer{background:#fff;padding:72px 0}
.eo-kb-lijst__kop{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.eo-kb-lijst__kop h2,.eo-kb-meer h2{margin:0}
.eo-kb-meer h2{margin-bottom:24px}
.eo-kb-filter{display:flex;gap:8px;flex-wrap:wrap}
.eo-kb-filter[hidden]{display:none}
.eo-kb .eo-kb-filter__knop,.eo-kb .eo-kb-filter__knop:hover{border:1px solid var(--eo-navy);padding:8px 14px;font:600 .8125rem var(--eo-font);background:#fff;color:var(--eo-navy);min-height:44px;cursor:pointer;border-radius:0}
.eo-kb .eo-kb-filter__knop[aria-pressed="true"]{background:var(--eo-navy);color:#fff}
.eo-kb-filter__knop:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}
.eo-kb-kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.eo-kb-kaart[hidden]{display:none}
.eo-kb-kaart a{display:flex;flex-direction:column;height:100%;background:var(--eo-off);text-decoration:none;color:inherit;transition:box-shadow .2s var(--eo-ease)}
.eo-kb-kaart a:hover{box-shadow:0 8px 24px rgba(30,34,47,.12)}
.eo-kb-kaart a:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}
.eo-kb-kaart__foto{position:relative;display:block;min-height:180px;overflow:hidden;background:var(--eo-blue)}
.eo-kb-kaart__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eo-kb-kaart__bd{display:block;padding:20px}
.eo-kb-kaart__bd .eo-eyebrow{display:block;margin:0 0 8px}
.eo-cp .eo-kb-kaart__titel{font-size:1.25rem;margin:0;overflow-wrap:anywhere}
.eo-kb-leeg{margin:0}

@media (max-width:900px){
	.eo-kb-art__lay{grid-template-columns:minmax(0,1fr);gap:32px}
	.eo-kb-toc{position:static}
}
@media (max-width:800px){
	.eo-kb-kaarten{grid-template-columns:minmax(0,1fr)}
}