/* ============================================================
   PAGE-BLOG.CSS — Blog long-read ("Linnen gids")
   Sticky inhoudsopgave links, artikel midden. Verbruikt
   uitsluitend variabelen uit tokens.css; bouwt voort op
   sandbox-base.css. Behoudt de oorspronkelijke vormgeving.
   ============================================================ */

body{font-size:var(--text-reading);line-height:var(--leading-reading);}

/* Artikelkop */
.art-head{padding:46px 0 8px;}
.art-head .breadcrumb{margin-bottom:26px;}
.art-head .eyebrow{font-size:var(--kicker-size);font-weight:var(--kicker-weight);letter-spacing:var(--kicker-tracking);text-transform:uppercase;color:var(--color-accent);}
.art-head h1{font-family:var(--font-display);font-weight:var(--heading-weight);letter-spacing:var(--display-1-tracking);font-size:var(--display-1);line-height:var(--display-1-leading);margin:14px 0 18px;max-width:980px;}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;color:var(--color-text-muted);font-size:0.96rem;}
.art-meta .author{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--color-ink);}
.art-meta .avatar{width:34px;height:34px;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:0.95rem;}
.art-meta .dot-sep{color:var(--color-line);}

/* Breadcrumb (lokaal) */
.breadcrumb{font-size:0.84rem;color:var(--color-text-muted);display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.breadcrumb a{color:var(--color-text-muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--color-ink);text-decoration:underline;text-underline-offset:3px;}
.breadcrumb .sep{color:var(--color-accent);}

/* Cover */
.art-cover{margin:28px 0 8px;border:1px solid var(--color-line);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-deep);height:clamp(220px,34vw,380px);position:relative;}
.art-cover img{width:100%;height:100%;object-fit:cover;}
.art-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(36,48,41,.25),transparent 55%);}

/* Layout */
.art-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;padding:40px 0 60px;align-items:start;}
@media (max-width:900px){.art-layout{grid-template-columns:1fr;gap:0;}}

/* Inhoudsopgave */
.toc{position:sticky;top:96px;}
.toc .label{font-size:0.76rem;font-weight:var(--kicker-weight);letter-spacing:0.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:14px;}
.toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:2px;}
.toc a{display:block;padding:8px 10px;border-left:2px solid var(--color-line);text-decoration:none;color:var(--color-text-muted);font-size:0.95rem;}
.toc a:hover{color:var(--color-ink);border-left-color:var(--color-accent);background:var(--color-surface-deep);}
@media (max-width:900px){.toc{position:static;border:1px solid var(--color-line);border-radius:var(--radius);padding:20px 22px;margin-bottom:32px;background:var(--color-surface-card);}}

/* Artikeltekst */
.article{max-width:680px;}
.article p{margin-bottom:22px;color:#33402f;}
.article > p:first-of-type::first-letter{font-family:var(--font-display);font-weight:600;float:left;font-size:3.6rem;line-height:0.82;padding:6px 12px 0 0;color:var(--color-primary);}
.article section[id]{scroll-margin-top:112px;}
.article h2{font-family:var(--font-display);font-weight:var(--heading-weight);letter-spacing:-0.015em;font-size:1.85rem;line-height:1.2;margin:46px 0 16px;scroll-margin-top:112px;}
.article h3{font-family:var(--font-display);font-weight:var(--heading-weight);font-size:var(--h3-size);margin:28px 0 10px;}
.article strong{font-weight:700;}
.article a.inline{color:var(--color-primary);font-weight:600;text-underline-offset:3px;}
.article > ul,
.article > ol,
.article > section:not(.tldr):not(.related) > ul,
.article > section:not(.tldr):not(.related) > ol{list-style:none;padding-left:0;margin:0 0 24px;}
.article > ol,
.article > section:not(.tldr):not(.related) > ol{counter-reset:article-list;}
.article > ul > li,
.article > ol > li,
.article > section:not(.tldr):not(.related) > ul > li,
.article > section:not(.tldr):not(.related) > ol > li{position:relative;padding-left:1.35em;margin-bottom:7px;color:#33402f;}
.article > ul > li::before,
.article > section:not(.tldr):not(.related) > ul > li::before{content:"•";position:absolute;left:0;top:0;color:var(--color-ink);}
.article > ol > li,
.article > section:not(.tldr):not(.related) > ol > li{counter-increment:article-list;}
.article > ol > li::before,
.article > section:not(.tldr):not(.related) > ol > li::before{content:counter(article-list) ".";position:absolute;left:0;top:0;color:var(--color-ink);font-weight:600;}

/* TL;DR */
.tldr{background:var(--color-surface-deep);border:1px solid var(--color-line);border-radius:12px;padding:26px 28px;margin:8px 0 36px;}
.tldr .label{font-size:0.78rem;font-weight:var(--kicker-weight);letter-spacing:0.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:12px;}
.tldr ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.tldr li{display:flex;gap:12px;align-items:baseline;}
.tldr li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-primary);flex:0 0 auto;transform:translateY(-2px);}
.tldr b{font-weight:700;color:var(--color-primary);}

