/* ==========================================================================
   page-over.css : /over-ons, ontwerp opus.
   Laag bovenop artikel.css, over-ons.css en page-artikel.css (body.vt.vt-artikel.vt-over):
   zelfde indeling, inhoud en gedrag (over-ons.js), alleen de opus-taal. FAQ via components/opus-lijst/faq.php.
   ========================================================================== */

/* ── Kop ── */
.vt-over .article-header-section .article-title { margin-bottom: var(--space-16); }

/* ── Vier principes: effen grijze band (geen stippelgrond), witte kaarten met dunne rand, geen schaduw ── */
.vt-over .over-principles-band { padding: var(--space-64) 0; margin-bottom: 0; background: var(--vt-tint); }
.vt-over .over-principle { padding: var(--space-24); border: 1px solid var(--vt-line-strong); border-radius: var(--radius); box-shadow: none; }
.vt-over .over-principle h3 { font: 700 20px/1.25 var(--h2-font); letter-spacing: var(--letter-spacing); }
.vt-over .over-principle p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--color-text-soft); }

/* ── Voltoo Score ── */
.vt-over .over-score { padding-top: var(--space-64); }
.vt-over .over-score .article-col-8 h2 { font: 700 30px/1.2 var(--h2-font); letter-spacing: var(--letter-spacing); }
.vt-over .over-score-intro a { color: var(--color-text); text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.vt-over .over-score-intro a:hover { color: var(--color-accent); }

/* ── In cijfers: statistieken klein en zwart (opus), dunne lijnen i.p.v. stippels ── */
.vt-over .over-stats { padding: var(--space-32) 0; background: var(--color-surface); border-top: 1px solid var(--vt-line); border-bottom: 1px solid var(--vt-line); }
.vt-over .over-stats .stat-item { gap: 10px; align-items: baseline; }
.vt-over .over-stats .stat-number { font: 700 28px/1 var(--h2-font); letter-spacing: var(--letter-spacing); color: var(--color-text); }
.vt-over .over-stats .stat-label { font-size: 15px; color: var(--color-text-soft); }

/* ── Hoe het werkt: twee witte kaarten naast elkaar, genummerde stappen met gelijke tussenruimte;
   het nummerbolletje staat op de eerste tekstregel (baseline) ── */
.vt-over .over-stappen .vt-h2 { scroll-margin-top: calc(var(--vt-header-h) + 24px); }   /* anker vanuit het zijmenu */
.vt-over .over-stappen-grid { margin-top: var(--space-32); row-gap: var(--space-16); }
.vt-over .over-stappen-card { height: 100%; padding: 28px 32px; background: var(--color-surface); border: 1px solid var(--vt-line-strong); border-radius: var(--radius); }
.vt-over .over-stappen-title { font: 700 21px/1.25 var(--h2-font); letter-spacing: var(--letter-spacing); }
.vt-over .over-stappen-list { margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.vt-over .over-stappen-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--vt-line); }
.vt-over .over-stappen-list li:first-child { border-top: 0; padding-top: 8px; }
.vt-over .over-stappen-list li:last-child { padding-bottom: 0; }
.vt-over .over-stappen-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-text); color: var(--color-surface); font: 700 14px/1 var(--font-body); }
.vt-over .over-stappen-list p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text); }

/* FAQ: "volledig gratis" vet in zwart (rood is voor de hoofdactie) */
.vt-over .faq-answer-emphasis { color: var(--color-text); }

@media (max-width: 768px) {
  .vt-over .over-principles-band { padding: var(--space-48) 0; }
  .vt-over .over-score .article-col-8 h2 { font-size: 24px; }
  .vt-over .over-stappen-card { padding: 22px 18px; }
  .vt-over .over-stats .stat-number { font-size: 24px; }
}