/* =============================================================================
   Responsive overrides — mobile-first breakpoints.
   Verified for horizontal overflow, header fit and grid behaviour at
   320, 360, 375, 414, 560, 768, 1024, 1100, 1180, 1200, 1280, 1366, 1440
   and 1600px.

   Breakpoint map:
     <480    phone     — compact logo lockup
     560+              — supporting photo strips go from stacked to a row
     768+    tablet    — two-column grids, side-by-side hero
     1024+   laptop    — three/four/five-column grids, four-column footer
     1200+   desktop   — inline navigation replaces the drawer
     1440+   wide      — wider container, roomier navigation

   Note the navigation switches at 1200, not 1024, while the grids switch at
   1024. With seven nav items, a call-to-action button and a three-line logo
   lockup, the inline navigation does not fit inside the 1180px container
   until roughly 1200px — below that it wrapped onto a second row and pushed
   the header to ~120px tall.
   ========================================================================== */

/* Phones (<480px): the logo lockup carries a third line (the tagline), so the
   type is stepped down here — at full size the tagline wrapped to two lines
   and the lockup collided with the menu button on 320px screens. */
@media (max-width: 479px) {
    .site-logo { gap: var(--space-2); }
    .site-logo__mark { width: 38px; height: 38px; }
    .site-logo__name { font-size: 1.5rem; }
    .site-logo__sub { font-size: 0.58rem; letter-spacing: 0.11em; }
    .site-logo__tagline { font-size: 0.58rem; letter-spacing: 0.05em; margin-top: 0.18rem; }
}

/* Small phones (~360px+): tighten container padding slightly */
@media (max-width: 374px) {
    :root { --container-pad: var(--space-4); }
    h1 { font-size: 1.8rem; }
}

/* Phone and small-tablet adjustments (<768px) */
@media (max-width: 767px) {
    /* A 21:9 banner collapses to a ~120px sliver on a phone, which reads as a
       stripe rather than a photograph — give it a normal widescreen crop until
       there is enough width for the wide format to work. */
    .media-figure img { aspect-ratio: 16 / 9; }

    /* The two largest spacing steps are set for desktop, where a 5rem/7rem
       band is a comfortable breath between sections. On a 375px screen the
       same values are a third of the viewport of empty cream, and the page
       turns into a long scroll between paragraphs. Stepping only the top two
       rungs down keeps the proportions of the scale intact — everything below
       --space-8 is already small enough to read the same at both sizes. */
    :root {
        --space-8: 3.5rem;
        --space-9: 4.5rem;
    }

    /* Body copy holds a flat 16px on phones. The base <p> is already 1rem —
       what pushed past it were the eight component overrides below, set for
       desktop where a 1.15-1.22rem lede reads as a considered step up. On a
       375px screen the same values buy nothing (the line just wraps sooner)
       and the page ends up with four different paragraph sizes stacked in one
       scroll. Weight and italics are left alone, so the emphasis those styles
       carry survives the size being levelled. */
    .hero__lede,
    .trust-note,
    .pull-quote,
    .testimonial-feature__quote,
    .testimonial-card__quote,
    .testimonial-card__quote p,
    .testimonial-card__quote p:first-child,
    .u-role-lg {
        font-size: 1rem;
    }

    /* Tap targets (WCAG 2.2 2.5.8). These are all comfortably sized by their
       line-height on desktop where there is a cursor; on a phone the footer
       link columns in particular sat at ~23px with an 8px gap between rows. */
    .footer-col ul a,
    .footer-legal a,
    .breadcrumbs a {
        display: inline-block;
        padding-block: var(--space-2);
    }
    .footer-col ul { gap: 0; }
    .card__link { padding-block: var(--space-2); }
}

/* Three supporting photos stack into a very long column on phones; as soon as
   there is room for a legible thumbnail, run them as a row instead. */
