/* ==========================================================================
   page-artikel.css : /kennisbank/{slug} (artikeltemplate), ontwerp opus.
   Laag bovenop artikel.css (die ook privacy, voorwaarden, over-ons en merk gebruiken),
   daarom alles gescoped op body.vt-artikel. Componenten komen uit voltoo-ui.css.
   ========================================================================== */

/* ── Kop ─────────────────────────────────────────────────────────────── */
.vt-artikel .article-header-section { padding-top: var(--space-24); }
.vt-artikel .article-header-section .vt-breadcrumb .breadcrumb { padding: 0; }
.vt-artikel .article-title { margin-bottom: var(--space-32); font-size: 48px; line-height: 1.12; }

/* Auteur, datum en delen */
.vt-artikel .article-meta { height: auto; margin-bottom: var(--space-48); padding: 16px 0; border-top: 1px solid var(--vt-line-strong); border-bottom: 1px solid var(--vt-line-strong); }
.vt-artikel .author-avatar,
.vt-artikel .author-bio-avatar { border-radius: var(--radius); background: var(--vt-tint); }
.vt-artikel .author-avatar { width: 48px; height: 48px; }
.vt-artikel .author-avatar svg { width: 22px; height: 26px; }
.vt-artikel .author-name { font-weight: 600; }
.vt-artikel .author-date { font-size: 15px; color: var(--color-text-soft); }
.vt-artikel .social-share { gap: 8px; }
.vt-artikel .social-share a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--vt-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: border-color var(--vt-t), color var(--vt-t);
}
.vt-artikel .social-share a:hover { border-color: var(--color-text); color: var(--color-text); }
.vt-artikel .social-share svg { width: 18px; height: 18px; }

/* Merklogo (merkartikelen): zwart logo op effen grijs, zelfde taal als de merktegels in /artikelen */
.vt-artikel .brand-logo-block { padding: 0 16px; }
.vt-artikel .brand-logo-display { height: 260px; background: var(--vt-tint); }
/* Vierkante logo's (Huawei) niet groter dan de brede: breedte 280px, hoogte max 110px */
.vt-artikel .brand-logo-display svg { max-height: 110px; }
.vt-artikel .brand-logo-display svg,
.vt-artikel .brand-logo-display svg path,
.vt-artikel .brand-logo-display svg g,
.vt-artikel .brand-logo-display svg polygon,
.vt-artikel .brand-logo-display svg rect,
.vt-artikel .brand-logo-display svg circle { fill: var(--color-text); }
.vt-artikel .brand-logo-display .brand-fallback-text { color: var(--color-text); }

/* ── Tekst ───────────────────────────────────────────────────────────── */
.vt-artikel .article-body p { font-size: 17px; line-height: 1.7; margin-bottom: 20px; }
.vt-artikel .article-body p.intro-text { font-size: 20px; line-height: 1.55; font-weight: 600; }
.vt-artikel .article-body h2 { font: 700 30px/1.2 var(--h2-font); margin: 56px 0 16px; }
.vt-artikel .article-body h3 { font: 700 20px/1.3 var(--h2-font); }
.vt-artikel .article-body strong { font-weight: 700; }

/* Foto's */
.vt-artikel .article-image { margin: var(--space-32) 0 var(--space-48); }
.vt-artikel .article-image img,
.vt-artikel .article-image-slideshow,
.vt-artikel .article-inline-image img { border: 1px solid var(--vt-line-strong); border-radius: var(--radius); }
.vt-artikel .article-image-slideshow .article-image-slide { border: 0; }
.vt-artikel .article-image figcaption,
.vt-artikel .article-inline-image figcaption { font-size: 14px; color: var(--color-text-soft); }

/* Citaat: italic, zwarte balk (rood is alleen voor de hoofdactie) */
.vt-artikel .article-body blockquote {
  margin: var(--space-48) 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--color-text);
  font: italic 400 26px/1.45 var(--font-body);
}

/* Feiten / voor- en nadelen */
.vt-artikel .pros-cons-section { margin: var(--space-48) 0; padding: 28px 32px; background: var(--color-surface); border: 1px solid var(--vt-line-strong); border-radius: var(--radius); }
.vt-artikel .pros-cons-section h2 { margin-top: 0; font-size: 24px; }
.vt-artikel .facts-section .facts-list { gap: 12px; }
.vt-artikel .facts-section .facts-list li,
.vt-artikel .pros-item,
.vt-artikel .cons-item { font-size: 17px; line-height: 1.55; }
.vt-artikel .cons-icon { color: var(--color-text-soft); }