/* Kostenkaarten */
.cost-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 30px;}
@media (max-width:560px){.cost-cards{grid-template-columns:1fr;}}
.cost-card{border:1px solid var(--color-line);border-radius:12px;background:var(--color-surface-card);padding:22px 24px;}
.cost-card .ct{font-family:var(--font-display);font-size:1.2rem;font-weight:var(--heading-weight);margin-bottom:4px;}
.cost-card .cp{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--color-primary);}
.cost-card .cd{color:var(--color-text-muted);font-size:0.95rem;margin-top:8px;line-height:1.55;}

/* Calculator-CTA (donker) */
.bl-calc-cta{background:var(--color-ink);color:#fff;border-radius:var(--radius-lg);padding:34px 36px;margin:36px 0;text-align:center;}
.bl-calc-cta h2{font-family:var(--font-display);font-weight:var(--heading-weight);font-size:1.7rem;color:#fff;margin:0 0 10px;}
.bl-calc-cta p{color:#cdd7cd;margin:0 auto 22px;max-width:46ch;}

/* Knoppen (lokaal) */
.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;cursor:pointer;font-weight:700;font-size:1.05rem;border-radius:var(--radius);padding:15px 28px;border:2px solid transparent;}
.bl-btn-gold{background:var(--color-accent);color:#241c08;border-color:var(--color-accent);}
.bl-btn-gold:hover{background:#9c7a32;border-color:#9c7a32;}
.bl-btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.bl-btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);}
.bl-btn-ghost{border-color:var(--color-ink);color:var(--color-ink);background:transparent;}
.bl-btn-ghost:hover{background:var(--color-ink);color:var(--color-surface);}

/* Acties-rij (voorheen inline) */
.art-acties{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;}

/* Citaat */
blockquote{border-left:3px solid var(--color-accent);padding:4px 0 4px 22px;margin:8px 0 26px;font-family:var(--font-display);font-style:italic;font-size:1.25rem;color:var(--color-primary);line-height:1.45;}

/* Gerelateerde artikelen */
/* Lees ook — losse band over de volle browserbreedte, onder het artikel */
.bl-related{background:var(--color-surface-deep);border-top:1px solid var(--color-line);padding:56px 0 64px;}
.bl-related .label{font-size:var(--kicker-size);font-weight:var(--kicker-weight);letter-spacing:0.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:22px;}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:24px;list-style:none;}
@media (max-width:760px){.rel-grid{grid-template-columns:1fr;}}
.rel-grid li,.rel-grid article{display:flex;min-width:0;}
.rel-card{border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface-card);padding:22px 24px;text-decoration:none;display:flex;flex-direction:column;gap:8px;min-width:0;width:100%;height:100%;transition:box-shadow .18s ease,transform .18s ease;}
.rel-card:hover{box-shadow:0 16px 36px -18px rgba(36,48,41,.3);transform:translateY(-3px);}
.rel-card .rc-cat{font-size:0.74rem;font-weight:var(--kicker-weight);letter-spacing:0.1em;text-transform:uppercase;color:var(--color-accent);}
.rel-card .rc-title{font-family:var(--font-display);font-size:1.18rem;font-weight:var(--heading-weight);line-height:1.3;}
.rel-card .rc-lees{margin-top:auto;font-weight:600;color:var(--color-primary);font-size:0.95rem;}

/* Footer-marge (voorheen footer{margin-top:64px}) */
.sb-footer{margin-top:64px;}

/* ---- Overzichtspagina /artikelen ---- */
.bl-overzicht {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter);
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 900px) { .bl-overzicht { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bl-overzicht { grid-template-columns: 1fr; } }
.bl-ov-card { position: relative; height: 100%; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.bl-ov-card:has(.sb-stretch:hover) { box-shadow: 0 16px 36px -18px rgba(36,48,41,.3); transform: translateY(-3px); }
.bl-ov-card .sb-stretch { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; position: static; }
.bl-ov-card .sb-stretch::after { content: ""; position: absolute; inset: 0; }
.bl-ov-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.bl-ov-img img { width: 100%; height: 100%; object-fit: cover; }
.bl-ov-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.bl-ov-title { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.25; color: var(--ink); }
.bl-ov-intro { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.bl-ov-body .rc-lees { margin-top: auto; }

/* ---- PDF-download in artikel ---- */
.bl-download { margin: 0 0 28px; }
.bl-download-btn { font-size: 0.95rem; padding: 12px 20px; }