/*
  map-hero.css
  ------------
  Styles for the homepage's "living map" hero in index.html. Kept
  as its own file (unlike every other page's inline <style> block)
  because this section has enough new rules - background layers, SVG
  overlay, zoom transforms, an on-photo header override, a sliding detail
  panel, breakpoints - that inlining it would make that file hard to
  read. Every other page keeps the inline-style convention.

  Reuses site.css tokens throughout (--on-photo, --photo-overlay-*,
  --accent, --rust, --card-bg, .headline-serif, .badge, .btn-ghost)
  rather than inventing new colors.

  Interaction model: click a destination button (or its pin on the map)
  and the background flies to it - see map-hero.js. An earlier version
  drove this from continuous scroll position (scroll-scrubbing); that
  felt uncomfortable in practice and buried the rest of the homepage
  behind a very long scroll track, so it was replaced with this
  click-driven version, which is what was actually approved in the
  original prototype review.
*/

/* The demo-mode banner sits above this wrap in normal flow, so a plain
   100vh on the wrap would push its own bottom (where the sliding panel
   lives) past the fold by the banner's height. .hero-viewport (wrapping
   both, in index.html) pins the PAIR to 100vh and lets flex give this
   wrap whatever's left over - no measuring the banner's height in JS,
   which would drift whenever it wraps to 2 lines in some language or
   disappears once real payments are live. */
.hero-viewport { height: 100vh; display: flex; flex-direction: column; }

.map-hero-wrap {
  position: relative;
  flex: 1;
  min-height: 0; /* flex children default to min-height:auto, which would fight this shrinking */
  overflow: hidden;
  background: #4a5a52; /* shows briefly while map-wide.jpg decodes */
}
@media (max-height: 560px) {
  .map-hero-wrap { min-height: 560px; }
}

.map-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transform-origin: 50% 50%;
  transition: transform 900ms cubic-bezier(.22,.61,.28,1);
}

#mapBgClose {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 700ms ease, transform 1100ms cubic-bezier(.22,.61,.28,1);
}
#mapBgClose.show { opacity: 1; transform: scale(1); }

/* Photo attribution for the destination image currently filling the hero.
   Same visual recipe as the .photo-credit pill on apply/about/contact so
   the whole site credits photos the same way - just anchored bottom-LEFT
   here, and pinned to `left` rather than `inset-inline-start` on purpose:
   it should stay in the same corner in both LTR and RTL instead of
   flipping into the hero's other bottom corner.

   z-index 3 puts it above the vignette and the pin overlay; pointer-events
   none means it can never swallow a click meant for the map underneath.
   Fades out when empty (:empty) so the overview state - the public-domain
   NASA map, which needs no credit - shows nothing at all. */
.map-hero-photo-credit {
  position: absolute;
  bottom: 8px;
  left: 14px;
  z-index: 3;
  margin: 0;
  max-width: min(46ch, calc(100% - 28px));
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--on-photo);
  background: var(--photo-overlay-strong);
  padding: 2px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}
.map-hero-photo-credit:not(:empty) { opacity: 1; }

.map-hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--photo-overlay-strong) 0%, var(--photo-overlay-soft) 32%, rgba(28,31,20,0.04) 58%, var(--photo-overlay-soft) 82%, var(--photo-overlay-strong) 100%);
}

.map-hero-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  transition: opacity 400ms ease;
}
.map-hero-overlay.hide { opacity: 0; }

/* Route line + pins are drawn in real map coordinates and must read as a
   real geographic route regardless of page language - see site.css's RTL
   section for the rest of the site's flip logic, which this deliberately
   sits outside of via the dir="ltr" on the <svg> itself in the markup. */
.map-hero-overlay .route { fill: none; stroke: var(--rust); stroke-width: 3; stroke-dasharray: 1 9; }
.map-hero-overlay .pin-ring { fill: var(--card-bg); stroke: var(--rust); stroke-width: 2.4; cursor: pointer; }
.map-hero-overlay .pin-current { fill: var(--rust); }
.map-hero-overlay g[data-dest] { cursor: pointer; }