@media (min-width: 560px) {
    .media-strip { grid-template-columns: repeat(3, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* On a phone the lightbox arrows necessarily sit over the edges of the
   photograph (their translucent ink backing keeps them readable there). From
   tablet width there is room to move them clear of it and give the image more
   height. */
@media (min-width: 768px) {
    .lightbox { padding: var(--space-7) var(--space-8); }
    .lightbox__nav--prev { left: var(--space-5); }
    .lightbox__nav--next { right: var(--space-5); }
    .lightbox__img { max-height: 78vh; }
}

/* Tablet and up (~768px) */
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid--4 { grid-template-columns: repeat(2, 1fr); }

    .hero__inner { grid-template-columns: 1.1fr 0.9fr; }
    .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; }
    .cta-band__inner > div { flex: 1; }

    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid .form-field--full,
    .form-grid .form-field--checkbox { grid-column: 1 / -1; }

    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer__bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }

    /* Photograph moves from above the quote to a column beside it. The
       :has() guard keeps quotes with no photograph on a single full-width
       column instead of leaving a 220px hole where the image would be. */
    /* Photograph moves from above the quote to a column beside it. The
       :has() guard keeps quotes with no photograph on a single full-width
       column instead of leaving a hole where the image would be.
       The column widens with the viewport (200 -> 300 -> 360px): at tablet
       width a 300px photo would squeeze the quote into a ~260px ribbon. */
    .testimonial-feature { padding: var(--space-7); gap: var(--space-6); }
    .testimonial-feature:has(.testimonial-feature__media) {
        grid-template-columns: 200px 1fr;
        align-items: center;
    }
    .testimonial-feature__media { width: 100%; }
    .testimonial-feature__quote { font-size: 1.12rem; }
}

/* Laptop and up (~1024px) — content grids only; see the note above for why
   the navigation waits until 1200px. */
@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-5 { grid-template-columns: repeat(5, 1fr); }
    .trust-grid { grid-template-columns: repeat(5, 1fr); }
    .trust-grid--4 { grid-template-columns: repeat(4, 1fr); }

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

    .testimonial-feature:has(.testimonial-feature__media) { grid-template-columns: 300px 1fr; }

    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop and up (~1200px): reveal the inline navigation, hide the drawer. */
