/* ==========================================================================
   Atlas of Wales — "On the Atlas" ending section — THE SHARED MAP PANEL

   The single owner of the map-preview handoff panel on EVERY location page,
   across all three templates (town-village, place-guide, mountain-trail).
   Promoted 2026-07-27 from the three-page visual pilot
   (assets/atlas-ending-pilot.css) after approval; rolled out site-wide.

   Do NOT reintroduce per-page copies of these rules. A page keeps its own
   template classes (.map-banner / .mapview__panel and their __save hooks, which
   the validators and saved-places.css still key on) and ADDS the .atlas-ending
   classes alongside — this file then owns the panel's appearance.

   Composition: map left, content right, stretched, 18px radius, centred at
   1120px so all three templates land on one width.

   The panel is the USEFUL closing moment — orientation, then go. It reads:
     kicker   On the Atlas
     heading  Continue from <Place>.
     body     one bare locative line, max 18 words
     CTA      Open <Place> on the map          (outlined — see below)
     save     Save to My Places
   No note line: the kicker, heading and CTA already say it three times.

   The CTA is deliberately OUTLINED, not filled gold. The whole panel is already
   a click-through (the overlay link), so the button labels an affordance rather
   than creating it; and solid gold is reserved for the emotional closing band
   below, which would otherwise repeat this exact button at the same weight
   within one screen. Colour is earned, not applied (.claude/rules/design.md).

   Load LAST — after the page <style> / town-guide.css / saved-places.css. The
   panel rule is a single class and wins ties on source order; every inner rule
   is two classes deep and wins outright.

   Behaviour is untouched: the map data-attributes, the whole-panel overlay
   link, the CTA href and the shared saved-places control/store are all the
   page's existing ones.
   ========================================================================== */

/* ---- panel ------------------------------------------------------------- */
.atlas-ending {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
    width: min(1120px, 100%);
    max-width: min(1120px, 100%);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border: 1px solid rgba(228, 196, 122, 0.32);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(34, 62, 48, 0.94), rgba(20, 34, 27, 0.94));
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
    transition: border-color 0.24s ease, box-shadow 0.24s ease;
}

.atlas-ending:hover,
.atlas-ending:focus-within {
    border-color: rgba(232, 168, 76, 0.6);
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.4), 0 0 30px rgba(217, 130, 59, 0.12);
}

/* ---- map half ---------------------------------------------------------- */
/* The live mini-map is the page's own (same place id, bounds and marker label);
   only the frame around it is standardised. */