/* ---------- chrome sitting on top of the map (header + hero copy) ---------- */

.map-hero-chrome {
  position: relative; z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* On-photo override of the normal solid header.site bar - only inside the
   map hero. Every other page keeps header.site's usual solid --card-bg
   bar untouched. */
.map-hero-chrome header.site {
  background: transparent;
  border-bottom: none;
}
.map-hero-chrome header.site .brand { color: var(--on-photo); }
.map-hero-chrome header.site nav a { color: var(--on-photo-soft); }
.map-hero-chrome header.site nav a:hover { color: var(--on-photo); }
.map-hero-chrome .nav-toggle span { background: var(--on-photo); }
.map-hero-chrome .lang-switcher {
  background: rgba(28,31,20,0.35);
  color: var(--on-photo);
  border-color: rgba(250,248,240,0.35);
}
@media (max-width: 640px) {
  .map-hero-chrome header.site nav {
    background: var(--card-bg); /* the open mobile menu still needs a solid, readable bg */
  }
  .map-hero-chrome header.site nav a { color: var(--ink-soft); }
  .map-hero-chrome header.site nav a:hover { color: var(--accent-dark); }
}

.map-hero-copy {
  padding: 0 24px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.map-hero-copy h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.3rem);
  margin: 0 0 14px;
  color: var(--on-photo);
  text-wrap: balance;
}
.map-hero-copy p {
  color: var(--on-photo-soft);
  font-size: 1.18rem;
  margin: 0 auto;
  max-width: 580px;
}
/* Bigger than .badge's shared default (site.css) - only here, not on
   apply.html's identical-looking badge, which stays its normal size. */
.map-hero-copy .badge { font-size: 0.92rem; padding: 5px 16px; }

/* Desktop gets a bigger hero headline/subtitle/badge - sits before every
   height-based media query below on purpose, so a short-but-wide desktop
   window still gets those queries' compact sizes instead of this one
   (source order: later + equal specificity wins). Mobile (<=640px) is
   untouched, same as the rest of this section's phone-specific rules. */
@media (min-width: 641px) {
  /* The hero is pinned to 100vh (see .hero-viewport) - unlike every
     other page's header, this one can't just grow to whatever site.css
     says without a real risk of the dest-row/steps below getting
     squeezed into overlap on a real (not maximized) desktop window, so
     it gets its own smaller-than-sitewide desktop size instead - same
     idea as the existing max-height:700px override further down, just
     for width instead of height. */
  .map-hero-chrome header.site { padding: 24px 0; }
  .map-hero-chrome header.site .brand-logo { height: 176px; }
  /* max-width raised from the shared 720px so this bigger type still
     fits "One less thing on the packing list." on 2 lines instead of
     wrapping to 3 and pushing into the dest-row/steps below. */
  .map-hero-copy { max-width: 860px; }
  .map-hero-copy h1 { font-size: clamp(2rem, 3.8vw, 3.1rem); margin-bottom: 7px; }
  .map-hero-copy p { font-size: 1.22rem; }
  .map-hero-copy .badge { font-size: 1.05rem; padding: 5px 18px; }
  /* Trimmed from the shared 22px/12px default - reclaims the vertical
     room this tier's bigger header/copy above need to avoid the
     dest-row overlapping the steps below on a real (not maximized)
     desktop window - see the .map-hero-spacer:first-of-type comment
     just below for the rest of that budget. */
}

.map-hero-spacer {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center; /* centers .map-hero-steps directly - margin:auto
    on a flex child instead of this disables stretch and made the browser
    size it by fit-content, which measured a bizarrely narrow width and
    wrapped all 4 steps into a vertical stack instead of one row */
  min-height: 0;
}
/* The first spacer (above the hero copy) used to take an equal half of
   whatever vertical room was left over, same as the one below the dest
   row - on a generously tall screen that reads as a big gap of "empty
   map" sitting right under the header for no reason. Giving it a
   smaller share biases that leftover space toward the bottom instead,
   so the header/copy/dest-row sit higher up rather than dead-centered. */
