/* =============================================================================
   Popova Shapka — one-page ticket landing

   Styled to the ski centre's own identity (popovashapka.com.mk):
     · Livvic for headings, Nunito Sans for everything else
     · white is the primary surface; deep navy #00172B carries the dark sections
     · cyan #00C2F3 is the secondary accent — the heading rule, icons, small
       details — never a background tint; gold #FCC20C and teal #29B3B7 follow
     · white and navy sections alternating, each headed by a short cyan rule
     · squared uppercase buttons rather than pills
     · topographic contour line art — here traced from this mountain's real
       elevation data, the same grid the 3D map is built from
   ========================================================================== */

:root {
  color-scheme: light;

  /* brand */
  --navy:        #00172b;
  --navy-soft:   #0a2740;
  --cyan:        #00c2f3;
  --cyan-deep:   #0099c0;
  --gold:        #fcc20c;
  --gold-deep:   #d2a003;
  --teal:        #29b3b7;
  --danger:      #e1264b;
  --danger-deep: #b21434;

  /* light surfaces — white is the primary, as on the official site */
  --bg:            #ffffff;
  --bg-alt:        #ffffff;   /* light sections stay white; a hairline divides them */
  --surface:       #ffffff;
  --wash:          #eff4f8;   /* neutral fill for icon chips and hovers */
  --border:        #e2ebf2;
  --border-strong: #cbd9e4;
  --ink:           #00172b;   /* headings */
  --text:          #33393e;   /* body copy */
  --muted:         #6d7f8d;
  --on-dark:       #ffffff;
  --on-dark-muted: #9fb6c8;

  --shadow:    0 1px 2px rgba(0, 23, 43, .05), 0 10px 26px -18px rgba(0, 23, 43, .35);
  --shadow-lg: 0 20px 50px -26px rgba(0, 23, 43, .42);

  --map-fog:   #cfe4f2;
  --map-sky-1: #a9d8ef;
  --map-sky-2: #e6f4fb;

  --radius:    10px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --container: 1180px;
  --tap:       54px;

  --font-head: Livvic, "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--ink);
}
p { margin: 0; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
}

.muted { color: var(--muted); }
.small { font-size: .86rem; }
.note  { margin-top: 16px; }
.lede  { max-width: 60ch; color: var(--muted); margin-bottom: 24px; font-size: 1.02rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--danger); color: #fff; padding: 12px 18px;
  font-weight: 800; text-decoration: none; text-transform: uppercase;
  font-size: .8rem; letter-spacing: .06em;
}
.skip-link:focus { left: 0; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

.topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px;
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand__mark { width: 38px; height: 32px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.08; min-width: 0; }
.brand__kicker {
  font-size: .57rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cyan-deep);
}
.brand__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.08rem;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.sos-jump {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: var(--radius-xs); text-decoration: none;
  font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
  color: #fff; background: var(--danger);
  white-space: nowrap;
  transition: background .18s;
}
.sos-jump:hover { background: var(--danger-deep); }

.lang-switch { display: flex; gap: 2px; }
.lang-switch button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  color: var(--muted); padding: 8px 9px 6px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* ── Section furniture ───────────────────────────────────────────────────── */

.section { padding: clamp(44px, 7vw, 88px) 0; position: relative; }
/* White on white — a hairline does the separating, not a tint. */
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--border); }

.section__head { margin-bottom: clamp(22px, 3.4vw, 36px); }
.section__head h2 { font-size: clamp(1.75rem, 5.2vw, 2.6rem); }

/* the short cyan rule the ski centre puts above every heading */
.section__head h2::before,
.hero__rule {
  content: "";
  display: block;
  width: 52px; height: 4px;
  background: var(--cyan);
  margin-bottom: 18px;
}

/* Full-bleed navy sections, alternating with the white ones. */
.section--dark {
  background: var(--navy);
  color: var(--on-dark-muted);
  overflow: hidden;
}
.section--dark h2     { color: var(--on-dark); }
.section--dark .lede  { color: var(--on-dark-muted); }
.section--dark .muted { color: var(--on-dark-muted); }

