/* ==================================================================
   OZAVION — Responsive overrides
   Mobile-first base lives in style.css / components.css.
   Breakpoints:
     - 1180px : nav collapses (logo + 9 links + CTA need ~1130px)
     - 1024px : tablet / small laptop
     -  768px : tablet portrait
     -  560px : mobile
   ================================================================== */

/* ------------------------------------------------------------------
   <= 1180px  — nav collapses to hamburger
   (keep in sync with NAV_BREAKPOINT in assets/js/main.js)
   ------------------------------------------------------------------ */
@media (max-width: 1180px) {
    /* Switch desktop nav -> mobile drawer */
    .nav--desktop { display: none; }
    .nav--mobile  { display: block; }
    .nav-toggle   { display: flex; }

    /* Hide the inline "Talk to Us" in the header (it lives in the drawer) */
    .site-header__actions .btn { display: none; }
}

/* ------------------------------------------------------------------
   <= 1024px  — tablet / small laptop
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .site-footer__brand { grid-column: 1 / -1; max-width: none; }
}

/* ------------------------------------------------------------------
   <= 768px  — columns stack
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Layout collapse */
    .two-col { grid-template-columns: 1fr; }
    .two-col--media-first .two-col__media { order: 0; }

    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: 1fr; }

    .site-footer__grid { grid-template-columns: 1fr 1fr; }

    .section-header { margin-bottom: var(--space-6); }
}

/* ------------------------------------------------------------------
   <= 560px  — mobile
   ------------------------------------------------------------------ */
@media (max-width: 560px) {
    :root { --header-height: 64px; }

    .hero__actions { width: 100%; }
    .hero__actions .btn { flex: 1 1 auto; }

    .stats-grid { grid-template-columns: 1fr 1fr; }

    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__bar { flex-direction: column; align-items: flex-start; }

    .cta-block { padding: var(--space-7) var(--space-5); }
}

/* ------------------------------------------------------------------
   Larger screens — allow desktop nav to breathe
   ------------------------------------------------------------------ */
@media (min-width: 1181px) {
    .nav--mobile,
    .nav-backdrop { display: none !important; }
}