.map-hero-spacer:first-of-type { flex: 0.4; }

/* ---------- "how it works" preview, folded into the hero - this used
   to be its own full section further down the page; that's gone now, so
   this is the only copy on every screen size, not just desktop. Reuses
   the exact same icon SVGs as before (unchanged markup/colors), just
   sitting inside a light circle so they stay readable over the photo
   regardless of what's directly behind them. ---------- */
.map-hero-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 920px;
  padding: 14px 24px 20px;
}
.map-hero-step {
  flex: 1 1 150px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.map-hero-step-icon {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--card-bg);
  box-shadow: 0 2px 6px rgba(28,31,20,0.35);
  display: flex; align-items: center; justify-content: center;
}
.map-hero-step-icon svg { width: 24px; height: 24px; }
.map-hero-step-num {
  position: absolute; bottom: -4px; inset-inline-end: -4px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  border: 1.5px solid var(--card-bg);
  font-size: 0.66rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.map-hero-step p { margin: 0; color: var(--on-photo-soft); font-size: 0.92rem; line-height: 1.4; }
/* Two text variants per step - see index.html: a full sentence (the
   default, same copy as the full "how it works" section further down
   the page) and a short 2-3 word label for when there isn't room for
   the sentence. Only one shows at a time. */
.map-hero-step .step-text-short { display: none; }

/* Now the only cue that the row below is where you pick a destination -
   "Destinations" used to be a nav item, but it only ever scrolled to
   #hero (i.e. "the top", where you already are on this page), so it was
   removed rather than kept as a decoy. Styled like .badge (same pill
   the hero's own badge above uses) instead of plain text, specifically
   to carry that weight on its own. Placed here, BEFORE every media
   query that overrides its margin/padding/font-size below - it used to
   sit after all of them instead, which (equal specificity, later wins)
   silently made every one of those overrides dead code the whole time. */
.map-hero-dest-label {
  display: flex;
  align-self: center;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin: 22px auto 12px;
  padding: 7px 18px;
  background: var(--accent-soft);
  color: var(--accent-soft-text);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 2px 8px rgba(28,31,20,0.25);
}

/* Desktop: bigger "how it works" icons/text + a tighter dest-label/
   spacer budget to make room for them - split out from the header/copy
   desktop block further up because it has to sit AFTER every base rule
   it overrides (.map-hero-spacer, .map-hero-steps, .map-hero-step*,
   .map-hero-dest-label all live below that block) - same equal-
   specificity/source-order trap the comment just above this already
   warns about for .map-hero-dest-label itself. */
@media (min-width: 641px) {
  /* Trimmed from the shared 22px/12px default - reclaims the vertical
     room the bigger header/copy (see the earlier desktop block) and the
     bigger icons/text below need, so the dest-row doesn't overlap the
     steps on a real (not maximized) desktop window. */
  .map-hero-dest-label { margin: 8px auto 4px; }
  /* Pulls the copy block up closer to the header instead of sitting
     roughly mid-map on a tall/wide desktop window. Not smaller than
     this - the dest-row/steps below need the room too. The
     max-height:820 tier further down (separately tuned) is what a
     shorter desktop window falls back to instead of this tier. */
  .map-hero-spacer:first-of-type { flex: 0.16; }
  /* Steps sit right under the dest-row instead of pinned to the very
     bottom edge of the viewport - "raises" them up per user feedback,
     and on a tall window that used to leave a big dead gap between the
     dest-row and the steps anyway. Doesn't affect the tight-viewport
     case (no slack there either way). */
  .map-hero-spacer:last-of-type { justify-content: flex-start; }
  /* Wider cap than the shared 920px/200px so the longer step sentences
     have room to stay on 2 lines at this bigger font instead of
     wrapping to 3 and eating the exact vertical budget this tier is
     short on. */
  .map-hero-steps { gap: 18px; max-width: 1160px; padding: 26px 24px 4px; }
  .map-hero-step { max-width: 280px; }
  .map-hero-step-icon { width: 58px; height: 58px; }
  .map-hero-step-icon svg { width: 29px; height: 29px; }
  .map-hero-step-num { width: 22px; height: 22px; font-size: 0.74rem; }
  .map-hero-step p { font-size: 1.08rem; }
}

@media (max-width: 640px) {
  .map-hero-steps { gap: 8px; padding: 4px 16px 8px; }
  .map-hero-step { flex-basis: 44%; gap: 3px; }
  .map-hero-step-icon { width: 30px; height: 30px; }
  .map-hero-step-icon svg { width: 16px; height: 16px; }
  .map-hero-step p { line-height: 1.3; }
  /* Text mode (full sentence vs short label) is controlled purely by
     the height-based rules further down, not by width - a narrow phone
     with real height to spare should still get the real sentence. */
  .map-hero-dest-row { gap: 6px; }
  .map-hero-copy { padding: 0 16px; }
  .map-hero-copy h1 { font-size: clamp(1.6rem, 6.4vw, 2.3rem); margin-bottom: 4px; }
  .map-hero-copy p { font-size: 0.95rem; }
  .map-hero-copy .badge { font-size: 0.98rem; padding: 6px 15px; }
  .map-hero-dest-label { margin: 8px auto 4px; }
  .map-hero-copy p { margin-top: 2px; }
  /* A narrow phone wraps the dest-row and steps to more rows than a
     wide desktop would at the same height, so this needs the same
     breathing-room cuts as the short-viewport rules below even on a
     phone tall enough (>820px) to not otherwise trigger them. Slightly
     bigger than the 8px this used to be - still compact, but matches
     site.css's own mobile header bump on every other page now. */
  .map-hero-chrome header.site { padding: 11px 0; }
}

/* On a short viewport (a real, non-maximized browser window, extra
   toolbars, or display scaling above 100% shrinking the effective CSS
   viewport) the flex spacer this sits in can shrink past what the steps
   actually need, and since nothing here clips, it visually overlaps the
   dest-row above it instead of just losing its "centered" breathing
   room - confirmed by reproducing a real user report (18px of overlap
   at 680px tall). Response is to shrink the icon and swap to the same
   short-label text mobile already uses instead of the full sentence -
   confirmed by measurement to fit down to a genuinely tight viewport
   (~600px) with room to spare, unlike hiding the text outright, which
   the same user found too bare once the overlap itself was fixed. */
@media (max-height: 700px) {
  /* The logo stays full-size everywhere else (a deliberate call - it
     shouldn't get smaller than this even when height is tight), but a
     genuinely small phone (an iPhone SE-class 375x667, specifically -
     still overlapped even with every other cut and the short-label
     fallback below applied) needs this too, or nothing here fits at
     all. Scoped to the shortest tier on purpose, not the general
     max-height:820px short-viewport handling below. */
  .map-hero-chrome header.site .brand-logo { height: 64px; }
  .map-hero-copy p { display: none; }
  .map-hero-dest-label { margin: 6px auto 5px; }
}
@media (max-height: 820px) {
  .map-hero-steps { gap: 10px; padding: 80px 24px 8px; }
  .map-hero-step-icon { width: 28px; height: 28px; }
  .map-hero-step-icon svg { width: 15px; height: 15px; }
  .map-hero-step-num { width: 14px; height: 14px; font-size: 0.56rem; bottom: -3px; }
  .map-hero-step p { font-size: 0.68rem; line-height: 1.3; }
  .map-hero-chrome header.site { padding: 10px 0; }
  .map-hero-copy h1 { font-size: clamp(1.5rem, 4.2vw, 2.4rem); margin-bottom: 6px; }
  .map-hero-copy p { font-size: 0.98rem; }
  .map-hero-dest-label { margin: 14px auto 8px; padding: 5px 14px; font-size: 0.82rem; }
}
/* Only below this does the sentence genuinely stop fitting even at the
   smallest sizes above - confirmed by measurement, not a guess: full
   sentences fit with real margin at 390x844 (a current iPhone) and,
   after every cut in the 820px tier above, even down to ~565px tall
   (a real reported case). Short single-word labels are the last-resort
   floor for whatever's shorter than that, not the general mobile
   default - a narrow phone with real height to spare gets the actual
   sentence, same as desktop. */
@media (max-height: 480px) {
  .map-hero-step .step-text-full { display: none; }
  .map-hero-step .step-text-short { display: block; font-size: 0.62rem; }
}
@media (max-height: 380px) {
  .map-hero-steps { display: none; }
}

/* ---------- destination buttons - equivalent to clicking a pin on the
   map, just a more discoverable/labeled version of it. Sits right under
   the hero copy (not at the bottom, where it used to be) because the
   sliding detail panel below occupies the bottom once open - putting the
   row up here means it never gets covered and you can jump straight from
   one destination to another without closing the panel first. ---------- */

.map-hero-dest-row {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Wider on desktop - the shared 620px cap wraps the 6 buttons to 2 rows
   in French ("Vue d'ensemble" + the rest don't fit on one line at
   620px), which on this tier's already-tall header/copy pushed the
   steps below past the bottom of the viewport entirely (confirmed by
   measurement, not just a guess - happened at a real 1400x821 window).
   Placed after the base rule above for the usual equal-specificity/
   source-order reason this file's other desktop blocks already note. */
@media (min-width: 641px) {
  .map-hero-dest-row { max-width: 760px; }
}

/* Draws the eye to the row before the first click - stops permanently
   once a destination is picked (map-hero.js removes .hint at that
   point), so it never distracts anyone who has already found it.
   Excludes "Overview" itself, since clicking it from the resting state
   has nothing new to show. */
.map-hero-dest-row.hint .map-hero-dest-btn:not([data-dest="wide"]) {
  animation: dest-hint-pulse 1.8s ease-in-out 3;
}
@keyframes dest-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250,248,240,0.45); }
  50% { box-shadow: 0 0 0 6px rgba(250,248,240,0); }
}
@media (prefers-reduced-motion: reduce) {
  /* Same selector the animation itself uses (line 224) - an earlier
     :first-child version here missed every button the animation
     actually applies to, since "wide"/Overview is always first and is
     the one button :not() already excludes from the animation. */
  .map-hero-dest-row.hint .map-hero-dest-btn:not([data-dest="wide"]) { animation: none; }
}
.map-hero-dest-btn {
  font-family: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  border: 1px solid rgba(250,248,240,0.4);
  background: rgba(28,31,20,0.35);
  color: var(--on-photo);
  padding: 9px 16px;
  border-radius: 999px;
  backdrop-filter: blur(3px);
  transition: background 0.15s, border-color 0.15s;
}
.map-hero-dest-btn:hover { border-color: var(--on-photo); }

}

