/* Scrolly Map Story: everything is prefixed sm- / scrolly- so it stays out of the theme's way. */
:root {
  --sm-accent: #ffb703;
  --sm-panel: 38vw;
  --sm-bg: #0d1b26;
}

.sm-root { display: block; }

/* The map layer, topbar, progress and lightbox are moved to <body> by the script so that
   position: fixed is never trapped inside a transformed theme/page-builder wrapper. */
.sm-map {
  position: fixed; z-index: 0; pointer-events: none;
  background: var(--sm-bg);
  opacity: 1; transition: opacity .6s ease;
}
.sm-map .mapboxgl-marker { pointer-events: auto; }

body.sm-pos-background .sm-map { inset: 0; width: 100%; height: 100%; }

body.sm-pos-right .sm-map, body.sm-pos-left .sm-map {
  top: 0; bottom: 0; width: var(--sm-panel); height: 100%;
}
body.sm-pos-right .sm-map { right: 0; }
body.sm-pos-left .sm-map { left: 0; }
body.sm-pos-right { padding-right: var(--sm-panel); box-sizing: border-box; }
body.sm-pos-left { padding-left: var(--sm-panel); box-sizing: border-box; }

body.sm-pos-band .sm-map { top: 0; left: 0; right: 0; height: var(--sm-panel); }
body.sm-pos-band .scrolly-stop { padding-top: calc(var(--sm-panel) + 20px); }

/* panels and the band only show while you are inside the story */
body.sm-pos-right .sm-map:not(.sm-on),
body.sm-pos-left .sm-map:not(.sm-on),
body.sm-pos-band .sm-map:not(.sm-on) { opacity: 0; }

/* phones: side panels become a band across the top */
@media (max-width: 899px) {
  body.sm-pos-right, body.sm-pos-left { padding-left: 0; padding-right: 0; }
  body.sm-pos-right .sm-map, body.sm-pos-left .sm-map { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 34vh; }
  body.sm-pos-right .scrolly-stop, body.sm-pos-left .scrolly-stop { padding-top: calc(34vh + 16px); }
}

/* the page behind a full-screen map has to be see-through (switch off with theme_fix="no") */
body.sm-page.sm-theme-fix, body.sm-page.sm-theme-fix #page, body.sm-page.sm-theme-fix #wrapper,
body.sm-page.sm-theme-fix .site, body.sm-page.sm-theme-fix #content, body.sm-page.sm-theme-fix .site-content,
body.sm-page.sm-theme-fix #main, body.sm-page.sm-theme-fix .site-main, body.sm-page.sm-theme-fix #primary,
body.sm-page.sm-theme-fix .content-area, body.sm-page.sm-theme-fix .entry-content,
body.sm-page.sm-theme-fix .wpb-content-wrapper, body.sm-page.sm-theme-fix .page-content {
  background: transparent !important;
}
body.sm-page.sm-theme-fix { background: var(--sm-bg) !important; }

/* ---- chrome ---- */
.sm-topbar {
  position: fixed; z-index: 20; top: 12px; right: 2vw;
  display: flex; gap: .6em; align-items: baseline;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(9, 20, 29, .86); border: 1px solid rgba(255,255,255,.14); color: #eaf2f6;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 13px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif;
  max-width: calc(100vw - 24px); transition: opacity .4s;
}
.sm-topbar-day { color: var(--sm-accent); font-weight: 600; white-space: nowrap; }
.sm-topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-topbar.sm-off { opacity: 0; pointer-events: none; }
body.admin-bar .sm-topbar { top: 44px; }

.sm-progress { position: fixed; z-index: 21; left: 0; top: 0; right: 0; height: 3px; pointer-events: none; }
.sm-progress div { height: 100%; width: 0; background: var(--sm-accent); }
body.admin-bar .sm-progress { top: 32px; }

.sm-notice {
  position: fixed; z-index: 30; left: 50%; top: 56px; transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px)); padding: 12px 16px; border-radius: 12px;
  background: #3a2a05; border: 1px solid #8a6414; color: #ffe7b0; font: 14px/1.4 system-ui, sans-serif;
}
.sm-notice[hidden] { display: none; }

/* ---- a stop ---- */
.scrolly-stop { position: relative; z-index: 2; box-sizing: border-box; }
.scrolly-stop *, .scrolly-stop *::before, .scrolly-stop *::after { box-sizing: border-box; }
.scrolly-stop.sm-empty { min-height: 1px; }
.sm-row { display: flex; padding: 5vh 3vw; }
.sm-space { display: block; width: 100%; }
.sm-align-left .sm-row { justify-content: flex-start; }
.sm-align-center .sm-row { justify-content: center; }
.sm-align-right .sm-row { justify-content: flex-end; }

