/*
|--------------------------------------------------------------------------
| RESPONSIVE — every breakpoint on the site, in one file
|--------------------------------------------------------------------------
|
| WHAT THIS FILE IS
|   All of the media queries. Nothing else in the CSS contains an @media rule
|   (apart from print.css and the two accessibility queries in base.css), so
|   when a layout misbehaves at a particular width, this is the only file you
|   have to read.
|
| LOAD ORDER (set in includes/head.php — do not reorder)
|   variables → base → layout → components → pages → responsive → print
|
| HOW IT WORKS
|   The rest of the CSS is written mobile-first: one column, drawer menu,
|   stacked cards. This file only ever *adds* to that as the screen widens.
|   Three breakpoints, and nothing between them:
|
|     768px   — tablet. Wider gutter, two-up grids, the header gains its
|               language switch and call-to-action, the utility bar gains
|               its opening hours.
|     1024px  — laptop. The real desktop layout: horizontal navigation with
|               dropdown panels, three- and four-up grids, sidebars beside
|               their content, four-column footer.
|     1280px  — large desktop. Small polish only: a touch more air. Nothing
|               structural changes here, so the site is safe on any width
|               above 1024px.
|
|   Tested at 320, 375, 768, 1024, 1440 and 1920px — see
|   documentation/RESPONSIVE-TESTING.md.
|
| SAFE TO EDIT
|   Yes. Adding a new breakpoint is discouraged: try to make an existing one
|   work first, so this file stays readable.
*/


/* ===================================================================
 | 768px — TABLET
 =================================================================== */
@media (min-width: 768px) {

    /* Chips and pill badges wrap on a phone (see components.css); from
       tablet up there is room to keep each one on a single line. */
    .chip,
    .pill-badge {
        white-space: nowrap;
    }

    :root {
        /* More room at the edges once the screen can spare it. */
        --gutter: 2rem;
    }

    /* --- Utility bar and header ------------------------------------ */

    .utility-inner {
        justify-content: space-between;
    }

    .utility-hours {
        display: inline-flex;
    }

    .lang-switch,
    .site-header .header-cta {
        display: inline-flex;
    }

    /* --- Grids ------------------------------------------------------ */

    .cols-2,
    .cols-3,
    .cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-grid,
    .study-grid,
    .service-grid,
    .article-grid,
    .process-grid,
    .deliverable-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    /* --- Page blocks ------------------------------------------------ */

    .featured-article {
        grid-template-columns: minmax(0, 1fr) 14rem;
        align-items: center;
    }

    .featured-mark {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding-top: 0;
        padding-left: var(--space-5);
        border-top: 0;
        border-left: 1px solid var(--line);
    }

    .study-row-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cta-actions {
        flex-wrap: nowrap;
    }

    /* --- Calculator -------------------------------------------------- */

    .calc-tier,
    .calc-choice {
        grid-template-columns: minmax(0, 1fr) 12rem;
        align-items: center;
        gap: var(--space-5);
    }

    .calc-choice {
        grid-template-columns: 1fr;
    }

    .calc-tier-side {
        justify-items: end;
        text-align: right;
    }
}


/* ===================================================================
 | 1024px — LAPTOP AND UP (the desktop layout)
 =================================================================== */
@media (min-width: 1024px) {

    /* --- Navigation: drawer out, horizontal menu in ----------------- */

    .site-nav {
        display: block;
    }

    .menu-button {
        display: none;
    }

    /* Belt and braces: if the drawer was open when the window was
       widened, it must not be left hanging over the page. */
    .mobile-menu {
        display: none;
    }

    /* --- Grids ------------------------------------------------------ */

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

    .cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .stat-grid,
    .article-grid,
    .study-grid,
    .process-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .service-grid,
    .deliverable-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tier-grid {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }

    /* --- Two-column layouts ----------------------------------------- */

    /* 7/5: the wider half carries the argument, the narrower one the
       supporting panel. */
    .split-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-8);
        align-items: start;
    }

    .split-even {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
        align-items: start;
    }

    /* The column that stays put while the other scrolls. The offset
       clears the sticky header. */
    .split-sticky {
        position: sticky;
        top: calc(4.25rem + var(--space-5));
    }

    .article-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: var(--space-8);
        align-items: start;
    }

    .article-aside {
        position: sticky;
        top: calc(4.25rem + var(--space-5));
    }

    /* --- Hero ------------------------------------------------------- */

    .hero-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-8);
    }

    /* The column itself is the constraint from here up, so the headline is
       allowed to use all of it instead of wrapping every two words. */
    .hero-copy {
        max-width: none;
    }

    .home-hero .hero-lead {
        max-width: 46ch;
    }

    /* --- Page blocks ------------------------------------------------ */

    .service-row,
    .study-row {
        grid-template-columns: minmax(0, 1fr) 18rem;
        gap: var(--space-7);
        align-items: start;
    }

    .service-row-aside,
    .study-row-metrics {
        padding-top: 0;
        padding-left: var(--space-7);
        border-top: 0;
        border-left: 1px solid var(--line);
    }

    .study-row-metrics {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .sample-totals {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    /* --- CTA band and footer ---------------------------------------- */

    .cta-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-7);
        align-items: center;
    }

    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
        gap: var(--space-7);
    }

    .footer-legal-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* --- Calculator: inputs on the left, sticky estimate on the right - */

    .calc-grid {
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: var(--space-8);
    }

    .calc-summary {
        position: sticky;
        top: calc(4.25rem + var(--space-5));
    }

    .calc-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ===================================================================
 | 1280px — LARGE DESKTOP (polish only)
 =================================================================== */
@media (min-width: 1280px) {

    :root {
        --gutter: 2.5rem;
    }

    .split-grid,
    .article-layout {
        gap: calc(var(--space-8) + var(--space-4));
    }

    .service-row,
    .study-row {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }
}