/*
 * 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}
}