/* route-steps.css — shared mountain-template layer, paired with assets/route-steps-slider.js.
 *
 * Contains three independent, mobile-only features:
 *   1. Route-steps carousel — the count-aware .legend grid becomes a horizontal scroll-snap
 *      carousel on phones: one full-width stage panel centred, ~16px of the neighbours peeking,
 *      [<] dots [>] beneath, and every numbered marker on the route diagram tappable. The slider
 *      script owns the active index; this file owns the geometry and the look.
 *   2. Summit-notes disclosure — on the summit "What the climb gives back" text block, the first
 *      note stays open and the rest collapse behind a "show more" pill. Applies only to pages that
 *      carry .summit-editorial. Inert on desktop.
 *   3. Gallery disclosure — below 560px, where the gallery grid has already collapsed to one
 *      column, six full-width photographs become a ~4500px wall of scroll. The first three stay
 *      open and the rest collapse behind the same pill. Inert above 560px.
 *
 * Loaded AFTER each page's inline <style>, so these rules win over the pages' own .legend rules at
 * equal specificity — that is what lets the carousel be defined once here rather than ten times.
 *
 * Both features degrade safely: with JS off (or without :has()) the summit notes all show, and the
 * carousel is still a swipeable strip of every step — nothing is hidden.
 * Handles both illustration variants: .stage/.pt and .route-line/.route-line__marker.
 */

/* ============================ 1. ROUTE-STEPS CAROUSEL ============================ */
/* Injected chrome is desktop-inert; only the <=620px block below turns it on. */
.legend-nav { display: none; }

/* The derived hazard chip is still built by the slider but is not shown. An audit of all 27 mountain
   routes (2026-07-28) found every route's key hazard already stated on its own page — in the stage
   it belongs to, in "Avoid this route if", or in the descent-planning section — so the chip was a
   second copy of an existing warning. Deleting this one rule brings it back everywhere. */
.legend-hazard { display: none; }

/* The diagram caption ("Illustrative route sequence · not distance, height, gradient or time") is
   removed from the markup; this covers any page still carrying one. */
.stage__cap, .route-line__cap { display: none; }