/* ── Contour line art, traced from the real elevation grid ───────────────── */

.topo {
  position: absolute; pointer-events: none;
  background-color: currentColor;
  -webkit-mask-image: url("../img/contours.svg");
  mask-image: url("../img/contours.svg");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
}

/* On white the contours are a pale grey texture, the way the official site
   draws them — cyan is saved for the navy sections where it actually reads. */
.hero__topo {
  top: -26%; right: -20%;
  width: min(980px, 96vw); aspect-ratio: 1;
  color: var(--navy);
  opacity: .09;
}
.section--dark .topo {
  top: -46%; right: -16%;
  width: min(860px, 88vw); aspect-ratio: 1;
  color: var(--cyan);
  opacity: .22;
}

.footer__topo {
  bottom: -70%; left: -12%;
  width: min(700px, 80vw); aspect-ratio: 1;
  color: var(--cyan);
  opacity: .18;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 7vw, 80px) 0 clamp(32px, 5vw, 56px);
}
.hero__inner { position: relative; }

.hero__head h1 {
  font-size: clamp(2.5rem, 11vw, 5rem);
  letter-spacing: -.025em;
}
.hero__tagline {
  margin-top: 12px; color: var(--muted);
  font-size: clamp(1rem, 3.2vw, 1.14rem);
}
.hero__alt { margin-top: 8px; color: var(--muted); font-size: .95rem; font-weight: 600; }
.hero__alt strong {
  color: var(--ink); font-family: var(--font-head); font-weight: 700;
  font-size: 1.2rem; font-variant-numeric: tabular-nums;
}

.hero__cards {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .hero__cards { grid-template-columns: minmax(260px, .78fr) 1.22fr; }
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(18px, 3.2vw, 26px);
  box-shadow: var(--shadow);
}

.card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.card__head h2 {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

/* Emergency numbers, right under the map — the whole point is that a client
   never has to scroll or hunt for the header's SOS link to find these. */
.sos-card { grid-column: 1 / -1; }
.sos-card .card__head { margin-bottom: 12px; }
.sos-card__link {
  flex: none; font-family: var(--font-body); font-size: .78rem; font-weight: 800;
  color: var(--cyan-deep); text-decoration: none; white-space: nowrap;
}
.sos-card__link:hover { text-decoration: underline; }

.status-card { display: flex; flex-direction: column; justify-content: center; gap: 12px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 9px 16px 9px 13px; border-radius: var(--radius-xs);
  font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: #fff;
}
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; position: relative; }
.status-pill[data-state="open"]      { background: var(--teal); }
.status-pill[data-state="closed"]    { background: var(--gold-deep); }
.status-pill[data-state="offseason"] { background: var(--navy-soft); }
.status-pill[data-state="open"] .status-pill__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; animation: ping 2s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .status-pill__dot::after { animation: none; opacity: .3; } }

.status-note {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.34rem; line-height: 1.25; color: var(--ink);
}
.status-season { font-size: .85rem; }

/* ── Weather ─────────────────────────────────────────────────────────────── */

.wx-now { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px; }
.wx-now__icon { color: var(--cyan); display: flex; }
.wx-icon { width: 42px; height: 42px; }
.wx-now__temp {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2.1rem, 8vw, 2.8rem); line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.wx-now__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .86rem; }
.wx-now__desc { font-weight: 700; color: var(--ink); }

