/* ==========================================================================
   Never Forgotten — handset and tablet refinements

   The desktop type scale uses clamp() with small minimums so headings shrink
   gracefully. Those minimums bind on a phone, which pushed meta and caption
   copy down to 9–11px — too small to read at arm's length. This raises the
   floor on anything meant to be read, leaves genuinely decorative letterspaced
   eyebrows alone, and grows the interactive targets to a comfortable size.

   Loaded after the other two sheets so these win on specificity ties.
   ========================================================================== */

/* -------------------------------------------------------------- tablet */

@media (max-width: 1024px) {
    /* Fourteen portraits across five columns get cramped before the 820px
       breakpoint; go to four so each face keeps its presence. */
    .nf-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* .nf-stories-grid had an even 1fr / 1fr here, to give the feature and its
       right rail more room at this width before they stacked outright. There is
       no rail any more — the articles sit under the feature at every width — so
       the rule is gone rather than left to fight the base one. */

    /* There was a stray "}" here that closed this media block early, so the
       twenty rules below — every one of them written for a phone, and commented
       as such — applied at EVERY width. The visible cost was on desktop:
       .nf-story-hero's "portrait-ish band on a phone" 25vh beat the desktop
       clamp, .nf-dark-inner kept its 1rem phone gutters, and the touch-target
       minimums padded rows nobody was tapping. The closing brace this block
       always needed is at the end of the phone rules below. */

    .nf-archive-row,
    .nf-listen-chip,
    .nf-story-row {
        min-height: 56px;
    }

    .nf-tile {
        padding: .35rem;
    }

    .nf-cue {
        padding: .35rem .25rem;
        min-height: 44px;
    }

    /* Transport controls need to be thumb-sized, not mouse-sized. */
    .nf-bigplay {
        width: 56px;
        height: 56px;
    }

    .nf-skip {
        min-width: 48px;
        min-height: 48px;
        justify-content: center;
    }

    .nf-tool {
        min-height: 44px;
        /* The fullscreen tool is a single glyph and came out 20px wide. WCAG 2.2
           SC 2.5.8 wants 24 in both directions, not just the tall one. */
        min-width: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 .35rem;
    }

    /*  Navigation links inside the memorial were 14 to 17px tall — the text and
        nothing else. Vertical padding only, so nothing moves visually and the row
        keeps its height, but each one becomes a target a thumb can hit. The
        breadcrumb's own gap keeps the enlarged boxes from overlapping. */
    .nf-crumb a,
    .nf-crumb button,
    .nf-back {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
    }

    /* The scrub track is hard to hit at 4px; keep the visual weight but give
       it a taller hit area. */
    .nf-track {
        padding: 14px 0;
        height: auto;
        background: none;
    }

        .nf-track::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 4px;
            border-radius: 2px;
            background: var(--nf-ground-3);
        }

    .nf-track-fill,
    .nf-track-knob {
        top: 50%;
        transform: translateY(-50%);
    }

    .nf-track-fill {
        height: 4px;
        bottom: auto;
        border-radius: 2px;
    }

    .nf-track-knob {
        width: 14px;
        height: 14px;
        transform: translate(-50%, -50%);
    }

    /* Breadcrumbs wrap rather than push the page sideways. */
    .nf-crumb {
        flex-wrap: wrap;
        row-gap: 0;
    }

    /* The landing stacks; keep the three panels within a screen and a half so
       the third is discoverable without a long scroll. */
    .nf-col {
        min-height: 30vh;
    }

    .nf-mast {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    /* The story hero is a portrait-ish band on a phone, not a letterbox.
       Cut from 46vh with the desktop clamp per Luke 2026-08-10 - reducing only
       the desktop rule would have left phones with the tall header he asked to
       shrink. */
    .nf-story-hero {
        min-height: 25vh;
    }

    /*  No override needed any more. This used to pin the breadcrumb with
        top/left because the crumb was absolutely positioned and the hero was
        justify-content:flex-end, which otherwise dropped it to the BOTTOM of the
        image, above the kicker — the placement Luke marked for moving on
        2026-08-10. The interior sheet now puts the crumb in normal flow at the
        top of a space-between hero and centres it on the shared measure, so it
        sits correctly at every width by construction. Re-adding top/left here
        would only shift it off that measure. */

    /*  .nf-dark-inner used to add 1rem of horizontal padding here, on top of a
        width that had ALREADY subtracted a 1rem gutter — so on a phone the
        memorial's content started at x=32 while the header above it started at
        x=16. A second gutter, not a phone gutter. The shared page box carries
        the only one there should be at every width, so the override is gone and
        the section lines up with the chrome on a handset as well.

        (2026-09-01: "that's going to be our sort of bounding box across the
        board" — a bounding box that is different on a phone is not one box.) */

    /* Detail photo shouldn't eat the whole first screen. */
    .nf-detail-photo {
        width: min(58vw, 240px);
    }

}

@media (max-width: 400px) {
    .nf-transport {
        gap: 1.5rem;
    }
}

/* ------------------------------------------- narrower breakpoints, last word

   This sheet loads after never-forgotten-interior.css, so at equal specificity
   its rules win. Its tablet block sets .nf-grid to 4 columns and
   .nf-stories-grid to two, both at max-width 1024 — which beat the finer
   breakpoints in the interior sheet and stopped them ever taking effect:

     .nf-grid          3 columns at <=820   (interior:1425)  never fired
     .nf-grid          2 columns at <=520   (interior:1446)  never fired
     .nf-stories-grid  1 column   at <=900  (interior:1402)  never fired

   So Faces sat at four columns all the way down to 401px with the tiles pinned
   at their 78px floor, and the Stories page never stacked to a single column at
   any width at all. Re-declared here, after the rules that were shadowing them,
   so the intended layouts are restored without touching either sheet's order. */

@media (max-width: 900px) {
    /*  .nf-stories-grid is single-column at every width now — see the comment on
        the base rule in the interior sheet — so what this re-declares after the
        tablet block is the pair of articles under the feature. */
    .nf-story-stack {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .nf-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Two across is the floor — below that the faces stop reading as portraits. */
@media (max-width: 520px) {
    .nf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem .75rem;
        /* THE fix. .nf-gallery is a centred flex container, so the grid is a flex
           item and shrinks to fit its contents — it was 211px wide inside a 311px
           gallery, and its "1fr" columns were therefore 98px, not half the screen.
           Every other rule here is cosmetic next to this one: without the width,
           stretching items inside the grid just stretches them to 98px. */
        width: 100%;
        /* The base grid centres each tile in its cell. That is right when a cell
           is barely wider than the portrait and wrong here, where it is not. */
        justify-items: stretch;
    }

    /*  Fill the cell.

        .nf-tile-img is clamp(78px, 8.5vw, 124px). On a phone 8.5vw is ~33px, so
        every portrait pinned to the 78px floor — a desktop minimum doing duty as
        a phone size. Each column is ~170px at 390px wide, so each face sat
        marooned in the middle of its cell with the background photograph showing
        through on all four sides, which is what made the gallery read as a sparse
        grid of stamps rather than fourteen people. They are the content of this
        page and should be the largest thing on it. */
    .nf-tile-img {
        width: 100%;
    }

    /* At tile width the caption can afford to be read rather than glanced at. */
    .nf-tile-name {
        font-size: 13.5px;
        margin-top: .4rem;
    }

    /* The gallery is fourteen rows of face on a phone; the note above it is the
       only thing between the breadcrumb and the grid, so it gets room. */
    .nf-bar-note {
        margin-top: .35rem;
    }
}