/*
 * Over ons. Leunt op datarecup-home.css voor de hero, de secties en de
 * knoppen; hier staat alleen wat deze pagina eigen is.
 */

/* Een kortere hero: hier hangt geen beloftebalk onder. */
.dr-hero--kort .dr-hero__inner{padding-block:74px 78px}
.dr-hero--kort .dr-hero__title{max-width:20ch}

/* ── de vier feiten ──────────────────────────────────────── */
/*
   Deze stonden verstopt in de lopende tekst. Wie twijfelt of hij zijn enige
   exemplaar durft af te geven, leest geen alinea - die scant.
*/
.dr-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line,rgba(23,40,155,.13));border-radius:18px;overflow:hidden;
  border:1px solid var(--line,rgba(23,40,155,.13))}
.dr-fact{background:#fff;padding:28px 26px;display:flex;flex-direction:column;gap:6px}
.dr-fact b{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:30px;line-height:1;color:var(--blue,#17289B)}
.dr-fact span{font-size:14.5px;color:var(--muted,#5A607A);line-height:1.5}

/* ── het verhaal ─────────────────────────────────────────── */
.dr-story{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
.dr-story__txt p{font-size:16.5px;line-height:1.7;color:var(--ink,#1A1D2E);max-width:70ch}
.dr-story__txt strong{color:var(--blue,#17289B)}
.dr-story__beeld img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid var(--line,rgba(23,40,155,.13))}

/* ── video's ─────────────────────────────────────────────── */
/*
   preload="none" met een poster: de video laadt pas wanneer iemand erop
   klikt. Twee video's die meteen beginnen te laden kosten een bezoeker op
   mobiel makkelijk enkele megabytes voor niets.
*/
.dr-videos{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:8px}
.dr-video{margin:0}
.dr-video video{width:100%;height:auto;display:block;border-radius:14px;
  background:#0A0E28;border:1px solid var(--line,rgba(23,40,155,.13))}
.dr-video figcaption{margin-top:10px;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:16px;color:var(--ink,#1A1D2E)}

@media (max-width:1000px){
  .dr-facts{grid-template-columns:1fr 1fr}
  .dr-story{grid-template-columns:1fr;gap:26px}
  .dr-videos{grid-template-columns:1fr}
}
@media (max-width:640px){
  .dr-facts{grid-template-columns:1fr}
}

/* ── Hotfix 257: dubbele hero op de over-ons-pagina ──────────
   Er is maar EEN hero in de HTML (geverifieerd). Het probleem is puur CSS:
   home.css zet .dr-hero{overflow:visible} (nodig voor de beloftebalk op de
   homepage). Op de korte hero (--kort, over-ons) is er geen balk, maar door
   overflow:visible steekt de absoluut-gepositioneerde achtergrondfoto
   (.dr-hero__bg, inset:0) buiten de hero uit -> de foto wordt dubbel getoond.
   about.css laadt NA home.css, dus deze regels winnen. We knippen de korte
   hero strak af en houden de foto exact binnen het herovlak. */
.dr-hero.dr-hero--kort{overflow:hidden !important}
.dr-hero--kort .dr-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden !important}
.dr-hero--kort .dr-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
/* de decoratieve cyaan cirkel binnen de hero houden (niet buiten uitsteken) */
.dr-hero--kort .dr-hero__bg::after{right:0 !important;top:-20% !important;width:48% !important}