/* ===== De 3e Kerstdag — mobiel en tablet =====================================
   Het ontwerp uit Claude Design bevat geen enkele media query: het is één
   ontwerp voor één breedte. Alles hieronder is dus een beslissing, geen
   overname. Elke regel komt voort uit een meting, met het getal erbij.

   LET OP de specificiteit: de basisregels staan op `.dkd-block .klasse`
   (0,2,0). Een mobiele regel op alleen `.klasse` komt niet aan — zonder
   foutmelding. Daarom staat overal dezelfde of een zwaardere selector. */

/* ── 1 · Hero ───────────────────────────────────────────────────────────────
   Gemeten: 1041px hoog op een scherm van 780px. De drie knoppen vielen ruim
   onder de vouw — op een donatiesite het duurste probleem van allemaal.
   Aanpak: min-height loslaten, ruimte terugbrengen, knoppen full-width. */
@media (max-width: 700px) {
  .dkd-block.dkd-hero {
    min-height: 0;
    padding-block: var(--space-9);
  }
  .dkd-hero-inner {
    padding: 0 var(--space-5);
    gap: var(--space-4);
  }
  .dkd-block .dkd-hero-titel { font-size: clamp(2.5rem, 13vw, 3.25rem); }
  .dkd-hero-tekst { font-size: var(--fs-body); line-height: 1.6; }
  .dkd-hero-knoppen {
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }
  .dkd-hero-knoppen .dkd-btn { width: 100%; }
  .dkd-ster i { width: 36px; }
}

/* De vh-val. Een iPad Air is 820px breed — voor je CSS een tablet — maar
   1180px hoog. 82vh wordt daar 968px; op een iPad Pro zelfs 1120px.
   Begrens dat met een HOOGTE-media query, zodat het bureaublad (1440 × 1000)
   er niet door geraakt wordt en de ontwerpvergelijking blijft kloppen. */
@media (min-height: 1000px) and (max-width: 1150px) {
  .dkd-block.dkd-hero { max-height: 760px; min-height: 0; }
}

/* ── 2 · Verticale ruimte ───────────────────────────────────────────────────
   Gemeten: 128px boven én onder elke sectie, op elke breedte. Opgeteld 256px
   tussen twee secties — op een telefoon een derde van het scherm, en dat vijf
   keer achter elkaar. De hero en de paginakop regelen hun eigen hoogte. */
@media (max-width: 700px) {
  .site-main .dkd-block.dkd-sectie:not(.dkd-hero):not(.dkd-paginaheader) {
    padding-block: 60px;
  }
  .site-main .dkd-block.dkd-sectie--krap:not(.dkd-hero):not(.dkd-paginaheader) {
    padding-block: 48px;
  }
  .site-main .dkd-block.dkd-paginaheader { padding-block: 56px 48px; }
  .site-main .dkd-block.dkd-donatie { padding-bottom: 60px; }
  .dkd-stapel { gap: var(--space-7); }
}

/* De tussenband. Klassieke fout: onder de omklapgrens mobiele maten, daarboven
   meteen de volle bureaubladmaat. Een tablet van 1024px kreeg dan 128px ruimte
   op een scherm dat een derde smaller is dan een laptop. */
@media (min-width: 701px) and (max-width: 1150px) {
  .site-main .dkd-block.dkd-sectie:not(.dkd-hero):not(.dkd-paginaheader) {
    padding-block: 88px;
  }
  .site-main .dkd-block.dkd-paginaheader { padding-block: 88px 72px; }
}

/* ── 3 · Tekstblok + afbeelding ─────────────────────────────────────────────
   Gemeten: op 768px één kolom met een foto van 704px, op 820px twee kolommen
   met een foto van 342px. De foto werd dus gróter op het kleinere scherm.
   Oorzaak: de omslag lag op minmax(320px), waardoor 820px net twee kolommen
   haalt die allebei te smal zijn. Omslag naar boven, en een bovengrens op de
   hele rij zodat foto en tekst samen niet uitlopen. */
.dkd-tekstfoto-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

@media (max-width: 900px) {
  .dkd-tekstfoto-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 620px;                 /* foto niet breder dan op een laptop */
  }
  /* Gestapeld hangt een tekstkolom met een leesbreedte scheef onder een
     schermbrede foto. Die grens vervalt dus zodra ze onder elkaar staan. */
  .dkd-tekstfoto-kolom .dkd-tekst { max-width: none; }
  .dkd-tekstfoto--foto-links .dkd-tekstfoto-figuur { order: 0; }
}

/* Dezelfde stapelregel voor de andere tweekolomsblokken. */
@media (max-width: 780px) {
  .dkd-tekstduo-grid,
  .dkd-duo-grid,
  .dkd-contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .dkd-tekstduo-tekst { padding-top: 0; }
  .dkd-tekstduo-tekst .dkd-tekst { max-width: none; }
  .dkd-contact-kolom { gap: var(--space-7); }
}