.sm-card {
  width: 100%; padding: 26px 26px 22px; border-radius: 20px;
  --sm-ink: #eaf2f6; --sm-mute: #9db3c0; --sm-lede: #bfe6f5; --sm-line: rgba(255,255,255,.14); --sm-fig: #12212c;
  background: rgba(9, 20, 29, .80); color: var(--sm-ink);
  border: 1px solid var(--sm-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  opacity: .6; transition: opacity .5s ease;
}
.scrolly-stop.sm-active .sm-card { opacity: 1; }
.sm-w-wide .sm-card { max-width: min(1100px, 62vw); }
.sm-w-medium .sm-card { max-width: 640px; }
.sm-w-narrow .sm-card { max-width: 440px; }
.sm-w-full .sm-card { max-width: none; }

.sm-card-light .sm-card .sm-title { color: var(--sm-title-c, #1b2430); }
.sm-card-light .sm-card {
  --sm-ink: #1b2430; --sm-mute: #5a6877; --sm-lede: #2b4a63; --sm-line: rgba(0,0,0,.12); --sm-fig: #e8edf1;
  background: rgba(255,255,255,.90); box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.sm-card-none .sm-card {
  background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.65);
  --sm-ink: #fff; --sm-mute: #dbe6ec; --sm-lede: #fff; --sm-line: rgba(255,255,255,.3); --sm-fig: rgba(255,255,255,.1);
}

.sm-head { margin-bottom: 16px; }
.sm-kicker { margin: 0 0 6px; color: var(--sm-accent); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.scrolly-stop .sm-card .sm-title { margin: 0 0 8px; padding: 0; color: var(--sm-title-c, #fff); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; }
.sm-body { color: var(--sm-lede); font-size: 18px; line-height: 1.5; margin: 0 0 18px; max-width: 64ch; }
.sm-body p { margin: 0 0 .7em; color: inherit; }
.sm-body a { color: var(--sm-accent); text-decoration: underline; }

/* ---- photo cluster ---- */
.sm-cluster-wrap { container-type: inline-size; margin: 0 0 22px; }
.sm-cluster {
  display: grid; gap: 6px; grid-auto-flow: dense;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: calc(100cqw / 9 - 5px);
}
.sm-cluster figure {
  margin: 0; position: relative; overflow: hidden; border-radius: 10px; background: var(--sm-fig);
  grid-column: span 2; grid-row: span 2;
}
.sm-cluster figure.tall { grid-row: span 3; }
.sm-cluster figure.pano { grid-column: 1 / -1; grid-row: span 3; }
.sm-cluster figure.pano-s { grid-row: span 4; }
.sm-cluster figure.feature { grid-column: span 4; grid-row: span 4; }
.sm-cluster.sm-n1 figure { grid-column: 1 / -1; grid-row: span 5; }
.sm-cluster.sm-n2 figure { grid-column: span 3; grid-row: span 3; }
.sm-cluster.sm-n3 figure:first-child { grid-column: span 4; grid-row: span 3; }
.sm-cluster img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .6s ease; margin: 0; max-width: none; }
.sm-cluster figure:hover img { transform: scale(1.04); }
.sm-cluster figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px;
  font-size: 12.5px; line-height: 1.35; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7));
  pointer-events: none; opacity: 0; transition: opacity .25s; text-shadow: none;
}
.sm-cluster figure:hover figcaption { opacity: 1; }

/* ---- facts and sources ---- */
.sm-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.sm-facts li { margin: 0; padding: 0; font-size: 14.5px; line-height: 1.5; color: var(--sm-ink); }
.sm-facts strong { display: block; font-weight: 600; margin-bottom: 1px; }
.sm-sources { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--sm-line); font-size: 12px; color: var(--sm-mute); }
.sm-sources a { color: var(--sm-accent); text-decoration: underline; text-underline-offset: 2px; margin-right: .6em; white-space: nowrap; }

.sm-upcoming .sm-kicker { color: #bfe6f5; }
.sm-upcoming .sm-card { border-style: dashed; }

/* ---- pins ---- */
.sm-pin {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: 600 11px system-ui, sans-serif; color: #fff;
  background: rgba(10,22,31,.85); border: 2px solid rgba(255,255,255,.7);
  transition: background .3s, border-color .3s, transform .3s;
}
.sm-pin.sm-visited { background: var(--sm-accent); border-color: #fff; color: #1a1204; }
.sm-pin.sm-current { transform: scale(1.3); }
.sm-pin.sm-upcoming-pin { border-style: dashed; }

/* ---- lightbox ---- */
.sm-box { position: fixed; inset: 0; z-index: 99999; background: rgba(4,10,15,.94); display: grid; place-items: center; align-content: center; gap: 10px; padding: 20px; cursor: zoom-out; }
.sm-box[hidden] { display: none; }
.sm-box img { max-width: 94vw; max-height: 84vh; border-radius: 8px; }
.sm-box p { margin: 0; color: #b6c7d1; font: 14px/1.4 system-ui, sans-serif; min-height: 1.5em; }
.sm-box-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 10px; font-size: 36px; line-height: 1; cursor: pointer; }
.sm-box-nav:hover { background: rgba(255,255,255,.22); }
.sm-box-prev { left: 12px; } .sm-box-next { right: 12px; }
.sm-box-nav[hidden] { display: none; }

/* ---- phones ---- */
@media (max-width: 899px) {
  .sm-row { padding: 10px; }
  .sm-card, .sm-w-wide .sm-card, .sm-w-medium .sm-card, .sm-w-narrow .sm-card { max-width: none; padding: 18px 14px 16px; }
  .sm-card .sm-title { font-size: 28px; }
  .sm-cluster { grid-template-columns: repeat(4, 1fr); grid-auto-rows: calc(100cqw / 6 - 4px); gap: 5px; }
  .sm-cluster figure.pano, .sm-cluster figure.feature { grid-column: span 4; }
  .sm-cluster figure.pano { grid-row: span 2; }
  .sm-cluster figure.pano-s { grid-row: span 3; }
  .sm-cluster figure.feature { grid-row: span 4; }
  .sm-cluster.sm-n1 figure { grid-row: span 4; }
  .sm-cluster.sm-n2 figure, .sm-cluster.sm-n3 figure:first-child { grid-column: span 4; grid-row: span 4; }
  .sm-cluster figcaption { opacity: 1; }
  .sm-facts { grid-template-columns: 1fr; }
  .sm-box-nav { width: 40px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-card { transition: none; }
}

/* ---- number badge on each text card (matches the map pin) ---- */
.sm-num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; vertical-align: middle;
  border-radius: 50%; background: #ffb703; color: #111; border: 2px solid #111; box-shadow: 0 0 0 2px #ffb703;
  font: 700 12px/1 system-ui, sans-serif; letter-spacing: 0;
}