/* Nothing is "active" on first load - none of these is really a chosen
   state until the visitor actually picks one, "Overview" included. */
.map-hero-dest-btn.active { background: var(--accent); border-color: var(--accent); }
/* Slightly smaller so longer-language destination names (French
   especially - "Vue d'ensemble" alone can push the row to 2 lines) are
   less likely to wrap the row, which would eat the exact space the
   short-viewport rules further up this file exist to free up. Placed
   after the base rule on purpose - same selector, must win on source
   order since the media query alone isn't higher specificity. */
@media (max-height: 820px) {
  /* Taller tap target; the horizontal padding stays tight so six chips
     still fit in two rows. */
  .map-hero-dest-btn { padding: 11px 13px; font-size: 0.8rem; }
}
@media (max-width: 640px) {
  .map-hero-dest-btn { padding: 11px 12px; font-size: 0.78rem; }
}
/* Narrow AND short at once (a real small phone in portrait, e.g. an
   iPhone SE at 375x667) needs more than either cut alone provides - the
   dest-row still wraps to 2 rows at this width regardless of how small
   the buttons get, which a wide-but-short desktop window never has to
   deal with. This is what finally closes that specific gap (measured
   overlap without it: ~17px). */
@media (max-width: 640px) and (max-height: 700px) {
  /* Shortest screens: still bigger than it was, but this is where the
     hero genuinely runs out of vertical room. */
  .map-hero-dest-btn { padding: 9px 10px; font-size: 0.74rem; }
  .map-hero-dest-row { gap: 5px; }
  .map-hero-step p { font-size: 0.6rem; line-height: 1.25; }
  .map-hero-step { gap: 3px; }
  .map-hero-steps { gap: 6px; padding: 4px 12px 8px; }
}

