/* =====================================================================================
   TOWN/VILLAGE HERO + RIBBON PILOT — OPT-IN STYLESHEET

   Loaded ONLY by the pilot pages, and only after assets/town-guide.css so these rules
   win on order wherever specificity ties. assets/town-guide.css itself is not touched.

   Pilot pages (a page opts in with all four of these, see any pilot page's <head>):
     - <link> to this file + <script> to assets/town-pilot.js
     - class="town-pilot-header" on <body>       (header block lives in town-guide.css)
     - .topbar__end wrapper + .nav-save + .nav-cta in the header
     - .cgcards wrapper around the guide cards, and the .hero__scroll-chev span

   Currently: conwy-town.html, aberdaron.html. Remove a page's <link>/<script> and its
   four markup hooks to roll that page back; nothing else is affected.

   It lives in its own file rather than an inline <style> because the town/village
   contract caps page-local <style> at 40 lines (validate_town_guide.py) and this
   pilot is larger than that; splitting it across two inline blocks to stay under
   the cap would be gaming the rule rather than respecting it.
   ===================================================================================== */

/* -------------------------------------------------------------------------------------
   1. HERO — density and action hierarchy (earlier passes, moved here verbatim)
   ------------------------------------------------------------------------------------- */

/* The hero's one remaining action stays deliberately quiet — no fill, thinner rule,
   lighter type. It must never be promoted to a filled gold primary. */
.hero__ctas .btn {
    background: none;
    border-color: rgba(228, 196, 122, 0.34);
    color: rgba(248, 239, 216, 0.82);
    font-size: 0.94rem;
    font-weight: 500;
}
.hero__ctas .btn:hover,
.hero__ctas .btn:focus-visible {
    background: rgba(228, 196, 122, 0.1);
    border-color: rgba(228, 196, 122, 0.62);
    color: var(--cream);
}
.hero__ctas .btn svg { width: 16px; height: 16px; }
/* One quiet control no longer needs the two-button run-up to it. */
.hero__ctas { margin-top: clamp(18px, 2.2vh, 26px); }

/* HERO FACTS 2x2 — desktop only, ported from the aberdaron.html page-local pilot (2026-07-27).
   A tight left-aligned 2x2 block with a divider between the columns and between the rows.
   Reading order is set with `order` (DOM order untouched): top row Type of place | Visit
   length, bottom row Best for | Setting. Icon size, label/value type and the icon-to-text gap
   are deliberately left on the shared values. Below 1081px the shared stacked rules apply. */
@media (min-width: 1081px) {
    .hero__facts { display: grid; grid-template-columns: repeat(2, max-content);
                   gap: 0; width: max-content; max-width: 100%;
                   margin-top: clamp(18px, 2.2vh, 26px); }
    .hero__facts > li { align-items: flex-start;
                        padding: 14px clamp(24px, 2.4vw, 38px) 14px 0; border-left: 0; }
    .hero__facts > li:nth-child(1) { order: 1; }
    .hero__facts > li:nth-child(3) { order: 2; }
    .hero__facts > li:nth-child(2) { order: 3; }
    .hero__facts > li:nth-child(4) { order: 4; }
    /* One short, soft vertical rule before the right-hand column — no full-height borders and
       no horizontal row rule, which together read as a plus sign between the four icons. */
    .hero__facts > li:nth-child(3), .hero__facts > li:nth-child(4) {
        padding-left: clamp(24px, 2.4vw, 38px);
        background: linear-gradient(to bottom, rgba(228, 196, 122, 0), rgba(228, 196, 122, 0.3), rgba(228, 196, 122, 0))
                    left center / 1px 30px no-repeat; }
}

/* The block is ~82px taller than the single row it replaces. On a tall desktop that growth is
   paid for out of .hero__inner's ribbon reserve, so the hero keeps its 100svh min-height and
   .guidestrip does not move.
   ponytail: 82px is measured on the pilot hero, not derived. Re-measure if the type scale changes. */
@media (min-width: 1081px) and (min-height: 860px) {
    .hero__inner { padding-bottom: calc(var(--strip-pull) + var(--strip-clear) - 82px); }
}

