/* ==========================================================================
   DOEL Tanzania — Responsive Overrides
   Mobile-first base lives in style.css; these are min-width upgrades.
   ========================================================================== */

/* ---- Small tablet (≥ 640px) ---- */
@media (min-width: 640px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .disclaimer-box ul { grid-template-columns: repeat(2, 1fr); }
    .hero__actions .btn { flex: 0 0 auto; }
    .cta-band { padding: 72px 64px; }
}

/* ---- Tablet / nav breakpoint (≥ 860px) ---- */
@media (min-width: 860px) {
    .site-nav__toggle { display: none; }
    .site-nav__actions > .btn { display: inline-flex; }
    .site-nav__links {
        position: static; inset: auto; background: none; backdrop-filter: none;
        transform: none; overflow: visible;
    }
    .site-nav__links ul { flex-direction: row; align-items: center; padding: 0; gap: 4px; }
    .site-nav__links a { font-size: 0.92rem; padding: 10px 16px; }
    .site-nav__links .nav-mobile-cta { display: none; }

    .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
    .contact-layout { grid-template-columns: 0.85fr 1.15fr; }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }

    .process-item { grid-template-columns: 64px 1fr; }
}

/* ---- Desktop (≥ 1000px) ---- */
@media (min-width: 1000px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }

    .hero { padding-top: calc(var(--nav-h) + 96px); }
    .hero__columns { grid-template-columns: 1.05fr 0.95fr; gap: 72px; }
    .hero__stats { grid-template-columns: repeat(4, 1fr); }
    .hero__title { max-width: 13ch; }

    .process-item { grid-template-columns: 96px 1fr; }
    .process-item__node { width: 72px; height: 72px; }

    .includes-strip { justify-content: space-between; }
}

/* ---- Large desktop (≥ 1240px) ---- */
@media (min-width: 1240px) {
    .section { padding-block: 112px; }
    .hero { padding-bottom: 120px; }
}