/* Kostenoverzicht: drie vakken, gemiddeld zwart */
.vt-artikel .kosten-overview { padding: 20px; border-color: var(--vt-line-strong); }
.vt-artikel .kosten-cell { padding: 18px 12px; background: var(--vt-page); }
.vt-artikel .kosten-cell--avg { background: var(--color-text); color: var(--color-surface); }
.vt-artikel .kosten-cell--avg .kosten-cell-label,
.vt-artikel .kosten-cell--avg .kosten-cell-value,
.vt-artikel .kosten-cell--avg .kosten-cell-range { color: var(--color-surface); opacity: 1; }
.vt-artikel .kosten-cell-label { font: 600 14px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; opacity: 1; }
.vt-artikel .kosten-cell-value { font-family: var(--h2-font); font-size: 28px; }
.vt-artikel .kosten-overview-note { border-top-color: var(--vt-line); }

/* Tabellen (vergelijking en specificaties): zelfde taal als de opus-tabel */
.vt-artikel .comparison-table-wrap,
.vt-artikel .specs-section .specs-table { background: var(--color-surface); border: 1px solid var(--vt-line-strong); border-radius: var(--radius); }
.vt-artikel .comparison-table-wrap { margin: var(--space-32) 0 var(--space-48); }
.vt-artikel .comparison-table { border-collapse: collapse; width: 100%; }
.vt-artikel .comparison-table thead tr { border-bottom: 0; }
.vt-artikel .comparison-table th { padding: 14px 18px; background: var(--color-text); color: var(--color-surface); font: 600 15px/1.4 var(--font-body); }
.vt-artikel .comparison-table td { padding: 14px 18px; border-bottom: 1px solid var(--vt-line); font-size: 16px; }
.vt-artikel .comparison-table tbody tr:last-child td { border-bottom: 0; }
.vt-artikel .comparison-table th.ct-highlight { background: var(--color-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vt-artikel .comparison-table td.ct-highlight { background: var(--vt-page); font-weight: 600; }
.vt-artikel .specs-section .specs-table { overflow: hidden; border-collapse: separate; border-spacing: 0; }
.vt-artikel .specs-table tr:nth-child(even) { background: transparent; }
.vt-artikel .specs-table td { padding: 14px 18px; border-bottom: 1px solid var(--vt-line); }
.vt-artikel .specs-table tr:last-child td { border-bottom: 0; }

/* Beslisboom */
.vt-artikel .dt-question { border: 1px solid var(--color-text); background: var(--color-surface); font-weight: 600; }
.vt-artikel .dt-branch { border-color: var(--vt-line-strong); }
.vt-artikel .dt-result { border-radius: var(--radius); }

/* FAQ: stijl komt uit voltoo-ui.css (§20, gelijk aan de provinciepagina); hier alleen de tekstgrootte
   terugzetten, want .article-body p hierboven maakt alinea's 17px */
.vt-artikel .article-body .article-faq-answer p { margin-bottom: 0; font-size: 16px; line-height: 1.8; }

/* Actieblok in de tekst: effen grijs vlak, gewone kop, primaire knop */
.vt-artikel .cta-block { margin: var(--space-48) 0; padding: 36px 40px; background: var(--vt-tint); }
.vt-artikel .cta-block-title,
.vt-artikel .article-body .cta-block-title { font: 700 26px/1.25 var(--h2-font); letter-spacing: var(--letter-spacing); text-transform: none; margin-bottom: 12px; }
.vt-artikel .cta-block-text { font-size: 17px; line-height: 1.6; margin-bottom: 20px; }
.vt-artikel .article-body .cta-block-btn { display: inline-flex; width: auto; padding: 0 28px; min-height: 48px; background: var(--color-accent); border-radius: var(--radius); }
.vt-artikel .article-body .cta-block-btn:hover { background: var(--color-text); }

/* Lees ook */
.vt-artikel .article-internal-links { margin-top: var(--space-48); padding-top: var(--space-24); border-top: 1px solid var(--vt-line-strong); }
.vt-artikel .article-internal-links h2 { margin: 0 0 12px; font-size: 22px; }
.vt-artikel .article-internal-links-list { gap: 10px; }
.vt-artikel .article-internal-links-list a { text-decoration: none; }

/* Conclusie / review: kaart in de tekstkolom; kernboodschap in een eigen vlak; bronnen als genummerde lijst */
.vt-artikel .review-block-wrapper { max-width: none; margin: var(--space-48) 0 0; padding: 0; }
.vt-artikel .review-block { padding: 0; margin: 0; background: transparent; border-radius: 0; }
.vt-conclusion { padding: 40px 44px; background: var(--color-surface); border: 1px solid var(--vt-line-strong); border-radius: var(--radius); }
.vt-artikel .vt-conclusion h2 { margin: 0 0 16px; font-size: 28px; }
.vt-artikel .vt-conclusion p { margin-bottom: 16px; }
.vt-artikel .vt-conclusion p.vt-conclusion-key {
  margin: 24px 0 0;
  padding: 18px 22px;
  background: var(--vt-page);
  border-left: 3px solid var(--color-text);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
  line-height: 1.6;
}
.vt-artikel .review-star path { fill: var(--color-text); }
.vt-artikel .review-stars { margin: var(--space-24) 0 8px; }
.vt-artikel .review-star { width: 36px; height: 36px; }
.vt-artikel .review-block .review-score-label { margin-bottom: 0; }

.vt-sources { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--vt-line); }
.vt-artikel .article-body .vt-sources-title { margin: 0 0 8px; font: 600 15px/1.4 var(--font-body); }
.vt-artikel .article-body .vt-sources-list { list-style: none; padding: 0; margin: 0; counter-reset: bron; }
.vt-artikel .article-body .vt-sources-list li { margin: 0; counter-increment: bron; border-bottom: 1px solid var(--vt-line); line-height: 1.4; }
.vt-artikel .article-body .vt-sources-list li:last-child { border-bottom: 0; }
.vt-artikel .article-body .vt-sources-list a { text-decoration: none; }
.vt-sources-list a {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas: "nr naam ico" "nr host ico";
  column-gap: 8px;
  row-gap: 2px;
  padding: 12px 0;
  color: var(--color-text);
}
.vt-sources-list a::before { content: counter(bron) "."; grid-area: nr; font: 500 14px/1.45 var(--font-body); color: var(--color-text-soft); }
.vt-sources-name { grid-area: naam; font: 500 15px/1.45 var(--font-body); }
.vt-sources-host { grid-area: host; font-size: 13px; color: var(--color-text-soft); }
.vt-sources-ico { grid-area: ico; align-self: center; width: 14px; height: 14px; transition: color var(--vt-t); }
.vt-sources-list a:hover .vt-sources-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.vt-sources-list a:hover .vt-sources-ico { color: var(--color-accent); }

/* Delen + auteur */
.vt-artikel .share-block { margin: var(--space-48) 0 var(--space-32); border-color: var(--vt-line-strong); }
.vt-artikel .author-bio { margin: 0 0 var(--space-48); }
.vt-artikel .author-bio-avatar { width: 56px; height: 56px; }
.vt-artikel .author-bio-subtitle { color: var(--color-text-soft); }

/* Gerelateerde artikelen (opus-artikelkaarten, 4 naast elkaar) */
.vt-artikel .related-section { padding: var(--vt-section-y) 0; }
.vt-artikel .related-section .grid { gap: var(--space-24); }
.vt-artikel .related-section .vt-article-title { font-size: 18px; }

@media (max-width: 1024px) {
  .vt-artikel .related-section .col-3 { grid-column: span 6; }
}
@media (max-width: 768px) {
  .vt-artikel .article-title { font-size: 34px; }
  .vt-artikel .article-meta { flex-wrap: wrap; gap: 12px; }
  .vt-artikel .article-body h2 { font-size: 25px; margin-top: 44px; }
  .vt-artikel .article-body p { font-size: 16px; }
  .vt-artikel .article-body p.intro-text { font-size: 18px; }
  .vt-artikel .article-body blockquote { font-size: 21px; padding-left: 18px; }
  .vt-artikel .pros-cons-section { padding: 22px 20px; }
  .vt-artikel .cta-block { padding: 28px 22px; }
  .vt-conclusion { padding: 26px 20px; }
  .vt-artikel .vt-conclusion h2 { font-size: 23px; }
  .vt-artikel .brand-logo-display { height: 180px; }
  .vt-artikel .related-section .col-3 { grid-column: 1 / -1; }
}

/* Witruimte: gerelateerde artikelen sluiten aan op de auteur; feitenblok zonder extra marge onderin */
.vt-artikel .article-body { padding-bottom: 0; }
.vt-artikel .related-section { padding-top: var(--space-48); }
.vt-artikel .pros-cons-section > :last-child,
.vt-artikel .pros-cons-section .facts-list li:last-child,
.vt-artikel .pros-cons-section .cons-list,
.vt-artikel .pros-cons-section .pros-list:last-child { margin-bottom: 0; }
.vt-artikel .article-body .article-internal-links-list { list-style: none; padding-left: 0; }
.vt-artikel .article-body .article-internal-links-list li { margin: 0; }
.vt-artikel .comparison-table { margin: 0; }
.vt-artikel .comparison-table tr { border-bottom: 0; }

/* ── Juridische pagina's (/privacy, /voorwaarden): één vast ritme, identiek voor beide.
   body.vt-juridisch (specifieker dan de oude body.privacy-page / body.voorwaarden-page in artikel.css).
   Kop 24px onder de titel, metabalk, 32px tot de inhoud; secties: 56px boven een H2, 20px tot de eerste
   H3, 32px boven elke volgende H3; scheidingslijn 48px boven en onder; 80px onderaan. ── */
body.vt-juridisch .article-title { margin-bottom: var(--space-24); }
body.vt-juridisch .article-meta { margin-bottom: 0; }
body.vt-juridisch .article-body { padding: var(--space-32) 0 var(--space-80); }
body.vt-juridisch .article-body .privacy-highlight { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--space-48); padding: 20px 24px; background: var(--color-surface); border: 1px solid var(--vt-line-strong); border-radius: var(--radius); }
body.vt-juridisch .article-body .privacy-highlight li { font-size: 16px; line-height: 1.5; font-weight: 600; }
body.vt-juridisch .article-body h2 { margin: 56px 0 var(--space-16); font: 700 28px/1.25 var(--h2-font); letter-spacing: var(--letter-spacing); }
body.vt-juridisch .article-body .article-col-8 > :first-child,   /* eerste kop of alinea sluit aan op de 32px na de metabalk */
body.vt-juridisch .article-body .privacy-highlight + h2,
body.vt-juridisch .article-body hr + h2 { margin-top: 0; }
body.vt-juridisch .article-body .privacy-highlight + hr { display: none; }   /* het blok scheidt al; zo begint de eerste H2 op beide pagina's even hoog */
body.vt-juridisch .article-body hr { margin: var(--space-48) 0; border: 0; border-top: 1px solid var(--vt-line-strong); }
body.vt-juridisch .article-body h3 { margin: var(--space-32) 0 10px; font: 700 20px/1.3 var(--h2-font); letter-spacing: var(--letter-spacing); }
body.vt-juridisch .article-body h2 + h3 { margin-top: 20px; }
body.vt-juridisch .article-body p { margin: 0 0 var(--space-16); font-size: 17px; line-height: 1.7; }
body.vt-juridisch .article-body > .container > .grid > .article-col-8 > p:first-of-type { margin-top: 0; }
body.vt-juridisch .article-body ol,
body.vt-juridisch .article-body ul:not(.privacy-highlight) { margin: 0 0 var(--space-16); }
body.vt-juridisch .article-body ol li,
body.vt-juridisch .article-body ul:not(.privacy-highlight) li { margin-bottom: 6px; font-size: 17px; line-height: 1.6; }
body.vt-juridisch .article-body ol ol { margin: 6px 0 0; }
@media (max-width: 768px) {
  body.vt-juridisch .article-body h2 { margin-top: 48px; font-size: 24px; }
  body.vt-juridisch .article-body hr { margin: 40px 0; }
  body.vt-juridisch .article-body h3 { font-size: 18px; }
  body.vt-juridisch .article-body p,
  body.vt-juridisch .article-body ol li,
  body.vt-juridisch .article-body ul:not(.privacy-highlight) li { font-size: 16px; }
}