/* ============================================================
   responsive.css — all @media rules for the site
   ------------------------------------------------------------
   index.html and services.html share these class names, so most
   rules apply to BOTH pages. Page-specific selectors are tagged
   [index] / [services] in comments.

   BREAKPOINT SCALE (max-width, desktop-first):
     1024px  large tablet / small laptop  → collapse 2-column layouts
      768px  tablet portrait              → card grids → 1 col, hide nav links
      640px  large phone                  → compact spacing, stack bars
      480px  small phone                  → type down-scale, full-width CTAs,
                                            compact fixed nav

   Blocks are ordered widest → narrowest so narrower screens inherit
   and override wider ones through normal source-order cascade.
   Keep this file limited to @media rules; base styles live in
   shared.css / index.css / services.css.
   ============================================================ */

/* ============================================================
   ≤ 1024px — large tablet / small laptop
   Two-column hero and content sections fold to a single column;
   dense card grids step down to two columns; the nav collapses to
   the hamburger menu (the full horizontal nav stops fitting here).
   ============================================================ */
@media (max-width: 1024px) {
    /* Hero */
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-geo {                 /* [index] decorative background blob */
        display: none;
    }

    .hero-form-wrap {           /* [index] */
        max-width: 520px;
    }

    /* Content sections */
    .value-grid {               /* [index] */
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .intro-inner {              /* [services] */
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-grid {               /* both */
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-photo {              /* [index] */
        max-width: 480px;
    }

    /* Card grids → 2 columns */
    .services-grid {            /* both */
        grid-template-columns: repeat(2, 1fr);
    }

    .usp-grid,                  /* [index] */
    .usps-grid,                 /* [services] */
    .cert-items {               /* [services] */
        grid-template-columns: repeat(2, 1fr);
    }

    /* Process timeline: the 5 steps don't divide evenly into a fixed column
       count, so wrap them and CENTER any incomplete row (no orphaned, left-
       aligned steps). Hide the connecting line once it's no longer a row. */
    .process-steps {            /* both */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 36px 24px;
    }

    .process-step {             /* both */
        flex: 0 1 200px;
    }

    .process-steps::before {
        display: none;
    }

    /* ----- Navigation: collapse to the hamburger menu -----
       The full horizontal nav (logo + 5 links + phone + Free Quote)
       stops fitting below ~1024px, so we switch to the hamburger from
       here down. The section links become a dropdown panel toggled by
       .nav-open (assets/js/nav.js); the standalone phone is hidden so
       the bar can't crowd (tap-to-call still lives in the hero, the
       CTA sections, and the footer). */
    .nav-phone {
        display: none;
    }

    .nav-toggle {
        display: flex;
        margin-left: 6px;
    }

    .nav-cta {
        margin-left: auto;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 0 10px;
        background: #ffffff;
        border-bottom: 1px solid #e6ebf2;
        box-shadow: 0 14px 22px rgba(7, 17, 27, 0.07);
        /* closed state — kept in the DOM for a11y, hidden from view */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        pointer-events: none;
    }

    .nav-open .nav-links {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-links li + li {
        border-top: 1px solid #f0f3f7;
    }

    .nav-links a {
        display: block;
        padding: 14px 24px;
        font-size: 0.95rem;
    }

    /* Services dropdown → inline accordion inside the mobile menu.
       "Services" link + caret share a row; submenu expands below on tap. */
    .nav-dropdown {
        flex-wrap: wrap;
    }

    .nav-dropdown > a {
        flex: 1;
    }

    .nav-dropdown-toggle {
        width: 48px;
        height: 48px;
        color: #4a6a8a;
    }

    .nav-submenu {
        position: static;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .nav-submenu::before {
        content: none;
    }

    .nav-dropdown.open .nav-submenu {
        display: block;
    }

    .nav-submenu a {
        padding: 12px 24px 12px 40px;
        font-size: 0.9rem;
    }
}

/* ------------------------------------------------------------
   Component tweak — Klarna promo card (off-scale, ≤ 900px)
   The card is over-padded on mid-width screens before the
   layout fully collapses; ease its inner padding early.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .klarna-card {              /* both */
        padding: 36px 24px;
    }
}

/* ============================================================
   ≤ 768px — tablet portrait
   Card grids collapse to a single column and the hamburger bar is
   compacted (logo/button/gutters). Vertical rhythm tightens while
   each page keeps its own horizontal gutter, so content never
   touches the screen edge.
   ============================================================ */
@media (max-width: 768px) {
    /* Reduce vertical rhythm ONLY — horizontal padding is left to
       each page (services: the section; index: .container), so we
       never accidentally strip the side gutters. */
    section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    /* Single-column card grids */
    .services-grid,             /* both */
    .usp-grid,                  /* [index] */
    .reviews-grid,              /* both */
    .faq-grid {                 /* [index] */
        grid-template-columns: 1fr;
    }

    /* Process: it's a centered flex-wrap from ≤1024 — on phones force each
       step to a full-width row so it stacks to one centered column. */
    .process-steps {
        gap: 28px;
    }

    .process-step {
        flex-basis: 100%;
        max-width: 340px;
    }

    .cert-badges {              /* [index] flex row → column */
        flex-direction: column;
    }

    .cta-buttons {              /* [index] */
        flex-direction: column;
        align-items: center;
    }

    /* Photo gallery → 2-up [index] */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }

    .gallery-item:nth-child(1),
    .gallery-item:nth-child(5) {
        grid-row: span 1;
    }

    /* Tighten the now-hamburger bar so the logo + Free Quote + toggle
       stay comfortable on phones. (The collapse to the hamburger
       itself happens at ≤1024px, above.) */
    nav {
        padding: 0 16px;
    }

    .nav-inner {
        height: 72px;
    }

    /* Nav is 72px in the flow here — hero fills the rest of the viewport. */
    #hero {
        min-height: calc(100vh - 72px);
        padding: 0;
    }

    .hero-inner {
        padding: 40px 16px;
    }

    .nav-logo img {
        height: 54px;
    }

    .nav-cta .btn--gold {
        padding: 9px 14px;
        font-size: 0.78rem;
    }

    /* Footer → single column */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   ≤ 640px — large phone
   Remaining multi-column grids go single column; horizontal bars
   stack; the hero clears the fixed nav.
   ============================================================ */
@media (max-width: 640px) {
    .usps-grid,                 /* [services] */
    .cert-items,                /* [services] */
    .icon-row {                 /* [services] */
        grid-template-columns: 1fr;
    }

    /* Gallery → single column (both) */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid .gallery-item {
        grid-column: span 1 !important;
    }

    /* Hero clearance/centering is handled in the ≤768 block (nav is still
       72px here), so it stays equal top/bottom — nothing to override. */

    /* Horizontal bars stack (both) */
    .cta-bar-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Shorter location map on phones (both pages) */
    .map-embed {
        height: 340px;
    }

    /* Instant-Quote modal: take the full screen on phones (shared) */
    .quoter-modal {
        padding: 0;
    }

    .quoter-dialog {
        max-width: none;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    .quoter-header {
        padding: 16px 18px;
    }

    .quoter-body {
        flex: 1;
        height: auto;
    }
}

/* ============================================================
   ≤ 480px — small phone
   Compact the fixed nav so it never overflows, down-scale the
   hero headline, tighten form/card padding, and make CTAs
   full-width for comfortable tapping.
   ============================================================ */
@media (max-width: 480px) {
    /* Compact the fixed nav further on small phones. */
    .nav-inner {
        height: 68px;
    }

    .nav-logo img {
        height: 46px;
    }

    .nav-cta {
        gap: 10px;
    }

    /* Nav shrinks to 68px in the flow here — hero fills the rest of the viewport. */
    #hero {
        min-height: calc(100vh - 68px);
        padding: 0;
    }

    .hero-inner {
        padding: 32px 16px;
    }

    .hero-h1 {                  /* both — overrides each page's clamp */
        font-size: clamp(1.95rem, 8.5vw, 2.6rem);
    }

    /* Tighter hero form / card padding */
    .hero-form-wrap,            /* [index] */
    .hero-form-card {           /* [services] */
        padding: 28px 20px;
    }

    /* Full-width, stacked CTAs for easy tapping (both pages) */
    .cta-buttons,               /* [index] */
    .cta-btns {                 /* [services] */
        flex-direction: column;
        align-items: stretch;
    }

    .cta-buttons .btn,
    .cta-btns .btn,
    .cta-bar-inner .btn {
        width: 100%;
        text-align: center;
    }

    /* Shorter map on small phones (both pages) */
    .map-embed {
        height: 280px;
    }
}

/* PPF packages grid */
@media (max-width: 1024px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 640px) { .pkg-grid { grid-template-columns: 1fr; } .pkg-photo { height: 220px; } }