.atlas-ending .atlas-ending__map {
    position: relative;
    align-self: stretch;
    min-height: 340px;
    overflow: hidden;
    border-right: 1px solid rgba(228, 196, 122, 0.18);
    border-bottom: 0;
    background: linear-gradient(150deg, #1d2d37, #14232b 72%);
}

/* ---- content half ------------------------------------------------------ */
/* STACKING: this element is a stacking context, and it used to sit at z-index 3 —
   BELOW the whole-panel overlay link (z-index 5). A child's own z-index only ranks
   inside its parent's context, so the Save control's z-index 6 could never outrank
   the overlay: every "Save to My Places" click was swallowed as navigation to the
   map, on all 90 location pages and all three templates. (The CTA had the same
   defect but hid it — both paths lead to the same map URL.) saved-places.css tried
   to fix it with `.mapview__content:has(.mapview__save) { z-index: 7 }`, but that
   ties this rule on specificity and this file loads last, so it never applied.
   Fixed here, in the file that owns the panel, for every template at once: lift the
   content above the overlay, and let clicks fall THROUGH it so the whole-panel
   click-through is unchanged — only the two real controls take their own clicks. */
.atlas-ending .atlas-ending__content {
    position: relative;
    z-index: 7;
    pointer-events: none;
    align-self: center;
    padding: clamp(28px, 3.2vw, 44px);
}

.atlas-ending .atlas-ending__cta,
.atlas-ending .atlas-ending__save {
    pointer-events: auto;
}

.atlas-ending .atlas-ending__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    color: rgba(236, 199, 110, 0.92);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

.atlas-ending .atlas-ending__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 30px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.atlas-ending .atlas-ending__title {
    margin: 0;
    color: var(--cream, #f8efd8);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.3vw, 1.95rem);
    line-height: 1.14;
    letter-spacing: -0.01em;
    text-transform: none;
}

.atlas-ending .atlas-ending__sub {
    margin: 12px 0 0;
    max-width: 36ch;
    color: rgba(248, 239, 216, 0.78);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.55;
}

/* ---- primary CTA: outlined, content-width ------------------------------ */
/* Values are the existing outlined .btn primitive shared by town-guide.css and
   the mountain pages, so the panel's button is the same object everywhere.
   Filled gold stays with the emotional closing band further down the page.
   z-index 6 keeps it clickable above the whole-panel overlay link (z-index 5) —
   the same lift the pages' own CTAs already carried. */
.atlas-ending .atlas-ending__cta {
    position: relative;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    margin: 24px 0 0;
    padding: 0 26px;
    border: 1px solid rgba(228, 196, 122, 0.5);
    border-radius: 999px;
    background: rgba(228, 196, 122, 0.14);
    color: #f8e8bd;
    text-decoration: none;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    transition: background 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}

.atlas-ending .atlas-ending__cta:hover,
.atlas-ending .atlas-ending__cta:focus-visible {
    background: rgba(217, 130, 59, 0.2);
    border-color: rgba(244, 216, 161, 0.85);
    transform: translateY(-1px);
    outline: none;
}

.atlas-ending .atlas-ending__cta:focus-visible {
    outline: 2px solid var(--gold-warm, #edb05a);
    outline-offset: 3px;
}

/* ---- save: quiet text-style secondary --------------------------------- */
/* The quiet transparent treatment, the outline -> filled bookmark and the
   "Save to My Places" unsaved label already come from saved-places.css
   (.map-banner__save / .mapview__save cohorts, both still on these elements).
   Only the spacing and the SAVED label are standardised here.
   data-save-status is written by saved-places-ui.js render(); scoping the
   suffix to the plain "saved" status keeps "Want to visit" / "Visited" honest. */
.atlas-ending .atlas-ending__save {
    margin-top: 14px;
}

.atlas-ending .atlas-ending__save[data-save-status="saved"] .atlas-save__label::after {
    content: " to My Places";
}

/* No transient "Saved on this device" note here. This cohort shows its label, so the
   label already flips to "Saved to My Places" — the note only repeated it, and with no
   positioned treatment in this cohort (unlike .hero-nav-save / .nav-save, which are
   icon-only and need it) it rendered as loose text jammed against the label. Scoped to
   [data-transient] so the session-only "Saved for this browsing session" warning, which
   shares this element and IS material, still shows. The accessible confirmation is a
   separate always-present live region, so nothing is lost to screen readers. */
.atlas-ending .atlas-ending__save .atlas-save__note[data-transient] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .atlas-ending,
    .atlas-ending .atlas-ending__cta { transition: none; }
    .atlas-ending .atlas-ending__cta:hover,
    .atlas-ending .atlas-ending__cta:focus-visible { transform: none; }
}

/* ---- one shared stacking breakpoint for all three pilot pages ---------- */
@media (max-width: 860px) {
    .atlas-ending { grid-template-columns: 1fr; }
    .atlas-ending .atlas-ending__map {
        min-height: 230px;
        border-right: 0;
        border-bottom: 1px solid rgba(228, 196, 122, 0.18);
    }
    .atlas-ending .atlas-ending__content { padding: 26px 22px 28px; }
    .atlas-ending .atlas-ending__title { font-size: 1.42rem; }
    .atlas-ending .atlas-ending__sub { max-width: none; }
    .atlas-ending .atlas-ending__cta { display: flex; width: 100%; }
}