.wx-days {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
}
.wx-day { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wx-day .wx-icon { width: 26px; height: 26px; color: var(--muted); }
.wx-day__name {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); font-weight: 800;
}
.wx-day__temp { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-day__temp strong { color: var(--ink); font-weight: 800; }

/* ── Working hours ───────────────────────────────────────────────────────── */

/* align-items: start — an expanded card must not stretch its neighbour. */
.hours-list { display: grid; gap: 12px; align-items: start; }
@media (min-width: 720px) { .hours-list { grid-template-columns: 1fr 1fr; } }

.facility {
  /* row-gap 0: the collapsed week row must not reserve a gap of its own */
  display: grid; align-items: center; column-gap: 16px; row-gap: 0;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon body toggle" "week week week";
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.facility[data-open="true"]      { border-left-color: var(--teal); }
.facility[data-offseason="true"] { border-left-color: var(--border-strong); }

.facility__icon {
  grid-area: icon;
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-xs);
  background: var(--wash); color: var(--cyan-deep);
}
.facility__icon svg { width: 24px; height: 24px; }
.facility[data-open="true"] .facility__icon {
  background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal);
}
.facility[data-offseason="true"] .facility__icon { background: var(--wash); color: var(--muted); }
.facility__body { grid-area: body; min-width: 0; }
.facility__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink);
}
.facility__today { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.facility[data-offseason="true"] .facility__today { font-style: italic; }

.facility__week { display: contents; }
.facility__week summary {
  grid-area: toggle; justify-self: end;
  list-style: none; cursor: pointer; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: var(--radius-xs); color: var(--muted);
  transition: background .18s, color .18s;
}
.facility__week summary::-webkit-details-marker { display: none; }
.facility__week summary:hover { background: var(--wash); color: var(--ink); }
.facility__week summary svg { width: 18px; height: 18px; transition: transform .25s ease; }
.facility__week[open] summary svg { transform: rotate(180deg); }

.facility__week dl {
  grid-area: week;
  margin: 4px 0 0; padding: 14px 0 2px; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: auto 1fr; gap: 5px 16px;
  font-size: .86rem; font-variant-numeric: tabular-nums;
}
.facility__week:not([open]) dl { display: none; }
.facility__week dt {
  color: var(--muted); text-transform: uppercase; font-size: .7rem;
  letter-spacing: .1em; font-weight: 800; align-self: center;
}
.facility__week dt[data-today] { color: var(--gold-deep); }
.facility__week dd { margin: 0; font-weight: 600; }
.facility__week dd[data-closed] { color: var(--muted); font-weight: 400; }

/* ── Emergency (navy section) ────────────────────────────────────────────── */

.contacts { display: grid; gap: 12px; position: relative; }
@media (min-width: 780px) { .contacts { grid-template-columns: 1fr 1fr; } }

.contact {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  min-height: var(--tap); padding: 15px 18px;
  border-radius: var(--radius-sm); text-decoration: none;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .13);
  color: var(--on-dark);
  transition: transform .14s ease, background .2s, border-color .2s;
}
.contact:hover  { transform: translateY(-2px); background: rgba(255, 255, 255, .1); }
.contact:active { transform: translateY(0); }