/* ── 4 · Documentenlijst ────────────────────────────────────────────────────
   Gemeten: het statuslabel liep op 360–430px tot 96px buiten beeld, omdat naam
   en label op één regel moesten. Onder de 560px onder elkaar. */
@media (max-width: 560px) {
  .dkd-document {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .dkd-document b { font-size: 1.25rem; }
}

/* ── 5 · Formulier en donatie ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .dkd-formulier-schets { grid-template-columns: 1fr; gap: var(--space-4); }
  .dkd-kaart--p8 { padding: var(--space-6); }
  .dkd-bedragen { grid-template-columns: repeat(2, 1fr); }
  .dkd-block .dkd-bedrag { font-size: 1.5rem; }
  .dkd-donatie-inner { gap: var(--space-5); }
}

/* ── 6 · Vergelijkingstabel ─────────────────────────────────────────────────
   Drie kolommen naast elkaar worden op een telefoon onleesbaar smal. Onder
   elkaar, met het onderwerp als kop boven de twee kolommen. */
@media (max-width: 780px) {
  .dkd-vergelijking-rij {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-block: var(--space-5);
  }
  .dkd-vergelijking-aspect { font-size: 1.375rem; }
}

/* ── 7 · Rasters die te smal worden ─────────────────────────────────────── */
@media (max-width: 700px) {
  .dkd-kaartenrij,
  .dkd-kaartenrij--smal,
  .dkd-kaartenrij--breed,
  .dkd-kaartenrij--ruim,
  .dkd-nummerraster,
  .dkd-nummerraster--smal,
  .dkd-stappen,
  .dkd-stappen--breed,
  .dkd-personen,
  .dkd-cijfers-rij {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .dkd-cijfers-rij { gap: var(--space-6); }
}

/* Tussenband: twee kolommen in plaats van één of vier. */
@media (min-width: 701px) and (max-width: 1150px) {
  .dkd-kaartenrij--smal,
  .dkd-stappen--breed,
  .dkd-nummerraster {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 8 · Aanraakvlakken ─────────────────────────────────────────────────────
   Gemeten: tekstlinks 21–26px hoog, footerlinks 19px. Vergroot het raakvlak
   met een onzichtbaar vlak, zodat de opmaak niet verschuift. Mikpunt ≥ 36px. */
@media (max-width: 1250px) {
  .dkd-link,
  .dkd-tekst a,
  .dkd-contact-mail,
  .dkd-footer-lijst a,
  .dkd-cursief a { position: relative; }

  .dkd-link::after,
  .dkd-tekst a::after,
  .dkd-contact-mail::after,
  .dkd-footer-lijst a::after,
  .dkd-cursief a::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -12px; bottom: -12px;
  }

  /* Meer lucht tussen de footerlinks, zodat het vergrote vlak van de een niet
     tegen dat van de buurman aanloopt. Gemeten: met 16px ruimte bleef het
     trefvlak op 30px steken, met 32px haalt het de 36px. */
  .dkd-footer-lijst { gap: var(--space-6); }
  .dkd-contact-blok { gap: var(--space-5); }
}

/* ── 9 · Kleine labels ──────────────────────────────────────────────────────
   De Brand Manual schrijft 11px met .22em voor. Die maat blijft, maar op een
   smal scherm valt zo'n label met die letterafstand uit elkaar over twee
   regels. Alleen de tracking gaat omlaag; de merkmaat blijft. */
@media (max-width: 480px) {
  .dkd-eyebrow { letter-spacing: .14em; }
  .dkd-hero-accent { letter-spacing: .14em; font-size: 12px; }
  .dkd-paginaheader-accent { letter-spacing: .14em; }
  .dkd-kaart-nummer,
  .dkd-stap-nummer { letter-spacing: .14em; }
}

/* ── 10 · Overige ─────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .dkd-sectie,
  .dkd-sectie--krap,
  .dkd-paginaheader { padding-inline: var(--space-5); }
  .dkd-cta-inner,
  .dkd-paginaheader-inner { padding-inline: 0; }
  .dkd-block .dkd-cta-kop { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .dkd-tekenlijst li,
  .dkd-sterlijst li { grid-template-columns: 16px 1fr; gap: var(--space-3); }
}

/* ── 11 · Aanraakvlakken op tablets ─────────────────────────────────────────
   Gemeten: de footerlinks kwamen met een vlak van ±10px op 30–34px uit, omdat
   de buurman ernaast begon. Meer tussenruimte geeft het vlak de kans te groeien. */
@media (max-width: 1250px) {
  .dkd-footer-lijst { gap: var(--space-5); }
  .dkd-contact-blok { gap: var(--space-4); }
}

/* De navigatie-aanraakvlakken staan in Additional CSS, samen met de rest
   van de header. Daar laadt de regel na deze, dus alleen daar wint hij. */