@media (min-width: 1200px) {
    /* The logo lockup is three lines tall; without this the flex header
       squeezes it and both the descriptor and the tagline wrap onto second
       lines. Let the navigation absorb the pressure instead. */
    .site-logo { flex-shrink: 0; }
    .site-logo__sub,
    .site-logo__tagline { white-space: nowrap; }

    .nav-toggle { display: none; }
    .nav-scrim { display: none; }
    .primary-nav {
        position: static;
        inset: auto;
        background: none;
        flex-direction: row;
        align-items: center;
        gap: var(--space-5);
        padding: 0;
        transform: none;
        overflow: visible;
        width: auto;
        /* The drawer is hidden by `visibility` below 1200px; both of these have
           to be unwound here or the inline navigation never paints and the
           header is left with a 100dvh-tall invisible child. */
        visibility: visible;
        height: auto;
    }
    .primary-nav__link { padding: var(--space-2) 0; }
    .primary-nav__list {
        flex-direction: row;
        align-items: center;
        /* 1rem, not 1.5rem: nine links plus the CTA measure exactly the
           available 1132px at a 1200px viewport with the wider gap, leaving
           nothing for a font fallback that renders a hair wider. The 1440px
           block below restores a roomier gap once the container widens. */
        gap: var(--space-4);
        margin: 0;
    }
    .primary-nav__link {
        position: relative;
        color: var(--color-ink);
        font-size: 0.92rem;
        padding: var(--space-2) 0;
        border-bottom: 2px solid transparent;
        transition: color var(--transition-fast);
    }
    .primary-nav__link::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: -2px;
        height: 2px;
        background: var(--color-accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition-base);
    }
    .primary-nav__link:hover,
    .primary-nav__link.is-active { color: var(--color-accent-deep); }
    .primary-nav__link:hover::after,
    .primary-nav__link.is-active::after { transform: scaleX(1); }
    .nav-cta { margin-left: var(--space-2); padding: 0.7rem 1.2rem; font-size: 0.9rem; }

    /* --- Dropdown (About) ------------------------------------------------ */
    /* The parent stays a plain link to its own page; the chevron beside it is
       what opens the panel, so "About" is never a dead label that has to be
       hovered before it can be reached. Hover opens it for a mouse,
       :focus-within for the keyboard, and .is-open for a click or tap on the
       chevron (main.js) — a touch device gets no hover at all. */
    .primary-nav__item { flex-direction: row; align-items: center; gap: 0.15rem; position: relative; }

    .primary-nav__toggle {
        display: grid;
        place-items: center;
        width: 22px; height: 22px;
        padding: 0;
        border: none;
        background: none;
        color: var(--color-ink);
        cursor: pointer;
    }
    .primary-nav__toggle:hover { color: var(--color-accent-deep); }
    /* Chevron drawn from a rotated square, so there is no icon font or extra
       request for one 6px glyph. */
    .primary-nav__chevron {
        width: 6px; height: 6px;
        margin-top: -3px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--transition-fast);
    }
    .primary-nav__toggle[aria-expanded="true"] .primary-nav__chevron {
        margin-top: 2px;
        transform: rotate(-135deg);
    }

    .primary-nav__submenu {
        position: absolute;
        top: 100%;
        left: calc(var(--space-4) * -1);
        z-index: 60;
        min-width: 216px;
        /* Bridges the gap between the link and the panel so the pointer can
           travel down into it without passing over a dead zone that would
           close the menu. */
        margin-top: var(--space-3);
        padding: var(--space-2);
        background: var(--color-white);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear var(--transition-fast);
    }
    .primary-nav__submenu::before {
        /* Invisible bridge across the margin-top gap above. */
        content: '';
        position: absolute;
        left: 0; right: 0;
        top: calc(var(--space-3) * -1);
        height: var(--space-3);
    }
    /* Deliberately no :focus-within here. Keyboard opening is done in JS
       instead, because :focus-within cannot be dismissed: Escape closes the
       panel and returns focus to the chevron, which is inside the item, so the
       selector would immediately match again and reopen it. */
    .primary-nav__item--has-children:hover .primary-nav__submenu,
    .primary-nav__item--has-children.is-open .primary-nav__submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s;
    }

    .primary-nav__sublink {
        color: var(--color-ink);
        font-family: var(--font-body);
        font-size: 0.9rem;
        white-space: nowrap;
        padding: var(--space-3) var(--space-4);
        border-bottom: none;
        border-radius: var(--radius-sm);
        transition: background var(--transition-fast), color var(--transition-fast);
    }
    .primary-nav__sublink:hover,
    .primary-nav__sublink.is-active {
        background: var(--color-paper-alt);
        color: var(--color-accent-deep);
    }
}

/* Large desktop (~1440px): the container widens, so the navigation can too. */
@media (min-width: 1440px) {
    :root { --container-max: 1280px; }
    .hero__inner { gap: var(--space-9); }

    .primary-nav,
    .primary-nav__list { gap: var(--space-6); }
    .primary-nav__link { font-size: 0.98rem; }
    .nav-cta { padding: 0.8rem 1.65rem; font-size: 0.96rem; }

    /* Still under the photo's native 460px, so it stays sharp. */
    .testimonial-feature:has(.testimonial-feature__media) { grid-template-columns: 360px 1fr; }
}

/* Drawer sizes only. The closed drawer is taken out of the tab order and the
   accessibility tree by `visibility: hidden` (see .primary-nav in style.css),
   which is why there is no pointer-events / aria-hidden bookkeeping here any
   more. Keep the 1199px edge in step with NAV_DESKTOP_MIN_WIDTH in main.js. */