/* ---------- sliding detail panel - opens over the map once a
   destination is selected, see map-hero.js's goToDestination. Same
   bottom-sheet shape on every size on purpose - this was already the
   validated mobile pattern too. ---------- */

.map-hero-panel {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 4;
  background: var(--card-bg);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(43,47,34,0.28);
  padding: 22px 26px 26px;
  max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  text-align: start;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 500ms cubic-bezier(.22,.61,.28,1), opacity 320ms ease;
  pointer-events: none;
}
.map-hero-panel.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

.map-hero-panel-close {
  align-self: flex-start;
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--bg);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
  color: var(--ink-soft); font-size: 0.84rem; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
[dir="rtl"] .map-hero-panel-close { padding: 7px 10px 7px 14px; }
.map-hero-panel-close::before { content: "\2190"; font-size: 1em; }
[dir="rtl"] .map-hero-panel-close::before { content: "\2192"; }

.map-hero-panel-name { font-size: 1.35rem; margin: 4px 0 0; }
.map-hero-panel-visa { margin: -6px 0 0; font-size: 0.86rem; color: var(--ink-soft); }
.map-hero-panel-price { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--accent-dark); }
.map-hero-panel-coming-soon {
  margin: 0; font-size: 0.82rem; color: var(--warn);
  background: var(--warn-soft); border-radius: 8px; padding: 8px 12px;
}

