/* =============================================================================
   PLACE-GUIDE MOBILE SYSTEM — SHARED PRESENTATION LAYER  (2026-08-07)

   Loaded last by every place-guide page. Production rollout of the two rails
   approved on the Llanddwyn mobile-scan prototype (the design; deleted 2026-08-07
   once this shared layer superseded it, recoverable from git history),
   which is itself the mountain rail system (assets/mountain-mobile.css, Glyder
   Fawr pilot 2026-08-07) retuned for the larger, more editorial place-guide
   photograph.

   SCOPE IS DELIBERATELY NARROW. Two sections only: the "Seen along the way"
   gallery and the nearby-places grid. Practical details, the verdict / fit
   panel, the walk sequence, the story and memory sections, the map plate, the
   ending and every word of copy are left exactly as authored.

   Everything that changes layout lives inside @media (max-width: 760px), so
   desktop renders exactly as it does today.
   ============================================================================= */

/* ---- prototype-added element: invisible unless the mobile layer turns it on */
.rail-dots { display: none; }

/* ---- script-built chapter wrapper and bookmark column (section 4 below).
   Above 760px the wrapper is inert — display: contents removes it from layout
   entirely — and the bookmark column is not rendered, so the authored pinned
   board is exactly as it was. */
.memory-chapters { display: contents; }
.memory-tabs { display: none; }

@keyframes memory-content-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

@keyframes memory-content-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-5px); }
}

/* No `to` keyframe on purpose — the card's own authored shadow is the end state,
   so this can never drift out of sync with a page that tunes it. */
@keyframes memory-sheet-settle {
    from { box-shadow: 0 7px 34px rgba(0, 0, 0, 0.5), 0 1px 6px rgba(0, 0, 0, 0.22); }
}

