/* ============================================================
   Verhaal (h2g/verhaal) — 2-koloms: tekst + portret met stat-badge
   ============================================================ */

.verhaal { background: linear-gradient(180deg, var(--nile-900), var(--navy)); }

.verhaal-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }

.verhaal-text .eyebrow { margin: 0; }
.verhaal-text h2 { font-size: clamp(28px, 4vw, 46px); margin: 20px 0 26px; line-height: 1.08; }
.verhaal-text p { color: var(--nile-300); font-weight: 300; font-size: 16.5px; margin-bottom: 18px; max-width: 52ch; }
.verhaal-text p:last-child { margin-bottom: 0; }
.verhaal-text p strong, .verhaal-text .lead-in { color: #fff; font-weight: 500; }

.verhaal-img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; }
.verhaal-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.72) contrast(1.05); }
.verhaal-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,13,23,.55), transparent 55%); }

.verhaal-badge { position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 2; display: flex; gap: 28px; }
.verhaal-badge .vb-num { font-family: var(--font-h); font-weight: 800; font-size: 30px; color: #fff; }
.verhaal-badge .vb-lab { font-size: 12.5px; color: var(--nile-300); letter-spacing: .03em; }

@media (max-width: 880px) {
  .verhaal-layout { grid-template-columns: 1fr; gap: 38px; }
  .verhaal-img { aspect-ratio: 16/11; }
}