/* ═══════════════════════════════════════════════════════════════════════
   CHASKA COFFEE ROASTERS — responsive.css
   Breakpoints only. style.css carries the 360px mobile-first base; every
   rule in this file lives inside one of exactly four min-width queries:

        480px   ·   768px   ·   1024px   ·   1440px

   NOTHING OUTSIDE A MEDIA QUERY. No colour that is not a token, no font
   stack, no shadow, no new component, no !important.

   ── grid-template-areas ────────────────────────────────────────────────
   CHECKED, and the answer is no: style.css declares grid-template-areas
   NOWHERE (it says so itself at §18, and a grep of all 1425 lines returns
   only the two comment lines saying so). There is therefore nothing to
   reset at the desktop breakpoint, and this file deliberately does not
   invent an areas system of its own — the layouts below are all
   line-based or intrinsic, so they cannot reproduce the Swarnika bug where
   a mobile areas map survived into desktop and kept the page stacked.

   ── The 360px overflow question, answered rather than guessed ──────────
   The hero word is --text-hero = clamp(3.5rem, 15vw, 13rem). At 360px the
   15vw term is 54px, below the 3.5rem floor, so the floor is what applies:
   56px. The word is "CHASKA" — six Fredoka capitals at -0.045em tracking,
   roughly 0.62em of advance each, so about 208px against 320px of
   available container width. It fits, and it fits at every width above
   this one too (768px → ~428px of word in ~688px of container; 1440px →
   the 13rem cap, ~774px in a 1280px container).
   Behind that, style.css already sets `overflow-x: clip` on BOTH html and
   body, which is what actually catches the things that genuinely do
   overhang — .drop-splash at inset-inline-end:-18%, .drop-beans at
   min(128vw,62rem), and the second .drop-beans in the merch section, which
   is NOT inside .drop and therefore has no local clip of its own.
   Consequently nothing in this file needs an overflow hack, and every rule
   below is written so it cannot introduce one: the rail keeps its negative
   gutter margin in step with --gutter at every step, and no fixed pixel
   width appears anywhere.

   ── What this file takes over, per style.css §18 ───────────────────────
     480   button rows stop stacking · the drop-nav settles beside the copy
     768   --gutter 2.5rem · mobile bar retires and body padding goes with
           it · the cream split becomes two columns · the merch band gets
           its air · promise tiles pin to 2 across · turntable + copy pair
     1024  --gutter 3.5rem · the REAL nav row appears and the panel and its
           toggle retire · THE DROP resolves — copy bottom-left, tagline
           bottom-right, the cup between them · footer goes 4-up
     1440  --gutter 4.5rem · promise tiles 4 across · the origin rail
           becomes a 5-across grid and stops being a scroller
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   ≥ 480px — LARGE MOBILE
   Two things can now sit side by side. Nothing structural changes.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {

    /* The loose button pairs that sit in a bare <p> — /shop's "Ask us on
       WhatsApp / See the drinks menu", home's "See the full menu / How we
       roast". They are inline-flex pills in a text block, so they need a
       gap of their own.
       Scoped to `p >` deliberately: .hero-actions is already a wrapping
       flex row with `gap: var(--space-sm)` in style.css, and a margin here
       would stack on top of that gap and pull the pair apart. */
    .section p > .btn + .btn {
        margin-inline-start: var(--space-xs);
    }

    /* Cards can afford their full 32px corner's worth of padding. */
    .card-body {
        padding-inline: var(--space-md);
    }

    /* The merch band's two products can share a row this early — they are
       only a render and three words each. */
    .merch-band {
        padding-inline: var(--space-md);
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   ≥ 768px — TABLET
   The sticky mobile bar retires, the gutter grows, and the first real
   two-column layouts appear.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    :root {
        --gutter: 2.5rem;
    }

    /* The mobile call/WhatsApp bar is a phone device. Retiring it and
       zeroing the clearance it reserved must happen in the same query, or
       the page keeps 4.75rem of dead space at the bottom of every screen.
       (style.css §17 flags exactly this pairing.) */
    .mobile-bar {
        display: none;
    }

    body {
        padding-bottom: 0;
    }

    /* ── The cream split ────────────────────────────────────────────────
       home.php emits .cream-split / .cream-copy / .cream-media and marks
       them NEW CLASS; style.css has no rule for any of them, so at 360px
       the section is an honest stack. Two columns is a breakpoint decision
       and therefore this file's, but the base look is not — nothing here
       gives these elements a colour, a border or a corner. */
    .cream-split {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        align-items: center;
        gap: var(--space-lg);
    }

    .cream-copy {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        align-items: flex-start;
        min-width: 0;
    }

    .cream-media {
        min-width: 0;
    }

    .cream-media img {
        width: 100%;
        height: auto;
    }

    /* Four promises, two at a time. The auto-fit base would already give
       two columns here, but only by accident of the 13rem minimum — pin it
       so the row count is a decision rather than an arithmetic outcome. */
    .promise-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md);
    }

    /* The band earns its full padding once there is room for it. */
    .merch-band {
        padding: var(--space-lg) var(--space-md);
        gap: var(--space-lg);
    }

    /* The hero copy stops being a centred column and starts being a block
       of text — still centred as a whole until 1024, where The Drop
       resolves properly. */
    .hero-copy {
        max-width: 46ch;
    }

    /* The footer's four columns pair up before they go 4-across. */
    .site-footer > .container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg) var(--space-md);
    }

    .footer-base > .container {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-xs) var(--space-md);
    }

    /* The contact enquiry stops being one long column of full-width fields.
       Scoped to the contact page on purpose: `.form` is also the class on
       the five grind-picker forms inside the /shop origin cards and on the
       one-field newsletter form, and neither of those wants a two-column
       grid inside a card. header.php puts page-<slug> on <body>, which is
       the only hook that separates them. */
    .page-contact .form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm) var(--space-md);
        align-items: start;
    }

    /* The message box and the submit row still want the whole width. */
    .page-contact .form .field:has(textarea),
    .page-contact .form .field:has(.btn),
    .page-contact .form .form-note,
    .page-contact .form .alert {
        grid-column: 1 / -1;
    }

    /* The origin cards on /shop are full product cards inside .grid — two
       across reads better than three squeezed ones at this width. */
    #catalogue .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   ≥ 1024px — DESKTOP
   The real navigation appears, and THE DROP resolves into the hero the
   DNA describes: copy bottom-left, tagline bottom-right, the cup punching
   through the middle of the word between them.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    :root {
        --gutter: 3.5rem;
    }

    /* ── Navigation ─────────────────────────────────────────────────────
       The link row that style.css hid at 360px comes back, and both halves
       of the mobile mechanism retire together. The .no-js variant is named
       explicitly: effects.css force-opens the panel when scripting is off,
       and that rule is more specific than a bare .nav-panel selector, so
       without this line the expanded panel would survive onto the desktop
       layout underneath a perfectly good nav row. */
    .nav > .nav-list {
        display: flex;
        gap: .25rem;
    }

    .nav-toggle,
    .nav-panel,
    html.no-js .nav-panel {
        display: none;
    }

    html.no-js .site-header {
        position: sticky;
    }

    /* ── THE DROP ───────────────────────────────────────────────────────
       Until now the hero has been a centred stack. Here it becomes the
       real thing. The word and the cup stay in the normal flow — that
       overlap IS the hero, and it is built on .drop-cup's negative
       margin-block-start against --text-hero, which must not be disturbed
       — and the copy and the tagline are lifted out to the two bottom
       corners around them.

       Scoped to .drop throughout. The other four pages use .hero-inner as
       the plain centred column style.css built, and they should keep it. */
    .drop .hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        column-gap: var(--space-lg);
    }

    /* Row 1: the word and the cup span both columns and keep their overlap
       exactly as style.css built it. */
    .drop .hero-title,
    .drop .drop-cup {
        grid-column: 1 / -1;
    }

    .drop .drop-cup {
        width: min(46vw, 30rem);
    }

    /* Bring both splashes IN so each overlaps a side of the cup and the pair
       reads as one arc passing behind it. Out in the corners they looked like
       stray assets. They sit above the bottom row, so they never foul the
       copy or the tagline. */
    .drop .drop-splash {
        top: 34%;
        width: min(31vw, 22rem);
    }

    .drop .drop-splash-r { inset-inline-end: 3%; }
    .drop .drop-splash-l { inset-inline-start: 3%; }

    /* Row 2: copy bottom-LEFT, tagline bottom-RIGHT. */
    .drop .hero-copy {
        grid-column: 1;
        justify-self: start;
        text-align: start;
        max-width: 38ch;
    }

    .drop .hero-actions,
    .drop .drop-nav {
        justify-content: flex-start;
    }

    .drop .drop-tagline {
        grid-column: 2;
        justify-self: end;
        align-self: end;
        text-align: end;
        max-width: 26ch;
    }

    /* ── Sections ───────────────────────────────────────────────────────── */

    /* Three promises across leaves one hanging; four is the set. */
    .promise-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

    /* The menu groups read as a board rather than a list. */
    #espresso-bar .grid,
    #cold .grid,
    #not-coffee .grid,
    #eat .grid,
    #menu-notes .grid,
    #grind .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cream-split {
        gap: var(--space-xl);
    }

    /* Four footer columns, as designed. */
    .site-footer > .container {
        grid-template-columns: minmax(290px, 1.4fr) repeat(3, minmax(0, 1fr));
        gap: var(--space-md) var(--space-lg);
    }

    /* The contact enquiry: name/email and phone share the top rows, the
       message spans. Already handled at 768 — this only widens the gap. */
    .form {
        gap: var(--space-md);
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   ≥ 1440px — LARGE DESKTOP
   The last of the gutter growth, and the one layout that genuinely
   changes shape: the origin rail stops being a scroller.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

    :root {
        --gutter: 4.5rem;
    }

    /* ── The origin rail becomes a grid ─────────────────────────────────
       Five cards fit across a 1280px container at this width, so the
       swipe-rail stops being the right answer. Everything the rail set up
       for scrolling has to be unwound in the same place or it leaves
       artefacts: the negative gutter margin would pull the grid outside
       the container, and a stale scroll-snap-type on a non-scrolling box
       traps the keyboard focus ring mid-card in some browsers.
       style.css §18 says it "snaps correctly either way" — this is the
       either.

       It also has to become a container. The rail is a direct child of
       .section, NOT of .container (home.php puts it outside, so it can
       bleed edge-to-edge on a phone). As a scroller that is right. As a
       grid it would run the full viewport width and its five cards would
       stop lining up with the section heading above them — so the rail
       adopts the container's own max-width, centring and gutter here. */
    .origin-rail {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-md);
        overflow-x: visible;
        scroll-snap-type: none;
        width: 100%;
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .origin-card {
        scroll-snap-align: none;
    }

    /* The rail is no longer a scroll container, so it no longer needs to
       advertise itself as one to the keyboard. */
    .origin-rail:focus-visible {
        outline-offset: 4px;
    }

    /* Four across, one line, no orphan. */
    #catalogue .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .drop .drop-cup {
        width: min(38vw, 34rem);
    }
}