/* Short desktops: same layout, tightened rows and margins so it still fits the original
   one-row footprint without spending the ribbon reserve. */
@media (min-width: 1081px) and (max-height: 859px) {
    .hero__facts { margin-top: 6px; }
    .hero__facts > li { padding-top: 6px; padding-bottom: 6px; }
    .hero__ctas { margin-top: clamp(14px, 1.7vh, 20px); }
    .hero__scroll { margin-top: clamp(12px, 1.5vh, 20px); }
}

@media (max-width: 760px) {
    /* Eyebrow dropped on a phone (two lines here; Setting in the facts already carries
       it). display:none takes its 18px bottom margin with it — but it was also what held
       the h1 clear of the absolute header, so the hero's top padding restores ~38px. */
    .hero__place { display: none; }
    .hero { padding-top: 120px; }
    /* Fact rows ~14% tighter, icons ~10% smaller; value type and alignment untouched. */
    .hero__facts { gap: 15.5px 0; }
    .hero__facts svg { width: 27px; height: 27px; }
    /* Comfortable 46px target, near full width for the thumb, still visibly secondary. */
    .hero__ctas { margin-top: 18px; }
    .hero__ctas .btn { min-height: 46px; padding: 0 18px; font-size: 0.9rem; }
}

/* -------------------------------------------------------------------------------------
   2. GUIDE PANEL — "In this guide / What you'll discover"

   .cgcards is a page-local wrapper around the four existing .gcard anchors. Above the
   swipe breakpoint it is display:contents, so the cards stay DIRECT grid items of
   .guidestrip__inner and the shared 4-across row is completely unchanged. Below it, the
   same wrapper becomes the horizontal snap scroller. No JS, no library, no new controls.
   ------------------------------------------------------------------------------------- */

/* Panel head: the compass moves up onto the "In this guide" line instead of sitting
   under the heading with 14px of clearance above it, which left a gap at the foot of the
   head once the heading was the last thing in the block. Every width, both pilot pages.

   Done with `order` rather than by moving the <svg> in the markup: it is aria-hidden
   decoration, so the DOM reading order stays "In this guide" -> "What you'll discover"
   for assistive tech, and none of the three elements is focusable, so there is no
   tab-order mismatch to introduce. */
.guidestrip__head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 9px; }
.guidestrip__head p { order: 1; margin: 0; }
.guidestrip__head svg { order: 2; margin-top: 0; }
.guidestrip__head h2 { order: 3; flex: 0 0 100%; margin-top: 7px; }

@media (min-width: 901px) {
    .cgcards { display: contents; }

    /* Sit the panel LOWER in the hero. Only .guidestrip's own negative margin is
       relaxed — --strip-pull itself is untouched, so .hero__inner keeps the exact same
       padding-bottom reserve and the hero title / facts / action do not move at all.
       The panel simply slides down toward the hero's lower edge. */
    .guidestrip { margin-top: calc(-1 * var(--strip-pull) + clamp(48px, 5.4vw, 78px)); }

    /* ~10% shorter: a little less internal padding and a shallower card image. Type,
       icons and the one-row alignment of the four cards are untouched. */
    .guidestrip__inner { padding: clamp(14px, 1.35vw, 18px); }
    .gcard__img { aspect-ratio: 2.6 / 1; }
}