@media (max-width: 620px) {
    /* --- scrollport ------------------------------------------------------------------
       The strip sits on the normal page content column. <figure> carries a browser UA margin
       (`figure { margin: 1em 40px }`) and the pages only override margin-top, which squeezed the
       scrollport to 226px inside a 360px viewport and forced the titles into narrow stacked
       columns. Reset it on the figure itself rather than cancelling it with a negative margin
       further down, so the diagram, the strip and the dots share one column.

       PEEK GEOMETRY: with side padding P and gap G, a centred card is C = W - 2P wide and each
       neighbour shows exactly (P - G) px. P 24 / G 8 gives a steady 16px peek at every width. The
       padding is also what lets the FIRST and LAST stages centre like the rest — without it a card
       narrower than the port cannot reach centre — and it makes card i centre at exactly
       scrollLeft = i * step, which is what route-steps-slider.js derives its position from. */
    .profile { margin-left: 0; margin-right: 0; }

    .legend { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        width: auto; margin: 14px 0 0; padding: 2px 24px 4px; gap: 8px; align-items: flex-start; }
    .legend::-webkit-scrollbar { display: none; }

    /* --- the stage panel: an editorial route note, not an app card --------------------
       Natural height (the slider sizes the scrollport to whichever stage is on screen), one quiet
       gold edge on the dark green, compact header row, full-width description. */
    .legend li {
        flex: 0 0 100%;                 /* resolves against the CONTENT box, so C = W - 48 */
        scroll-snap-align: center;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 10px;
        row-gap: 7px;
        min-height: 0;                  /* natural height — content decides */
        margin: 0;
        padding: 15px;
        border: 1px solid rgba(228, 196, 122, 0.3);
        border-radius: 11px;
        background: rgba(15, 26, 21, 0.55);
        transition: border-color 0.25s ease;
    }
    .legend li > div { display: contents; }   /* promote the wrapper's children into the grid */
    .legend li:not(.is-active) { cursor: pointer; }

    .legend li.is-active { border-color: rgba(228, 196, 122, 0.3); }
    .legend li.is-danger.is-active { border-color: rgba(240, 120, 90, 0.42); }

    /* Neighbouring stages are 16px previews, so they are muted through the border and their
       CONTENTS — never through opacity on the <li>, which would take the dark-green surface with it
       and leave the peek as a bare hairline. The wrapper <div> is display:contents and has no box,
       so the four children are addressed directly. The hazard orange only carries its full weight
       while that stage is the one being read. */
    .legend li:not(.is-active) { border-color: rgba(228, 196, 122, 0.12); }
    .legend li.is-danger:not(.is-active) { border-color: rgba(240, 120, 90, 0.18); }
    .legend li:not(.is-active) .lg__n,
    .legend li:not(.is-active) .lg__name,
    .legend li:not(.is-active) .lg__alt,
    .legend li:not(.is-active) .lg__note { opacity: 0.4; }
    .legend .lg__n, .legend .lg__name, .legend .lg__alt, .legend .lg__note {
        transition: opacity 0.25s ease; }

    /* header row: badge · title · elevation hard right when present */
    .legend .lg__n    { grid-column: 1; grid-row: 1; align-self: center;
        width: 22px; height: 22px; font-size: 0.76rem; }
    .legend li.is-active .lg__n { background: rgba(237, 176, 90, 0.92); color: #16241d;
        border-color: transparent; }
    .legend .lg__name { grid-column: 2; grid-row: 1; align-self: center; margin: 0;
        font-size: 0.97rem; line-height: 1.25; }
    .legend .lg__alt  { grid-column: 3; grid-row: 1; align-self: center; justify-self: end;
        white-space: nowrap; font-size: 0.82rem; }

    /* description directly underneath, full width */
    .legend .lg__note { grid-column: 1 / -1; grid-row: 2; display: block;
        font-size: 0.85rem; line-height: 1.45; }

    /* Advice as a compact closing line, not a boxed footer; an absent <em> reserves no space.
       <em> in a stage note is the advice convention on 31 of the 38 notes across the ten pages —
       a short trailing phrase ("Easiest turn-around.", "Last easy retreat."). The other 7 use it
       for mid-sentence emphasis with text still to come, and blockifying those orphaned the
       trailing punctuation on its own line. Those are marked .is-inline at source, so the block
       treatment stays the default and the exception is explicit. */
    .legend .lg__note em { display: block; margin-top: 7px;
        font-size: 0.82rem; line-height: 1.35; color: rgba(240, 180, 104, 0.95); }
    .legend .lg__note em.is-inline { display: inline; margin-top: 0;
        font-size: inherit; line-height: inherit; }
    .legend li.is-danger .lg__note em { color: #f0a97a; }

    /* --- controls: [<] dots [>] ------------------------------------------------------
       align-items matters: the 8px dots carry a fixed height and so cannot stretch, and without it
       they settle at the TOP of a row whose height is set by the 32px arrows. */
    .legend-nav { display: flex; align-items: center; justify-content: center;
        gap: 8px; margin: 7px 0 0; }
    .legend-nav__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
        cursor: pointer; background: rgba(228, 196, 122, 0.32);
        transition: transform 0.2s ease, background 0.2s ease; }
    .legend-nav__dot.is-danger { background: rgba(240, 120, 90, 0.5); }
    .legend-nav__dot.is-active { background: rgba(237, 176, 90, 0.95); transform: scale(1.5); }
    .legend-nav__dot.is-danger.is-active { background: rgba(240, 120, 90, 0.95); }

    .legend-arrow { display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; flex: 0 0 auto; padding: 0; margin-inline: 4px;
        border: 1px solid rgba(228, 196, 122, 0.28); border-radius: 999px;
        background: rgba(15, 26, 21, 0.55); color: var(--gold-warm, #edb05a); cursor: pointer;
        transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; }
    .legend-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .legend-arrow:disabled { opacity: 0.28; cursor: default; }
    .legend-arrow:not(:disabled):active { border-color: rgba(237, 176, 90, 0.65); }
    .legend-arrow:focus-visible { outline: 2px solid rgba(237, 176, 90, 0.8); outline-offset: 2px; }
    .legend-arrow--prev { order: -1; }
    .legend-arrow--next { order: 1; }

    /* --- tappable diagram markers ----------------------------------------------------
       The hit area is an invisible pseudo-element, so the circle is not resized and the diagram
       looks identical. Insets are per variant because the two markups use different marker sizes
       (.pt 24px, .route-line__marker 20px on mobile) and the targets must stay clear of each
       other — verify spacing per page. */
    .stage .pt, .route-line__marker { cursor: pointer; }
    .stage .pt::after, .route-line__marker::after {
        content: ""; position: absolute; border-radius: 50%; }
    .stage .pt::after { inset: -9px; }                 /* 24 -> 42px */
    .route-line__marker::after { inset: -10px; }       /* 20 -> 40px */
    .stage .pt:focus-visible, .route-line__marker:focus-visible {
        outline: 2px solid rgba(237, 176, 90, 0.85); outline-offset: 4px; }

    /* active step's number lit on the route illustration above (both markup variants) */
    .stage .pt.is-active, .route-line__marker.is-active {
        background: rgba(237, 176, 90, 0.95); color: #16241d;
        box-shadow: 0 0 0 4px rgba(237, 176, 90, 0.25); }
}

/* ============================ 2. SUMMIT-NOTES DISCLOSURE ============================ */
/* Desktop: toggle + button inert, all notes shown. */
.summit-editorial__toggle { display: none; }
.summit-editorial__morebtn { display: none; }
.summit-editorial__fewerlbl { display: none; }

@supports (selector(:has(*))) {
    @media (max-width: 620px) {
        .summit-editorial__toggle { display: inline; position: absolute; width: 1px; height: 1px;
            margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
        .summit-editorial__morebtn { display: flex; width: max-content; max-width: 100%; margin: 16px auto 0;
            align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 22px;
            border: 1px solid rgba(228, 196, 122, 0.4); border-radius: 999px; background: rgba(228, 196, 122, 0.1);
            color: #f8e8bd; cursor: pointer; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
            text-transform: uppercase; text-align: center; }
        .summit-editorial__toggle:focus-visible + .summit-editorial__morebtn { outline: 2px solid rgba(228, 196, 122, 0.7); outline-offset: 3px; }
        .summit-editorial__note--extra { display: none; }
        .summit-editorial:has(.summit-editorial__toggle:checked) .summit-editorial__note--extra { display: block; }
        .summit-editorial:has(.summit-editorial__toggle:checked) .summit-editorial__morelbl { display: none; }
        .summit-editorial:has(.summit-editorial__toggle:checked) .summit-editorial__fewerlbl { display: inline; }
    }
}

/* ============================ 3. GALLERY DISCLOSURE ============================ */
/* Same checkbox-and-label mechanism as .pbrief__more, which every mountain page already carries —
   no :has() and no JS, so it works on the oldest phone and with scripting off.

   560px is deliberate: it is the breakpoint at which each page's own stylesheet drops
   .gallery__grid to a single column. Above it the grid is still 2- or 6-across and six tiles are
   an ordinary block; below it they are six stacked full-bleed images.

   The toggle must be a PRECEDING SIBLING of both the grid and the label — the sibling combinator is
   what carries the state. The lightbox appends its trigger INSIDE each figure (item.appendChild),
   so nth-child still counts figures only. Hidden figures stay in the lightbox's item list on
   purpose: prev/next walks all six once one is open. */
.gallery__toggle { display: none; }
.gallery__more { display: none; }
.gallery__fewer { display: none; }

@media (max-width: 560px) {
    .gallery__toggle { display: inline; position: absolute; width: 1px; height: 1px;
        margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .gallery__grid .shot:nth-child(n+4) { display: none; }

    .gallery__more { display: flex; width: max-content; max-width: 100%; margin: 18px auto 0;
        align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 22px;
        border: 1px solid rgba(228, 196, 122, 0.4); border-radius: 999px; background: rgba(228, 196, 122, 0.1);
        color: #f8e8bd; cursor: pointer; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
        text-transform: uppercase; text-align: center; }
    .gallery__toggle:focus-visible ~ .gallery__more { outline: 2px solid rgba(228, 196, 122, 0.7); outline-offset: 3px; }

    /* flex, not block: .shot is a column flexbox on every page (image + caption pinned to the
       bottom). Restoring it as `block` would drop the caption's own layout. */
    .gallery__toggle:checked ~ .gallery__grid .shot:nth-child(n+4) { display: flex; }
    .gallery__toggle:checked ~ .gallery__more .gallery__more-lbl { display: none; }
    .gallery__toggle:checked ~ .gallery__more .gallery__fewer { display: inline; }
}