.contact__icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--radius-xs); flex: none;
  background: rgba(255, 255, 255, .1); color: var(--cyan);
}
.contact__icon svg { width: 20px; height: 20px; }
.contact__text { display: flex; flex-direction: column; min-width: 0; }
.contact__name { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; }
.contact__note { font-size: .82rem; color: var(--on-dark-muted); }
.contact__number {
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.contact[data-level="sos"] {
  background: var(--danger); border-color: transparent;
  box-shadow: 0 14px 34px -18px var(--danger);
}
.contact[data-level="sos"]:hover { background: var(--danger-deep); }
.contact[data-level="sos"] .contact__icon { background: rgba(255, 255, 255, .2); color: #fff; }
.contact[data-level="sos"] .contact__note { color: rgba(255, 255, 255, .85); }

.contact[data-level="high"] { border-color: rgba(255, 255, 255, .3); }
.contact[data-level="high"] .contact__icon { background: rgba(225, 38, 75, .2); color: #ff7d96; }
.contact[data-level="high"] .contact__number { font-size: 1.5rem; color: var(--gold); }

.contact[data-level="info"] .contact__icon { background: rgba(0, 194, 243, .14); }

/* ── Same contacts, retinted for the light quick-card under the map ─────── */
.contacts--card .contact {
  background: var(--wash); border-color: var(--border); color: var(--ink);
  min-height: auto; padding: 12px 14px;
}
.contacts--card .contact:hover { background: var(--border); }
.contacts--card .contact__icon { background: rgba(0, 23, 43, .06); color: var(--cyan-deep); }
.contacts--card .contact__note { color: var(--muted); }

.contacts--card .contact[data-level="sos"] {
  background: var(--danger); border-color: transparent; color: #fff;
}
.contacts--card .contact[data-level="sos"]:hover { background: var(--danger-deep); }
.contacts--card .contact[data-level="sos"] .contact__icon { background: rgba(255, 255, 255, .2); color: #fff; }
.contacts--card .contact[data-level="sos"] .contact__note { color: rgba(255, 255, 255, .85); }
.contacts--card .contact[data-level="sos"] .contact__number { color: #fff; }

.contacts--card .contact[data-level="high"] { border-color: var(--border-strong); }
.contacts--card .contact[data-level="high"] .contact__icon { background: rgba(225, 38, 75, .1); color: var(--danger); }
.contacts--card .contact[data-level="high"] .contact__number { color: var(--danger-deep); }

/* ── Locate ──────────────────────────────────────────────────────────────── */

.locate {
  margin-top: 28px; padding-top: 24px; padding-bottom: 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  position: relative;
}
.locate__label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800;
  color: var(--cyan); margin-bottom: 12px;
}
.locate__result {
  margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-size: .9rem; color: var(--on-dark-muted);
}

.geo {
  display: flex; flex-direction: column;
  padding: 11px 18px; border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.geo__coords {
  font-family: var(--font-head); font-size: 1.18rem; font-weight: 700;
  color: var(--on-dark); font-variant-numeric: tabular-nums;
}
.geo__meta { font-size: .76rem; color: var(--on-dark-muted); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 20px;
  font-family: var(--font-body); font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  border-radius: var(--radius-xs); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none;
  transition: background .18s, color .18s, border-color .18s, transform .14s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover  { border-color: var(--cyan); color: var(--cyan-deep); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: progress; }

.btn--primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

/* buttons sitting on a navy section */
.section--dark .btn {
  background: transparent; color: var(--on-dark); border-color: rgba(255, 255, 255, .3);
}
.section--dark .btn:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }

.btn--chip { min-height: 40px; padding: 0 15px; font-size: .72rem; }
.btn--chip[aria-pressed="false"] { opacity: .5; }

/* ── 3D map ──────────────────────────────────────────────────────────────── */

.section__head--map {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.map-tools { display: flex; flex-wrap: wrap; gap: 8px; }

.map-stage {
  position: relative; isolation: isolate;
  height: clamp(400px, 66vh, 660px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, var(--map-sky-1) 0%, var(--map-sky-2) 60%, var(--map-fog) 100%);
  touch-action: none;
}

#map-canvas { display: block; width: 100%; height: 100%; }
/* z-index here caps the labels inside their own stacking context — without it
   a pin's inline z-index (up to ~1000) paints over the detail panel. */
.map-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.map-label {
  position: absolute; top: 0; left: 0; will-change: transform;
  pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 6px 11px; border-radius: var(--radius-xs);
  font-family: var(--font-body); font-size: .76rem; line-height: 1.3; text-align: left;
  color: var(--navy);
  background: rgba(255, 255, 255, .94);
  border: 0; border-left: 3px solid var(--cyan);
  box-shadow: 0 6px 16px -8px rgba(0, 23, 43, .7);
  white-space: nowrap;
  transition: opacity .2s;
}
.map-label:hover { background: #fff; }
.map-label__name { font-family: var(--font-head); font-weight: 700; }
.map-label__elev {
  font-size: .66rem; opacity: .62; font-variant-numeric: tabular-nums;
  font-weight: 800; letter-spacing: .04em;
}

.map-label--peak {
  background: rgba(0, 23, 43, .84); color: #fff; border-left-color: var(--gold);
}
.map-label--peak:hover { background: rgba(0, 23, 43, .96); }

.map-label.is-primary {
  background: var(--danger); color: #fff; border-left-color: var(--gold);
  box-shadow: 0 8px 22px -8px var(--danger);
}
.map-label.is-primary .map-label__elev { opacity: .85; }

.map-compass {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--border-strong); color: var(--navy);
  font-size: .66rem; font-weight: 800; letter-spacing: .1em;
  transform: rotate(var(--az, 0rad));
}
.map-compass::before {
  content: ""; position: absolute; top: 3px; left: 50%; translate: -50% 0;
  border: 4px solid transparent; border-bottom-color: var(--danger);
}
.map-compass span { margin-top: 7px; }

.map-hint {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0;
  padding: 7px 16px; border-radius: var(--radius-xs);
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--navy);
  background: rgba(255, 255, 255, .88);
  pointer-events: none; white-space: nowrap;
}

.map-loading, .map-fallback {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-align: center; padding: 24px; color: var(--navy);
  background: rgba(255, 255, 255, .82);
  font-weight: 700;
}
.map-stage[data-state="loading"] .map-loading      { display: flex; }
.map-stage[data-state="unsupported"] .map-fallback { display: flex; }
.map-stage[data-state="unsupported"] :is(#map-canvas, .map-hint, .map-compass) { display: none; }
.map-stage[data-state="ready"] .map-loading        { display: none; }

.map-loading::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(0, 23, 43, .15); border-top-color: var(--cyan);
  animation: spin 850ms linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .map-loading::before { animation-duration: 3s; } }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  background: var(--navy); color: var(--on-dark-muted);
  padding: clamp(32px, 5vw, 56px) 0 calc(clamp(32px, 5vw, 56px) + env(safe-area-inset-bottom));
  font-size: .88rem;
  position: relative; overflow: hidden;
}
.footer .container { position: relative; }
.footer p + p { margin-top: 6px; }
.footer .muted { color: var(--on-dark-muted); }
#footer-coords {
  font-family: var(--font-head); font-weight: 700; font-size: 1.04rem;
  color: var(--on-dark); font-variant-numeric: tabular-nums;
}

.noscript { padding: 28px 0; }

/* ── Anchors clear the sticky bar ────────────────────────────────────────── */

.section, .hero { scroll-margin-top: 72px; }

/* ── Narrow phones ───────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .sos-jump__long { display: none; }
  .lang-switch button { padding: 8px 7px 6px; }
}
@media (min-width: 561px) {
  .sos-jump__short { display: none; }
}
@media (max-width: 430px) {
  .brand__kicker { display: none; }
  .contact { gap: 12px; padding: 13px 14px; }
  .contact__note { display: none; }
  .wx-days { gap: 4px; }
  .facility { padding: 14px; column-gap: 12px; }
}
@media (max-width: 360px) {
  .brand__name { font-size: .95rem; }
}

/* ── Phone refinements ───────────────────────────────────────────────────── */

@media (max-width: 470px) {
  /* The mark alone carries the brand here — the page title is right below it,
     and the space is worth more to the SOS jump and the language switch. */
  .brand__text { display: none; }

  /* Keep "Snow depth 0 cm" from breaking across lines mid-phrase. */
  .wx-now { grid-template-columns: auto 1fr; row-gap: 8px; }
  .wx-now__meta { grid-column: 1 / -1; }

  /* Quieter contours so the hero copy stays the thing you read first. */
  .hero__topo { top: -18%; right: -34%; width: min(760px, 130vw); opacity: .07; }
}

/* ── Piste map: stats strip and difficulty legend ────────────────────────── */

.map-stats {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: .82rem; color: var(--muted);
}
.map-stats b {
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  color: var(--ink); margin-right: 5px;
  font-variant-numeric: tabular-nums;
}

.map-legend {
  position: absolute; left: 16px; bottom: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 9px 14px; border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--navy);
  pointer-events: none;
}
.map-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.map-legend__swatch {
  width: 16px; height: 5px; border-radius: 2px; flex: none;
  box-shadow: 0 0 0 1px rgba(0, 23, 43, .18);
}

@media (max-width: 620px) {
  .map-legend {
    left: 12px; right: 12px; bottom: 12px;
    justify-content: space-between; gap: 4px 8px;
    padding: 8px 10px; font-size: .62rem;
  }
  .map-legend__swatch { width: 12px; height: 4px; }
  /* the drag hint would sit on top of the legend on a phone */
  .map-hint { display: none; }
}

/* ── Map detail panel ────────────────────────────────────────────────────── */
/* Desktop: a card over the right-hand side of the map. Phone: a bottom sheet. */

.map-tip {
  position: absolute; top: 0; left: 0;
  translate: 14px -50%;
  padding: 5px 10px; border-radius: var(--radius-xs);
  background: var(--navy); color: #fff;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
  pointer-events: none; z-index: 5;
}

.detail {
  position: absolute; z-index: 6;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.detail[hidden] { display: none; }

.detail__scroll { overflow-y: auto; overscroll-behavior: contain; }

.detail__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 23, 43, .55); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .18s;
}
.detail__close:hover { background: var(--navy); }
.detail__close svg { width: 16px; height: 16px; }

.detail__media { position: relative; background: var(--navy); }
.detail__media img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  scroll-snap-align: center; flex: none;
}
.detail__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.detail__track::-webkit-scrollbar { display: none; }
.detail__dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 6px;
}
.detail__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.detail__dot[data-active="true"] { background: #fff; width: 18px; border-radius: 3px; }

.detail__body { padding: 18px 20px 22px; }

.detail__kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted); margin-bottom: 8px;
}
.detail__kicker::before {
  content: ""; width: 16px; height: 4px; border-radius: 2px;
  background: var(--grade, var(--cyan));
}
.detail__title {
  font-size: 1.5rem; line-height: 1.15; margin-bottom: 10px;
}
.detail__blurb { font-size: .9rem; color: var(--text); }