@media (max-width: 900px) {
    /* Sit the panel lower so it reads as a peek at the bottom edge rather than a second
       hero section. Same technique as the desktop rule above: only .guidestrip's own
       negative margin is relaxed, --strip-pull is untouched, so .hero__inner keeps its
       reserve and the hero copy / facts / map action do not move. The dark gap above the
       panel necessarily grows by the same amount — that space is the hero photograph,
       which is the point. */
    .guidestrip { margin-top: calc(-1 * var(--strip-pull) + 80px); }

    /* One card at a time with the next one peeking, on native touch scrolling. */
    .guidestrip__inner {
        display: block;
        padding: 16px;
    }
    .guidestrip__head { padding-right: 0; margin-bottom: 14px; }
    /* (The compass's old margin-top lived here; it now sits inline on the eyebrow line,
       so any nudge would just push it off that line again.) */

    .cgcards {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* legacy Edge */
    }
    /* Hidden bar, scrolling untouched. */
    .cgcards::-webkit-scrollbar { display: none; }

    /* Centre-snapped and a little narrower, so a settled card shows the edge of BOTH its
       neighbours — the previous one is reachable by tapping left, the next by tapping
       right. (start-alignment showed only the next card; there was nothing to tap to go
       back.) The first and last cards clamp flush to their end, as there is no neighbour
       on that side to reveal. */
    .cgcards .gcard {
        flex: 0 0 80%;
        scroll-snap-align: center;
    }
    /* A fixed height rather than the shared ratio: the card is now a fraction of the
       viewport, so a ratio would swing the panel height across device widths. */
    .gcard__img { aspect-ratio: auto; height: 120px; }
}

/* -------------------------------------------------------------------------------------
   3. PHONE ONLY (<=760px) — hero becomes a self-contained first section

   Everything below is scoped to <=760px and must not leak upward: 820px and every
   desktop width keep the overlapping-ribbon composition exactly as it was. This block
   sits last in the file so it wins over the <=900px rules above at phone widths.
   ------------------------------------------------------------------------------------- */

@media (max-width: 760px) {
    /* The ribbon stops overlapping and simply follows the hero in normal flow. This
       overrides the negative margin from the <=900px block above; 24px of dark
       separation, not a gap. */
    .guidestrip { margin-top: 24px; }

    /* .hero__inner's padding-bottom existed ONLY to reserve room for the ribbon tucked
       into the hero. With the ribbon out, that reserve would be a dead region. */
    .hero__inner { padding-bottom: 0; }

    /* The hero now ends on its own terms, so it carries its own lower breathing room —
       enough photograph below the cue that the section closes rather than stops.
       Deliberately no min-height override: the hero stays content-driven, which is why
       there is no blank band under the map action at either phone size. */
    .hero { padding-bottom: clamp(40px, 6vh, 60px); }

    /* The hero fills the phone viewport, so nothing of the cream ribbon shows until the
       reader scrolls. svh (the toolbar-visible viewport) is the honest unit here — with
       plain vh a mobile browser's collapsing toolbar would let the ribbon peek in. The
       plain-vh line before it is the fallback for engines without svh. */
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        padding-bottom: clamp(28px, 4vh, 40px);
    }

    /* Restore the shared scroll cue (assets/town-guide.css hides it <=900px), in the same
       form the mountain pages use (assets/location-motion.css .hero-scroll-cue): label
       above, bobbing chevron below, centred at the base of the hero. The desktop glyph +
       inline row is untouched above 760px. Still the existing #snapshot anchor. */
    .hero__scroll {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
        /* fit-content, not a full-width block: a full-width cue would stretch its box (and
           so its tap target) under the floating chat button at the right edge, even though
           the label and chevron are centred and nowhere near it. */
        width: fit-content;
        margin: clamp(22px, 3.2vh, 32px) auto 0;
    }
    .hero__scroll > svg { display: none; }          /* the desktop mouse glyph */
    /* Two classes deliberately: media queries add no specificity, so a single-class rule
       here would lose to the single-class hide below purely on source order. */
    .hero__scroll .hero__scroll-chev {
        display: block;
        width: 20px;
        height: 20px;
        animation: bob 2.4s ease-in-out infinite;
    }
    .hero__scroll-chev svg { width: 100%; height: 100%; animation: none; }
}

/* Hidden everywhere except the phone rule above, so desktop and tablet keep the existing
   glyph-plus-label row exactly as it was. */
.hero__scroll-chev { display: none; }

/* The shared reduced-motion rule only silences .hero__scroll svg; the bob now lives on the
   chevron's wrapper span, so it needs stopping explicitly. */
@media (prefers-reduced-motion: reduce) {
    .hero__scroll .hero__scroll-chev { animation: none; }
}
