/* ============================================================
   Responsive design — intentional re-arrangements, not shrinks.
   Targets: 1440 / 1280 / 1024 / 768 / 430 / 375.
   Loaded last so overrides win naturally.
   ============================================================ */

/* ---------- ≤1280px — laptop ----------
   Slightly tighter canvas; grids keep their shapes. */
@media (max-width: 80rem) {
    :root {
        --container-max: 72rem;
        --space-7: 7rem;
    }
}

/* ---------- ≤1024px — tablet landscape ----------
   4-up rows become 2-up; asymmetric splits soften. */
@media (max-width: 64rem) {
    :root {
        --space-6: 4.5rem;
        --space-7: 5.5rem;
    }

    .card-grid,
    .card-grid--4 { grid-template-columns: repeat(2, 1fr); }

    .split-editorial,
    .split-editorial--flip { grid-template-columns: 1fr 1fr; gap: var(--space-4); }

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

    /* Finder: 2×2 fields, full-width search */
    .finder__form { grid-template-columns: 1fr 1fr; }
    .finder__submit { grid-column: span 2; }

    .filter-form__grid { grid-template-columns: 1fr 1fr; }
    .check-list--cols { columns: 1; }

    .feature-panel--split { grid-template-columns: 1fr; }
    .feature-panel__media { order: -1; aspect-ratio: 16 / 9; }

    /* Journey: 2-up regardless of configured column count */
    .journey { --journey-cols: 2; }

    /* 12-col grid: wide spans become full rows */
    .col-7, .col-8, .col-9, .col-10, .col-11 { grid-column: span 12; }
    .col-5, .col-6 { grid-column: span 6; }

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

/* ---------- ≤768px — tablet portrait ----------
   Navigation becomes a slide-in drawer; single-column
   storytelling begins. */
@media (max-width: 48rem) {
    .site-header__actions { display: none; }
    .site-header__toggle { display: flex; }
    .site-header__brand { font-size: 1.1rem; }

    /* Slide-in drawer */
    .site-nav {
        position: fixed;
        inset: 0;
        z-index: var(--z-nav);
        background: var(--color-bg);
        color: var(--color-ink);
        padding: 5rem var(--gutter) var(--space-4);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition:
            transform var(--duration-fast) var(--ease-out),
            visibility 0s linear var(--duration-fast);
        display: block;
    }

    .site-nav.is-open {
        transform: none;
        visibility: visible;
        transition:
            transform var(--duration-fast) var(--ease-out),
            visibility 0s;
    }

    /* Keep the toggle above the open drawer */
    .site-header__toggle {
        position: relative;
        z-index: calc(var(--z-nav) + 1);
    }

    .site-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .site-nav__item {
        border-bottom: 1px solid var(--color-border);
    }

    .site-nav__row {
        justify-content: space-between;
        gap: var(--space-2);
    }

    .site-nav__link {
        font-size: 1.15rem;
        font-weight: var(--weight-semibold);
        padding-block: 0.9rem;
        flex: 1;
    }

    .site-nav__link::after { display: none; }

    /* Expandable submenu groups */
    .site-nav__subtoggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        border: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    .site-nav__subtoggle span {
        transition: transform var(--duration-fast) ease;
    }

    .site-nav__subtoggle[aria-expanded="true"] span {
        transform: rotate(180deg);
    }

    .site-nav__sub {
        display: none;
        padding: 0 0 var(--space-2) var(--space-2);
    }

    .site-nav__item.is-open .site-nav__sub { display: block; }

    .site-nav__sublink {
        display: block;
        padding-block: 0.55rem;
        font-size: 1rem;
        color: var(--color-muted);
    }

    .site-nav__sublink.is-active,
    .site-nav__sublink:hover { color: var(--color-ink); }

    /* Drawer CTA */
    .site-nav__cta {
        display: block;
        padding-top: var(--space-3);
        text-align: center;
    }

    .site-nav__cta .btn {
        width: 100%;
        justify-content: center;
        padding-block: 1rem;
    }

    /* Body scroll lock while the drawer is open */
    html.nav-locked,
    html.nav-locked body {
        overflow: hidden;
    }

    /* Content flows as a single column with full-width cards */
    .card-grid,
    .card-grid--2,
    .card-grid--4 { grid-template-columns: 1fr; }

    .split-editorial,
    .split-editorial--flip { grid-template-columns: 1fr; }

    /* Image leads on mobile: media block moves above text */
    .split-editorial__media { order: -1; aspect-ratio: 4 / 3; }

    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6 { grid-column: span 12; }
    .offset-1, .offset-2, .offset-3 { grid-column-start: auto; }

    .stat-strip { grid-template-columns: 1fr; gap: var(--space-3); }

    /* Finder, filters and journey collapse to a single column.
       Journey uses the custom property so an inline column count from
       the editorial template cannot override it. */
    .finder__form { grid-template-columns: 1fr; }
    .finder__submit { grid-column: auto; }
    .filter-form__grid { grid-template-columns: 1fr; }
    .journey { --journey-cols: 1; }

    /* Sticky enquiry bar appears on small screens */
    .sticky-cta { display: flex; }
    body:has(.sticky-cta) .site-footer { padding-bottom: 6rem; }

    .design-hero__row { flex-direction: row; }

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

    /* Overlap softens on small screens */
    .section--overlap { margin-top: calc(-1 * var(--space-5)); }

    .hero { min-height: 78vh; }

    /* ---- Detail-page hero spec row ----
       Holds specs on design pages and a full street address on display,
       package and completed-home pages. The desktop gap is far too wide
       once these wrap, and long addresses need to break. */
    .spec-bar {
        gap: 0.35rem 1rem;
        font-size: var(--text-small);
    }

    .spec-bar strong {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

    /* ---- Label/value tables ----
       dt and dd sit on one row with space-between, which squeezes badly
       once the value is a full address or a long design name. Stack. */
    .spec-table > div {
        flex-direction: column;
        gap: 0.1rem;
        padding-block: 0.55rem;
    }

    .spec-table dd { overflow-wrap: anywhere; }

    /* ---- Testimonials ---- desktop padding is oversized on a phone */
    .card--testimonial { padding: var(--space-3); }
    .testimonial-slider .card__quote { font-size: 1.05rem; }

    /* ---- Lightbox ---- keep the close button clear of the image */
    .lightbox { padding: 3rem 0.5rem 1rem; }
    .lightbox__close { top: 0; right: 0.5rem; }
    .lightbox img { max-height: 70vh; }

    /* ---- Long unbreakable strings ----
       Emails, URLs and long design names must never force the page wide. */
    .card__title,
    .card__excerpt,
    .card__subtitle,
    .glossary__item dt,
    .lead-details dd,
    .breadcrumbs,
    .prose p,
    .panel__body p {
        overflow-wrap: break-word;
    }
}

/* ---------- ≤430px — mobile ----------
   Full-bleed cards, stacked actions, roomier tap targets. */
@media (max-width: 27rem) {
    :root {
        --space-6: 3.5rem;
        --space-7: 4.5rem;
        --grid-gap: 1rem;
    }

    .hero__actions .btn,
    .cta-band__actions .btn {
        width: 100%;
        justify-content: center;
        padding-block: 1rem;
    }

    .panel { padding: var(--space-3); border-radius: var(--radius-lg); }

    .feature-panel { padding: var(--space-4) var(--space-3); }

    .site-footer { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }

    /* Newsletter field + button must fit a 375px screen without the
       input collapsing to nothing. */
    .pill-form { max-width: none; }
    .pill-form input { min-width: 0; flex: 1 1 auto; }

    /* Section heads stack, so the trailing button should not stretch. */
    .section__head .btn { align-self: flex-start; }

    /* Sticky enquiry bar: give the label room, keep the button compact. */
    .sticky-cta { padding-inline: var(--gutter); gap: var(--space-1); }
    .sticky-cta > div { min-width: 0; }
    .sticky-cta strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sticky-cta .btn { flex-shrink: 0; }

    /* Cards: tighten body padding so text is not squeezed into a column. */
    .card__body { padding: var(--space-2) var(--space-3) var(--space-3); }

    /* Resource cards stay horizontal, with a smaller thumb so the
       title keeps usable width. */
    .card--resource {
        flex-direction: row;
        gap: var(--space-2);
        padding: var(--space-2);
    }
    .card--resource .card__thumb { flex: 0 0 3.25rem; height: 4rem; }

    /* Breadcrumbs on dark heroes: allow a tidy second line. */
    .breadcrumbs ol { gap: 0.25rem; }

    /* Editorial prose inside panels should use the full width. */
    .panel .prose p,
    .panel__body p { max-width: none; }
}

/* ---------- ≤375px — small mobile ---------- */
@media (max-width: 23.5rem) {
    :root {
        --text-display: clamp(2.4rem, 11vw, 2.9rem);
        --gutter: 1.1rem;
    }

    .btn { padding-inline: 1.4rem; }

    /* Page headings on inner pages: keep them from dominating the fold. */
    .hero--page .hero__heading { font-size: clamp(1.9rem, 9vw, 2.4rem); }

    /* Spec chips wrap tightly rather than one item per line. */
    .spec-bar { gap: 0.3rem 0.8rem; }
    .card__meta { gap: 0.3rem 0.7rem; }

    /* Filter and finder controls fill the width cleanly. */
    .filter-drawer__summary { padding: var(--space-2); }
    .filter-form { padding: 0 var(--space-2) var(--space-2); }

    /* Category pills stay readable without overflowing. */
    .category-nav { gap: 0.4rem; }
    .tag { padding: 0.3rem 0.75rem; }

    /* Journey numbers and steps compress slightly. */
    .journey { gap: var(--space-2); }

    /* Testimonial controls remain thumb-sized but closer together. */
    .testimonial-slider__controls { gap: var(--space-1); }

    /* Two-line sticky bar would cover too much of a small screen. */
    .sticky-cta { padding-block: 0.6rem; }
}

/* ---------- Touch devices ----------
   Zoom effects off; hover-only content made persistent;
   tap targets enlarged to a practical minimum. */
@media (hover: none) {
    .img-zoom:hover img,
    a.card:hover .card__media img { transform: none; }

    /* Gallery captions rely on hover — always show them on touch. */
    .card--gallery .card__caption { opacity: 1; }
}

@media (pointer: coarse) {
    .btn--small { padding: 0.65rem 1.15rem; }

    .text-link,
    .site-footer__col a { padding-block: 0.45rem; }
}

/* ---------- Global overflow guard ----------
   No layout should ever cause horizontal page scroll. */
html,
body {
    overflow-x: clip;
}