/* ==========================================================================
   Responsive breakpoint overrides (mobile-first: style.css holds the base/
   small-screen layout, this file adds structure back in as space allows).
   Tested conceptually at 320/375/390/430/768/1024/1280/1440px.
   ========================================================================== */

/* Small phones: tighten a couple of components further */
@media (max-width: 374px) {
    .hero__ctas .btn,
    .mobile-call-bar .btn { font-size: 0.9rem; padding-inline: 1.1rem; }
}

/* Space for the fixed sticky mobile call bar so footer/content isn't hidden behind it */
@media (max-width: 1199px) {
    body { padding-bottom: 68px; }
}

/* Small tablets and up */
@media (min-width: 560px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .trust-bar__inner { grid-template-columns: repeat(3, 1fr); }
    .sector-grid { grid-template-columns: repeat(3, 1fr); }
    .form-row { grid-template-columns: 1fr 1fr; }
}

/* Tablets */
@media (min-width: 700px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Hero side-by-side + timeline horizontal from here up */
@media (min-width: 860px) {
    .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
    .timeline { flex-direction: row; align-items: stretch; }
    .timeline-connector { width: 44px; height: auto; }
    .timeline-connector .icon { transform: none; }
}

/* Desktop navigation breakpoint: switch from hamburger drawer to full nav.
   Deliberately later than 1024px - a logo plus 8 nav labels, a phone number
   and a CTA button in the header needs more like 1200px to fit without
   wrapping or truncation, so 1024/tablet keeps the (already well-tested)
   hamburger header rather than a cramped desktop nav. */
@media (min-width: 1200px) {
    .primary-nav { display: block; }
    .header-ctas { display: flex; }
    .nav-toggle, .mobile-call { display: none; }
    .mobile-nav { display: none; }
    .mobile-call-bar { display: none; }

    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .trust-bar__inner { grid-template-columns: repeat(6, 1fr); }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .sector-grid { grid-template-columns: repeat(3, 1fr); }

    .site-header.is-scrolled { --header-height: 68px; }
    .site-header.is-scrolled .brand__mark { width: 36px; height: 36px; }
}

/* Safety margin just above the cutover, in case a longer future nav label
   makes 1200-1279px tight again. */
@media (min-width: 1200px) and (max-width: 1279px) {
    .brand__text span { display: none; }
    .header-call span { display: none; }
    .header-ctas { gap: 0.5rem; }
}

/* Large desktop: cap how wide flowing text/cards get inside the hero */
@media (min-width: 1440px) {
    :root { --container-width: 1320px; }
}