/* ==========================================================================
   Super Junk Bros — Responsive layer

   Loaded after styles.css. Mobile-first: min-width and capability queries
   only, plus two documented narrow exceptions (very small phones and short
   landscape). Base rules for the narrowest screen live in styles.css.

   Checked at 320 / 360 / 375 / 390 / 412 / 430 / 768 / 1024 / 1280 / 1440 /
   1920 px.
   ========================================================================== */

/* --- Very small phones (<=359px) -----------------------------------------
   Exception to mobile-first: reclaims horizontal room on 320px screens so
   "Schedule Assessment" never wraps or clips. */
@media (max-width: 359px) {
    :root {
        --gutter: 1.125rem;
        --btn-padding-x: 1rem;
        --btn-font-size: 1rem;
        --tracking-label: 0.12em;
    }
}

/* --- Tablets and up (>=600px) --------------------------------------------
   The CTAs stay stacked at every width; the column just gets a little wider
   so the buttons do not look starved next to the display type. */
@media (min-width: 37.5em) {
    .cta-group { max-width: 26rem; }
}

/* --- Desktop (>=1024px): more room, slightly larger controls ------------- */
@media (min-width: 64em) {
    :root {
        --btn-min-height: 3.75rem;
        --btn-font-size: 1.125rem;
    }

    .hero { padding-block: var(--space-2xl); }
    .cta-group {
        gap: var(--space-md);
        max-width: 28rem;
    }
}

/* --- Large desktop (>=1440px): let the composition breathe, not grow ----- */
@media (min-width: 90em) {
    .hero__title { margin-bottom: var(--space-lg); }
}

/* --- Coarse pointers: bigger targets regardless of viewport width -------- */
@media (pointer: coarse) {
    :root { --btn-min-height: 3.5rem; }
}

/* --- Short viewports (<=44em tall) --------------------------------------
   Exception to mobile-first: on a 640px-tall phone the badge plus the full
   stack would push the CTAs under the fold, so the badge gives up height
   first. All three stay visible without scrolling. */
@media (max-height: 44em) {
    .hero__logo { height: clamp(5rem, 18vh, 8rem); }
    .hero { padding-block: var(--space-lg); }
    .hero__subtitle { margin-bottom: var(--space-lg); }
}

/* --- Short landscape phones ----------------------------------------------
   Exception to mobile-first: on a ~360px-tall viewport the full stack would
   push the CTAs below the fold, so the composition compresses instead. The
   buttons stay stacked; the page sheds everything else it can. */
@media (max-height: 30em) and (orientation: landscape) {
    .site-header { padding-block: var(--space-sm); }
    .hero { padding-block: var(--space-lg); }
    .hero__logo { display: none; }
    .hero__title { margin-bottom: var(--space-sm); }
    .hero__subtitle { display: none; }

    /* Three stacked buttons need the height back from somewhere: the row
       gap tightens and the controls give back the coarse-pointer bonus
       set above, which still leaves them above the 44px minimum target. */
    .cta-group { gap: var(--space-xs); }
    :root { --btn-min-height: 2.875rem; }
}

/* --- Portrait screens: the map is landscape, the screen is not -----------
   Fitting a 4:3 image into a tall viewport leaves deep empty bands. Going
   edge to edge buys back every pixel of width, and centring the map with its
   note as one group keeps the bands as framing rather than as a gap the
   caption fell out of. */
@media (orientation: portrait) {
    .map { justify-content: center; }

    .map__figure {
        flex: 0 0 auto;
        padding: 0;
    }

    .map__figure img {
        height: auto;
        max-height: 100%;
    }

    .map__note { padding-block: var(--space-lg) var(--space-md); }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
    body { background: #fff; color: #000; }
    .skip-link { display: none; }
    .btn { box-shadow: none; }
}