/* However many tiers a destination has (economy/standard/express - just
   standard/express for Thailand) - see fillPanel() in map-hero.js. */
.map-hero-panel-handling { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.map-hero-panel-handling-card {
  position: relative;
  flex: 1; min-width: 84px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px;
}
.map-hero-panel-handling-card .k { font-size: 0.72rem; color: var(--ink-faint); }
.map-hero-panel-handling-card .v { font-size: 0.98rem; font-weight: 700; color: var(--accent-dark); }
.map-hero-panel-recommended {
  position: absolute; top: -9px; inset-inline-start: 10px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px;
}
.map-hero-panel-time-note { margin: 0; font-size: 0.74rem; color: var(--ink-faint); }

.map-hero-panel-docs {
  margin: 2px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.84rem; color: var(--ink-soft);
}
.map-hero-panel-docs li { display: flex; gap: 6px; align-items: baseline; }
.map-hero-panel-docs li::before { content: '\2713'; color: var(--accent); font-size: 0.78rem; }
.map-hero-panel-docs .more { color: var(--ink-faint); }

.map-hero-panel-cta { align-self: flex-start; margin-top: 6px; }

@media (max-width: 640px) {
  .map-hero-panel { padding: 18px 18px 20px; }
}

/* ---------- prefers-reduced-motion: keep every button/pin fully
   functional (nothing here depends on continuous scroll anymore), just
   turn off the animated motion itself. ---------- */
@media (prefers-reduced-motion: reduce) {
  .map-hero-bg,
  #mapBgClose,
  .map-hero-overlay,
  .map-hero-panel {
    transition-duration: 0.001ms !important;
  }
}