/* NETZERO AQUA — MOBILE CORRECTIONS */
/* =============================================================================
   MOBILE
   =============================================================================
   Everything above is written mobile-first-ish with clamp() and grid, so this
   block is not "the mobile stylesheet" — it is the set of corrections that a
   real phone, held in one hand outdoors, actually needs. Three of them come
   from measuring rather than from taste:

     · Touch targets. WCAG 2.5.8 wants 24x24 CSS px minimum; Apple and Google
       both say 44 and 48. Several inline "Explore X →" links measured 25px
       tall, which is a link you aim at rather than tap.

     · Type floor. Nothing that is a sentence should render below 12px on a
       phone. Several dashboard labels and process captions sat at 11px.

     · Vertical budget. A 76px header plus a 94vh hero means a visitor scrolls
       once before reaching any content. Both come down.

   These are scoped to `pointer: coarse` where they are about fingers, and to
   width where they are about the screen, because a small window on a laptop
   and a phone are not the same problem.

   LOAD ORDER MATTERS. This file must come after na-blocks.css and after the
   per-page stylesheet, because most of what follows overrides a value one of
   those two sets. It is the last stylesheet on every page.
   ========================================================================== */

/* ---- Touch targets ---- */
@media (pointer: coarse) {
    /* Inline card CTAs. The padding does the work; the negative margin keeps
       the visual position identical to the desktop layout, so nothing shifts
       and no card grows a gap it did not have. */
    .na-link {
        min-height: 44px;
        align-items: center;
        padding-block: 0.5rem;
        margin-block: -0.5rem;
    }

    .na-btn { min-height: 48px; }
    .na-btn--sm { min-height: 44px; }

    /* The mark is 34px inside a 64px pill, so there is room to grow the link
       to a real target without changing the bar's height. */
    .na-logo { padding-block: 7px; }


    /* Footer link lists: still a list, but with room between the rows. */
    .na-footer ul { gap: 0.9rem; }
    .na-footer a { display: inline-block; padding-block: 2px; }

    /* Details/summary on the downloads page. */
    .na-app summary { padding: 0.75rem 0; }

    /* The email address on the contact page is a link inside a sentence, but
       it is also the primary action of that card — so it gets a real target
       rather than the inline-link exemption. */
    .na-contacts a {
        display: inline-block;
        min-height: 32px;
        padding-block: 6px;
    }
}

/* ---- Header and hero: buy back vertical space ---- */
@media (max-width: 700px) {
    /* 10px of clearance + a 64px pill. --na-header-h follows it, so every
       hero's top padding comes down with it. */
    :root { --na-bar: 74px; }
    .na-header { padding-top: 10px; }
    .na-bar { height: 64px; }
    .na-header.is-stuck .na-bar { height: 56px; }
    .na-logo img { height: 34px; }
    .na-header.is-stuck .na-logo img { height: 30px; }
}

@media (max-width: 420px) {
    .na-bar { padding: 0 8px 0 14px; }
    .na-logo img { height: 30px; }
}

/* ---- Type floor: nothing that reads as a sentence below 12px ---- */
@media (max-width: 700px) {
    .na-flow__kpi,
    .na-arch__foot,
    .na-dash__paneHead,
    .na-dash__farm,
    .na-legend,
    .na-donut__key li,
    .na-alert span,
    .na-mini__top span,
    .na-record span,
    .na-wq__cell span,
    .na-tele__label,
    .na-farmkpi__cell span,
    .na-dash__kpi > span,
    .na-bignum div > span,
    .na-carbon > span,
    .na-filters__note,
    .na-partners__note { font-size: 0.75rem; }

    .na-note { font-size: 0.8125rem; }
}

/* ---- Rhythm: tighter sections, so a page is scrollable rather than endless -- */
@media (max-width: 560px) {
    :root {
        --na-section: 3.5rem;
        --na-gap: 0.875rem;
    }
    .na-head { margin-bottom: 1.75rem; }
    .na-head p { font-size: 1rem; }
}

/* ---- Stack every remaining two-up on a phone ---- */
@media (max-width: 560px) {
    .na-method,
    .na-terms,
    .na-minis,
    .na-wq,
    .na-split__facts,
    .na-farmkpi__grid { grid-template-columns: 1fr; }

    .na-res li { grid-template-columns: 1fr auto; }
    .na-res em { grid-column: 2; }

    /* The service number sits inline with its tag rather than owning a gutter. */
    .na-service { gap: 0.75rem; }
}

/* ---- Buttons go full width once there is no room for two side by side ---- */
@media (max-width: 560px) {
    /* .na-btn is nowrap by design, so a button never breaks mid-label on a
       desktop toolbar. On a 360px phone that same rule makes "Enquire about
       this project →" a 352px-wide element that pushes its container past the
       viewport — which is what was blowing out the featured-project panel and
       the downloads cards. Below 560px the label is allowed to wrap. */
    .na-btn {
        white-space: normal;
        text-align: center;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .na-btns { gap: 0.625rem; }
    .na-btns > .na-btn { width: 100%; }
    /* except where a row of chips is the point */
    .na-pathway-steps > li,
    .na-filters > .na-filter { width: auto; }
}

/* ---- Dashboards: mockup chrome that still reads at 360px ---- */
@media (max-width: 560px) {
    .na-dash__bar { flex-wrap: wrap; row-gap: 0.25rem; }
    .na-dash__farm { margin-left: 0; width: 100%; }
    .na-pond span { font-size: 0.6875rem; }
    .na-pondmap { gap: 6px; }
}

/* ---- Long headings should not lose words to a hyphen break ---- */
@media (max-width: 480px) {
    h1, h2 { hyphens: none; overflow-wrap: break-word; }
    .na-phero h1 { font-size: clamp(1.875rem, 1.2rem + 4.4vw, 2.5rem); }
    .na-hero h1 { font-size: clamp(2rem, 1.3rem + 4.8vw, 2.75rem); }
}

/* ---- Scroll affordance -----------------------------------------------------
   A row that scrolls sideways has to look like one. The bleed to the viewport
   edge already cuts the last card off, which is the strongest cue; this adds a
   soft fade on the right so the cut reads as "more" rather than "clipped".
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .na-swipe,
    .na-tele {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%);
    }
    /* Once the row is scrolled to the end there is nothing more to hint at,
       but CSS cannot know that — so the fade is kept narrow enough not to
       swallow content, and the cards keep their own padding clear of it. */
    .na-swipe > *:last-child,
    .na-tele > *:last-child { margin-right: 8px; }
}

/* Centre the notes that sit under a centred dashboard rather than leaving them
   hugging the left edge of a full-width column. */
@media (max-width: 700px) {
    .na-note { margin-inline: auto; max-width: 34rem; }
}