.detail__facts {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px;
}
.detail__facts div { min-width: 0; }
.detail__facts dt {
  font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 2px;
}
.detail__facts dd {
  margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* desktop / tablet: a card inside the map, right-hand side */
@media (min-width: 721px) {
  .detail {
    top: 16px; right: 16px; bottom: 16px; width: min(360px, 42%);
    animation: detail-in .28s cubic-bezier(.22, .8, .3, 1);
  }
  @keyframes detail-in { from { opacity: 0; transform: translateX(16px); } }
}

/* phone: a bottom sheet that never covers more than two thirds of the map */
@media (max-width: 720px) {
  .detail {
    left: 8px; right: 8px; bottom: 8px; max-height: 68%;
    border-radius: var(--radius) var(--radius) var(--radius-sm) var(--radius-sm);
    animation: sheet-in .3s cubic-bezier(.22, .8, .3, 1);
  }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(40px); } }
  .detail__media img { aspect-ratio: 16 / 9; }
  .detail__body { padding: 16px 16px 20px; }
  .detail__title { font-size: 1.3rem; }
  /* the legend would sit under the sheet */
  .map-stage:has(.detail:not([hidden])) .map-legend { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .detail { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   HERO = THE MAP
   The mountain is the reason the page exists, so it is the page's first and
   largest object. The name sits over it, the live cards overlap its lower
   edge, and the section furniture is laid on the stage rather than above it.
   ═════════════════════════════════════════════════════════════════════════ */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
}

.hero {
  position: relative;
  padding: 0;
  overflow: visible;            /* the cards lift out of the stage */
  background: var(--bg);
}

.hero__stage { position: relative; height: clamp(520px, 82vh, 900px); }

/* the map fills the stage edge to edge — no card framing at hero size */
.hero__stage .map-stage {
  position: absolute; inset: 0;
  height: 100%;
  border-radius: 0;
  border: 0; border-bottom: 1px solid var(--border);
  box-shadow: none;
}

/* Keeps the name legible over snow without hiding the terrain. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .5) 22%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(0deg,   var(--bg) 0%, rgba(255, 255, 255, .55) 9%, rgba(255, 255, 255, 0) 26%);
}

.hero__head {
  position: absolute; top: clamp(22px, 4.5vh, 54px); left: 0; right: 0; z-index: 4;
  pointer-events: none;
  max-width: min(var(--container), 100%);
}
.hero__head > * { pointer-events: auto; }
.hero__head h1 { font-size: clamp(2.3rem, 7.4vw, 4.6rem); letter-spacing: -.03em; }
.hero__head .hero__tagline { margin-top: 6px; }
.hero__head .hero__alt { margin-top: 4px; }
.hero__head .map-stats { margin-top: 12px; }

.hero__tools {
  position: absolute; top: clamp(22px, 4.5vh, 54px); left: 0; right: 0; z-index: 5;
  display: flex; justify-content: flex-end;
  pointer-events: none;
}
.hero__tools .map-tools { pointer-events: auto; }
.hero__tools .btn {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* the live cards ride up over the bottom edge of the map */
.hero__cards {
  position: relative; z-index: 5;
  margin-top: clamp(-136px, -11vh, -80px);
  padding-bottom: clamp(28px, 5vw, 52px);
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .hero__cards { grid-template-columns: minmax(260px, .78fr) 1.22fr; }
}

/* compass moves out of the tools' corner */
.hero__stage .map-compass { top: auto; bottom: 16px; right: 16px; }
/* and the detail panel clears both */
@media (min-width: 721px) {
  .hero__stage .detail { top: 82px; bottom: 74px; }
}

/* ── Phone: the map stays big, but nothing fights for the same corner ───── */
@media (max-width: 720px) {
  .hero__stage { height: clamp(440px, 62vh, 620px); }

  .hero__head { top: 18px; }
  .hero__head h1 { font-size: clamp(2rem, 9.5vw, 2.9rem); }
  .hero__head .map-stats { margin-top: 8px; font-size: .76rem; gap: 4px 12px; }

  /* tools drop below the map instead of covering it */
  .hero__tools {
    position: static; justify-content: flex-start;
    padding-top: 14px;
  }
  .hero__tools .btn { background: var(--surface); }

  .hero__cards { margin-top: 18px; }

  .hero__stage .map-compass { bottom: 54px; }
}

/* ── Hero corrections ────────────────────────────────────────────────────── */

/* One number drives both how far the cards ride up and how far the map
   furniture has to move to stay clear of them. */
.hero { --card-lift: clamp(80px, 11vh, 136px); }
.hero__cards { margin-top: calc(-1 * var(--card-lift)); }

.hero__stage .map-legend,
.hero__stage .map-hint,
.hero__stage .map-compass { bottom: calc(var(--card-lift) + 18px); }

/* .hero__tools .btn set a white background but left --primary's white text,
   which erased the Directions button. Restore the filled variant. */
.hero__tools .btn--primary {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.hero__tools .btn--primary:hover {
  background: var(--gold); border-color: var(--gold); color: var(--navy);
}

@media (max-width: 720px) {
  .hero { --card-lift: 0px; }
  .hero__stage .map-legend { bottom: 12px; }
  .hero__stage .map-compass { bottom: 54px; }
}

/* ── Ride-this-run action ────────────────────────────────────────────────── */
.detail__ride { width: 100%; margin-top: 18px; }
.detail__ride[hidden] { display: none; }

/* Fullscreen: the stage becomes the whole screen, so the framing has to adapt. */
.map-stage:fullscreen { border-radius: 0; border: 0; }
.map-stage:fullscreen .map-legend { bottom: 16px; }
.map-stage:fullscreen .map-compass { bottom: 16px; }
.map-stage:fullscreen .map-hint { bottom: 16px; }

/* A disabled primary button must not pick up the hover colour. */
.btn--primary:disabled,
.btn--primary:disabled:hover {
  background: var(--teal); border-color: var(--teal); color: #fff;
}