@media (max-width: 760px) {

/* =========================================================================
   1. THE GALLERY — the photo stack becomes one centred rail

   NO SIDE PADDING ON THE RAIL. Centre snapping then gives the wanted end
   behaviour for free: the first frame can only come to rest flush against the
   left content edge and the last flush against the right, while every frame
   between them centres with a symmetrical peek.

   The card is sized FROM the peek — card = 100% - 2 x (gap + peek) — so the
   peek stays a fixed 16px at every phone width instead of drifting with the
   viewport, and the card resolves to ~86% of the content column (302px at 390).
   6:5 rather than 16:9 makes it an editorial frame (252px tall at 390) instead
   of a thumbnail strip; `object-fit: cover` on the image is the page's own rule
   and is not touched, so nothing is distorted by the taller box.
   ========================================================================= */
body .gallery-layout {
    display: flex; gap: 8px; padding-inline: 0; margin-top: 26px;
    grid-template-columns: none; grid-template-rows: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body .gallery-layout::-webkit-scrollbar { display: none; }

/* margin: 0 is load-bearing — .gallery-item is a <figure> and still carries the UA
   40px side margin, which in a flex rail pushes the next frame clean off the peek.
   `:nth-child(n)` matches every frame and is there for SPECIFICITY, not filtering:
   porth-dafarch.html sets `aspect-ratio: 16 / 9` through
   `.gallery-layout--photos .gallery-item:nth-child(3)` (0,3,0), which outranks a
   plain two-class selector. The second selector (0,4,1) exists to outrank each page's
   own "first N photos, rest behind View more photos" rule (0,4,0) — matched with
   `:nth-child(n)` rather than a threshold because the threshold itself varies by page
   (n+4 on most, n+3 on little-orme).
   `height: auto` is for little-orme, which pins `.gallery-item { height: 260px }` and
   would otherwise ignore the aspect ratio.
   An inline `style="display:none"` still wins, which is intended: plas-newydd hides five
   extra frames from the visual grid on purpose and reaches them through the lightbox.
   Card width: 2 x (8px gap + 16px peek) = 48. */
body .gallery-layout .gallery-item:nth-child(n),
body .gallery-layout:not(.is-expanded) .gallery-item:nth-child(n) {
    display: block; flex: 0 0 calc(100% - 48px); margin: 0;
    grid-column: auto; grid-row: auto; height: auto; aspect-ratio: 6 / 5;
    scroll-snap-align: center; }

/* the show-more toggle is redundant once every frame is one swipe away */
body .gallery-more { display: none; }

/* The rail is the section's last element, so its own bottom padding plus the next
   chapter's top padding read as one oversized void under the dots. Trim ~34px from
   this side only; the break between the two chapters stays deliberate. */
body.pgscan #gallery { padding-bottom: 22px; }

/* =========================================================================
   2. NEARBY PLACES — the same rail, the cards themselves untouched

   Same technique, the balance approved for destinations rather than
   photographs: 2 x (14px gap + 24px peek) = 76. `> *` rather than a card class
   because two pages (caernarfon-castle, harlech-castle) carry `article.ncard`
   where the other 42 carry `a.place-card`.
   ========================================================================= */
body .nearby-grid {
    display: flex; gap: 14px; padding-inline: 0;
    grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body .nearby-grid::-webkit-scrollbar { display: none; }
body .nearby-grid > * { flex: 0 0 calc(100% - 76px); scroll-snap-align: center; }

/* =========================================================================
   3. RAIL POSITION READOUT — presentational, the swipe is the control
   ========================================================================= */
body.pgscan .rail-dots {
    display: flex; justify-content: center; gap: 6px; margin: 14px 0 0; }
body.pgscan .rail-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(228, 196, 122, 0.28); transition: background 0.2s ease, transform 0.2s ease; }
body.pgscan .rail-dots span.is-on { background: var(--gold, #e4c47a); transform: scale(1.5); }

/* =========================================================================
   4. "THE PARTS PEOPLE REMEMBER" — the pinned board becomes one bookmarked
      story sheet.  (Llanddwyn prototype, approved 2026-08-08.)

   Progressive enhancement, twice over. Everything here is gated on
   body.memory-chapters-on, which the script adds only at this breakpoint and
   only on a page that opted in with data-chapters on its board — so with
   JavaScript off, and on any page that has not opted in, the authored pinned
   stack still renders in full at every width.

   The pages' own mobile rules already stack the board into a centred column
   and kill the card rotation (transform: none !important); this layer only
   changes what that column IS. Every rule below outranks the page's own
   .location-memory__* rules on specificity and is loaded after them.
   ========================================================================= */
body.memory-chapters-on .memory-chapters {
    display: flex;
    align-items: stretch;
    max-width: 560px;      /* a sheet, not a banner, at the top of the range */
    margin: 30px 0 0;
    padding-right: 2px;    /* room for the active bookmark to protrude */
}

/* A one-cell grid rather than a row: every chapter is placed in the SAME cell, so
   the outgoing and incoming chapters can be on screen together for the brief
   cross-fade without sitting side by side. Grid stretch also makes both of them
   exactly the cell's size, so the one underneath can never peek out below. */
body.memory-chapters-on .location-memory__board {
    display: grid;
    position: relative;    /* containing block for the lifted outgoing chapter */
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.memory-chapters-on .location-memory__card {
    display: none;
    grid-area: 1 / 1;      /* every chapter shares one cell */
    position: relative;
    z-index: 1;            /* the sheet sits over the tucked tab edges */
    width: 100%;
    padding: 26px 24px 30px;
    border-radius: 2px 3px 3px 2px;
    /* The pinned board's authored scatter is `.location-memory__card:nth-child(N)
       { transform: rotate(...) }` (0,2,0). A chapter sheet is one upright sheet of
       paper, so the rotation has to come off here rather than depend on each page
       having written `transform: none !important` into its own mobile block — 43 of
       the 44 place-guide pages have, little-orme.html has not, and a tilted sheet
       inside a fixed grid cell clips at the corners. This selector is (0,3,0) so it
       wins on specificity; on the 43 pages that carry the !important the computed
       value is `none` either way, so nothing moves by a pixel. */
    transform: none;
}

/* The chapter on its way out stays rendered for the overlap, underneath the
   incoming one and deaf to pointers. */
body.memory-chapters-on .location-memory__card.is-leaving {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

/* At the handover the departing chapter is lifted out of grid sizing, so the row
   can resolve to the ARRIVING chapter's natural height while the old one is still
   fading in place. It has to be `position`, not `display: none` — display:none
   CANCELS a running animation, and restoring it restarts the fade from full
   opacity, which pops the old text back into view mid-exit. */
body.memory-chapters-on .location-memory__card.is-lifted {
    position: absolute;
    inset: 0;
}

/* Centred, because the bookmark column makes the sheet taller than any single
   chapter needs; top-aligned copy would leave a dead half at the bottom.

   NOTHING that makes this a sheet of paper is animated: the background, the pin
   (::before), the radius and the geometry all stay put through a chapter change.
   The only thing on the card that moves is the writing, below.

   The shadow settle is the one micro-detail: shadow only, no transform, so the
   paper and the pin do not move by even a pixel. */
body.memory-chapters-on .location-memory__card.is-on {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;            /* the arriving chapter reads over the departing one */
    animation: memory-sheet-settle 220ms ease-out;
}

/* The writing changes, the page does not. Out: 95ms, accelerating away, 5px up.
   In: 155ms, decelerating in, 5px up from below. The script starts the incoming
   chapter at 60ms, so the two overlap for 35ms and the sheet is never blank —
   but at the crossover both are around a third opacity, so neither is readable
   over the other. ~215ms door to door. The children of the card move as one
   block because they share the timing exactly. */
body.memory-chapters-on .location-memory__card.is-on > * {
    animation: memory-content-in 155ms cubic-bezier(0, 0, 0.2, 1) both;
}

body.memory-chapters-on .location-memory__card.is-leaving > * {
    animation: memory-content-out 95ms cubic-bezier(0.4, 0, 1, 1) both;
}

/* Natural, content-driven heights: the script measures the next chapter and
   animates between the two real heights. The top edge and the pin are fixed by
   the wrapper's own position, so only the bottom edge moves. */
body.memory-chapters-on .memory-chapters.is-resizing {
    transition: height 180ms cubic-bezier(0.3, 0, 0.2, 1);
}

body.memory-chapters-on .location-memory__card:focus-visible {
    outline: 2px solid #a07830;
    outline-offset: 3px;
}

/* "03 / 05" — the total is written by the script, never hard-coded here, so a
   page with a different number of notes reads correctly without a CSS change. */
body.memory-chapters-on .location-memory__num::after {
    content: " / " attr(data-total);
    color: rgba(160, 120, 48, 0.55);
}

/* Numbers only. The chapter title and text live on the sheet.
   min-width 62 against margin-left -20 leaves a 42px tappable edge.
   min-height holds the column at the height it had when the bookmarks were
   taller and further apart, so tightening them does not shorten the sheet. */
body.memory-chapters-on .memory-tabs {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    min-height: 274px;
    margin-left: -20px;
    padding: 12px 0;
}

/* The BUTTON is the tap target (42 x 44, stacked flush). The visible bookmark is
   painted by ::before, inset inside it — which is what lets the shape read smaller
   and sit closer to its neighbours without the finger target shrinking with it. */
body.memory-chapters-on .memory-tabs__tab {
    position: relative;
    isolation: isolate;     /* keeps the z-index:-1 paint inside the button */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 62px;
    min-height: 44px;
    padding: 0 13px 0 22px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: none;
    color: #7c6330;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    /* Chrome's default is rgba(51,181,229,0.4) — a light-blue wash the compositor
       paints over the WHOLE button box on tap, including the 20px tucked under the
       sheet, which is why it read as a flash behind the paper. Suppressed here and
       nowhere else; :focus-visible below is untouched, so keyboard users keep the
       ring. */
    -webkit-tap-highlight-color: transparent;
    /* 110ms: the bookmark answers the tap before the writing has finished leaving,
       so the control never feels like it is waiting on the content. */
    transition: color 110ms ease, margin-right 110ms ease;
}

body.memory-chapters-on .memory-tabs__tab::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1.5px 4px 1.5px 0;   /* 41px tall, 3px of green between neighbours */
    border-radius: 0 4px 4px 0;
    background: #e6ddcc;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.28);
    transition: background 110ms ease, top 110ms ease, bottom 110ms ease;
}

/* Inset, so the ring lands on the painted bookmark rather than out on the
   invisible edges of the tap target. The clip-path sits on ::before, so
   nothing clips the ring away on the one tab that holds the tab stop. */
body.memory-chapters-on .memory-tabs__tab:focus-visible {
    outline: 2px solid #3a2f14;
    outline-offset: -3px;
}

/* Protrudes by growing to the RIGHT (negative margin on a stretched flex item),
   not by translating: a translate would slide the tucked left edge out from
   under the sheet and open a gap between the two.

   The negative margin is the ONLY thing that grows the selected bookmark. It cannot
   widen the column (the item's outer width is 62 - 11 = 51, below the 62 the inactive
   tabs set), so the cream card keeps its width and position exactly.

   padding-right 22 puts the digit in the middle of the SOLID part of the ribbon,
   before the notch starts, rather than in the middle of the clipped outline. The
   padding-left drop to 12 is only headroom: it keeps content + padding safely under
   min-width so a wider glyph can never push the column out. */
body.memory-chapters-on .memory-tabs__tab[aria-selected="true"] {
    margin-right: -11px;
    padding: 0 22px 0 12px;
    color: #22301f;
}

/* Still unmistakable: gold against cream, 11px further out, 2px taller than its
   neighbours, and the ribbon notch. */
body.memory-chapters-on .memory-tabs__tab[aria-selected="true"]::before {
    top: 0.5px;
    bottom: 0.5px;
    background: linear-gradient(180deg, #d3a758, #b0862f);
    box-shadow: none;                                       /* clip-path would eat it */
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.38));
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}

}

/* Reduced motion: nothing animates and nothing moves. The script also skips the
   outgoing phase and the height measurement entirely, so the chapter and its
   height both change on the spot. */
@media (prefers-reduced-motion: reduce) {
    .rail-dots span { transition: none; }

    body.memory-chapters-on .location-memory__card.is-on,
    body.memory-chapters-on .location-memory__card.is-on > *,
    body.memory-chapters-on .location-memory__card.is-leaving > * { animation: none; }
    body.memory-chapters-on .memory-chapters.is-resizing { transition: none; }
    body.memory-chapters-on .memory-tabs__tab,
    body.memory-chapters-on .memory-tabs__tab::before { transition: none; }
}