/* DPS Media, kennisbank-artikelpagina's: bento-hero (keuze Dikkie 21-09-2026, optie 10)
   en leeskolom met vaste inhoudsopgave. Alles vanaf de testimonials blijft de
   template. Gebouwd door dpsmedia-werkmap/bouw-artikel-bento.py. Eigen bestand,
   niets in de gedeelde stylesheets. */

/* ---------- hero ---------- */
.v2-art-hero.dps-bento-hero{ min-height:0 !important; padding:clamp(104px, 9vw, 140px) 0 0 !important; }
.dps-bento{ display:grid; grid-template-columns:1.25fr 1.15fr .85fr; grid-template-rows:auto auto; gap:16px; margin-top:18px; }
.dps-tegel{ border-radius:0 37.5px; padding:26px 28px; border:1px solid #e6e6ee; background:#f5f5fa; min-width:0; }
.dps-tegel.is-titel{ grid-column:1; grid-row:1; background:#0a0824; border-color:#0a0824; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end; gap:14px; min-height:380px; }
.dps-tegel.is-titel .dps-pill{ display:inline-block; align-self:flex-start; padding:7px 16px; border-radius:999px;
  background:linear-gradient(90deg,#6121DF,#911CEA); color:#fff; font-size:13px; font-weight:700; margin-bottom:6px; }
.dps-tegel.is-titel h1{ font-size:clamp(26px, 2.6vw, 38px) !important; line-height:1.1 !important; font-weight:800 !important;
  letter-spacing:-.02em; color:#fff !important; margin:0 !important; max-width:none !important; text-wrap:balance; }
.dps-intro{ color:rgba(255,255,255,.78); font-size:16px; line-height:1.6; margin:0; }
.dps-meta{ color:rgba(255,255,255,.62); font-size:13.5px; margin:0; }
.dps-meta .cat{ color:#c7b3ff; font-weight:700; }
.dps-tegel.is-beeld{ grid-column:2; grid-row:1/3; padding:0; border:0; position:relative; overflow:hidden; min-height:320px; background:#05061c; }
.dps-tegel.is-beeld img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
  margin:0 !important; border-radius:0 !important; aspect-ratio:auto !important; }
.dps-tegel.is-kern{ grid-column:3; grid-row:1; }
.dps-tegel.is-kern b, .dps-toc b{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#4A42DD; margin-bottom:10px; }
.dps-tegel.is-kern ul{ margin:0; padding-left:18px; display:grid; gap:8px; font-size:15px; line-height:1.5; color:#1b1b28; }
.dps-tegel.is-kern li b{ display:inline; font-size:inherit; letter-spacing:0; text-transform:none; color:#0b0b14; margin:0; }
.dps-tegel.is-auteur{ grid-column:3; grid-row:2; padding:18px 20px; display:flex; gap:12px; align-items:center; }
.dps-tegel.is-auteur img{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; }
.dps-tegel.is-auteur b{ display:block; font-size:14px; color:#0b0b14; }
.dps-tegel.is-auteur span{ font-size:12.5px; color:#5f6270; line-height:1.4; display:block; }
.dps-tegel.is-cta{ grid-column:1; grid-row:2; background:linear-gradient(135deg,#6121DF,#219DF2); border:0; color:#fff;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start; justify-content:center; padding:22px 28px; }
.dps-tegel.is-cta b{ font-size:16px; color:#fff; }
.dps-tegel.is-cta a{ display:inline-block; padding:11px 20px; border-radius:999px; background:#fff; color:#4A42DD; font-weight:700;
  text-decoration:none; font-size:14px; }
.dps-tegel.is-cta a:hover{ background:#f0ecff; }

/* ---------- leeskolom ---------- */
.v2-art-body.dps-art-body{ min-height:0 !important; padding-top:clamp(34px, 4vw, 56px) !important; }
.dps-art-grid{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:48px; align-items:start; }
.dps-art-zij{ position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; }
.dps-toc{ padding:18px 20px; border:1px solid #e6e6ee; border-radius:16px; background:#fff; }
.dps-toc ol{ margin:0; padding-left:20px; font-size:14px; display:grid; gap:7px; }
.dps-toc a{ color:#0b0b14; text-decoration:none; font-weight:600; }
.dps-toc a:hover{ color:#4A42DD; }
.dps-toc li.is-actief a{ color:#4A42DD; }
.dps-art-tekst{ max-width:66ch; }
.v2-art-body .dps-art-tekst h2{ font-size:clamp(24px, 2.2vw, 30px); font-weight:800; line-height:1.15; letter-spacing:-.02em;
  margin:36px 0 10px; color:#0b0b14; scroll-margin-top:110px; text-wrap:balance; }
.v2-art-body .dps-art-tekst h2:first-child{ margin-top:0; }
.v2-art-body .dps-art-tekst h3{ font-size:20px; font-weight:800; margin:26px 0 8px; scroll-margin-top:110px; }
.v2-art-body .dps-art-tekst p{ font-size:17px; line-height:1.65; margin:0 0 16px; color:#2c2f3a; }
.v2-art-body .dps-art-tekst h2 + p{ font-weight:700; color:#0b0b14; }   /* de eerste zin na een kop is de kern van het hoofdstuk */
.v2-art-body .dps-art-tekst ul, .v2-art-body .dps-art-tekst ol{ font-size:17px; line-height:1.65; margin:0 0 16px; padding-left:22px; }
.dps-art-tekst .dps-verder{ margin-top:44px; }

@media (max-width:1023px){
  .dps-bento{ grid-template-columns:1fr 1fr; }
  .dps-tegel.is-titel{ grid-column:1/3; grid-row:1; min-height:0; }
  .dps-tegel.is-beeld{ grid-column:1/3; grid-row:2; aspect-ratio:4/3; min-height:0; }
  .dps-tegel.is-kern{ grid-column:1/3; grid-row:3; }
  .dps-tegel.is-auteur{ grid-column:1; grid-row:4; }
  .dps-tegel.is-cta{ grid-column:2; grid-row:4; }
  .dps-art-grid{ grid-template-columns:1fr; gap:28px; }
  .dps-art-zij{ position:static; }
}
@media (max-width:640px){
  .dps-bento{ grid-template-columns:1fr; gap:12px; }
  .dps-tegel{ border-radius:0 24px; padding:20px 20px; }
  .dps-tegel.is-titel, .dps-tegel.is-beeld, .dps-tegel.is-kern, .dps-tegel.is-auteur, .dps-tegel.is-cta{ grid-column:1; grid-row:auto; }
  .dps-tegel.is-titel h1{ font-size:26px !important; }
  .dps-toc{ display:none; }   /* op de telefoon staan de koppen toch direct onder elkaar */
}
@media print{ .dps-art-zij, .dps-tegel.is-cta{ display:none; } }