/* London Free Guide — Spot detail page. Built on tokens.css + home.css.
   Reuses nav, footer, band, card, badges and cost pills from home.css. */

/* ---------- breadcrumb ---------- */
.spot-crumb { display: flex; align-items: center; gap: 8px; padding: 16px 0 2px; font-size: .78rem; font-weight: 500; color: var(--lfg-white-50); flex-wrap: wrap; }
.spot-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .78rem; color: var(--lfg-white-70); padding: 0; }
.spot-back span { font-size: .82rem; line-height: 1; }
.spot-back:hover { color: #fff; }
.spot-crumb a:hover { color: #fff; }
.spot-crumb .sep { color: var(--lfg-white-30); }
.spot-crumb .cur { color: var(--lfg-white-90); font-weight: 600; }

/* ---------- hero (split: lede + vertical reel) ---------- */
.hero { position: relative; padding: 14px 0 26px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -160px; right: -120px; width: 520px; height: 520px;
  background: radial-gradient(circle, color-mix(in srgb, var(--lfg-accent) 32%, transparent) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1fr 330px; gap: 52px; align-items: start; } }
@media (min-width: 900px) { .hero-lede { padding-top: 4px; } .hero-media { max-width: none; justify-self: stretch; } }

.hero-hook { font-family: var(--lfg-font-hand); color: #fff; font-size: 2.2rem; line-height: 1.1; margin-bottom: 0.7em; }
.hero-title { font-family: var(--lfg-font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: .92; margin: 0 0 .42em; text-wrap: balance; }
.hero-title .r { color: var(--lfg-accent); }

.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.hero-meta .cost { font-size: .68rem; padding: .42em .8em; }
.hero-meta .badge { position: static; font-size: .62rem; }
.hero-meta .badge.ghost { background: rgba(255,255,255,.14); }
.hero-meta .reel-flag { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lfg-white-70); border: 1px solid var(--lfg-white-15); border-radius: 4px; padding: .42em .6em; }

.hero-loc { display: flex; align-items: center; gap: 7px; color: var(--lfg-white-70); font-weight: 500; font-size: .98rem; margin-bottom: 24px; }
.hero-loc .pin { color: var(--lfg-accent); }
.hero-standfirst { margin-top: 24px; max-width: 48ch; font-size: 1.12rem; line-height: 1.6; color: var(--lfg-white-90); text-wrap: pretty; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.btn-lg { display: inline-flex; align-items: center; gap: 9px; padding: .82rem 1.3rem; font-size: .82rem; }
.btn-ghost { background: transparent; border: 1.5px solid var(--lfg-white-30); color: #fff; }
.btn-ghost:hover { border-color: var(--lfg-white-50); background: var(--lfg-white-08); }
.btn-ig-ico { font-size: 1rem; }

/* the vertical reel media */
.hero-media { justify-self: center; width: 100%; max-width: 320px; }
.media-frame {
  position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden;
  background: #1a1a1a; box-shadow: 0 26px 64px rgba(0,0,0,.55); line-height: 0;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame .media-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 26%, transparent 58%, rgba(0,0,0,.72) 100%); }
.media-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; }
.media-play span { width: 64px; height: 64px; border-radius: 50%; background: rgba(230,59,46,.94); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.35rem; padding-left: 5px; box-shadow: 0 10px 28px rgba(0,0,0,.45); transition: transform .16s; }
.hero-media:hover .media-play span { transform: scale(1.09); }
.media-note { position: absolute; left: 14px; right: 14px; bottom: 13px; display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lfg-white-90); }
.media-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lfg-accent); flex-shrink: 0; }

/* carousel + single-image variants */
.media-frame.is-carousel { box-shadow: 7px 7px 0 0 rgba(255,255,255,.07), 14px 14px 0 0 rgba(255,255,255,.04), 0 26px 64px rgba(0,0,0,.55); }

/* ---------- text-forward hero: branded "always free" panel (no photo) ---------- */
.hero-feature {
  position: relative; overflow: hidden;
  background: var(--lfg-pure-black);
  border: 1px solid var(--lfg-white-15); border-radius: 18px;
  box-shadow: 0 26px 64px rgba(0,0,0,.5);
  min-height: 380px; padding: 26px 24px;
  display: flex; flex-direction: column;
}
[data-theme="light"] .hero-feature { background: #1c140d; border-color: rgba(255,255,255,.12); }
.hf-glow { position: absolute; top: -30%; right: -20%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lfg-accent) 42%, transparent) 0%, transparent 70%); pointer-events: none; }
.hf-kicker { position: relative; font-family: var(--lfg-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: #fff; opacity: .6; }
.hf-free { position: relative; margin-top: auto; font-family: var(--lfg-font-head); font-weight: 700; text-transform: uppercase; color: #fff; line-height: .86; font-size: clamp(3rem, 7vw, 4.4rem); }
.hf-free .r { color: var(--lfg-accent); }
.hf-rule { position: relative; width: 64px; height: 4px; background: var(--lfg-accent); border-radius: 2px; margin: 18px 0 14px; }
.hf-where { position: relative; display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: .9rem; color: rgba(255,255,255,.82); }
.hf-where .pin { color: var(--lfg-accent); }
.hf-mark { position: relative; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--lfg-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: rgba(255,255,255,.45); }
.hf-mark .r { color: var(--lfg-accent); }
@media (min-width: 900px) { .hero.text-forward .hero-media { max-width: none; } }
.media-tag { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; background: rgba(14,14,14,.66); backdrop-filter: blur(4px); color: #fff; padding: .44em .62em; border-radius: 6px; }
.media-dots { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; justify-content: center; gap: 6px; }
.media-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: width .2s; }
.media-dots i.on { background: #fff; width: 18px; border-radius: 3px; }

/* ---------- shared section bits ---------- */
.divider { width: 64px; height: 4px; background: var(--lfg-accent); border-radius: 2px; margin-bottom: 14px; }
.sec-h { font-family: var(--lfg-font-head); font-weight: 700; text-transform: uppercase; font-size: var(--lfg-text-h2); line-height: .94; margin-bottom: 16px; }

/* ---------- body: main column + sticky aside ---------- */
.spot-body { display: grid; grid-template-columns: 1fr; gap: 34px; padding: 14px 0 8px; }
@media (min-width: 900px) { .spot-body { grid-template-columns: 1fr 330px; gap: 52px; align-items: start; } }
.spot-aside { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .spot-aside { position: sticky; top: 74px; } }

/* lowdown copy */
.lowdown p { color: var(--lfg-white-70); font-size: 1.06rem; line-height: 1.72; margin-bottom: 1.05em; max-width: 64ch; text-wrap: pretty; }
.lowdown p.lede { font-size: 1.24rem; line-height: 1.6; color: var(--lfg-white-90); }
.lowdown p:last-child { margin-bottom: 0; }
body.dense .lowdown p { font-size: .98rem; line-height: 1.62; }
body.dense .lowdown p.lede { font-size: 1.1rem; }

/* ---------- quick facts (left-accent panel) ---------- */
.factcard { background: #161616; border: 1px solid var(--lfg-white-08); border-left: 6px solid var(--lfg-accent); border-radius: 16px; padding: 18px 22px; }
.factcard h3 { font-family: var(--lfg-font-head); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; margin-bottom: 6px; }
.fact { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--lfg-white-08); }
.fact:last-child { border-bottom: none; padding-bottom: 2px; }
.fact-k { width: 86px; flex-shrink: 0; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lfg-white-50); padding-top: 3px; }
.fact-v { font-size: .92rem; color: var(--lfg-white-90); font-weight: 500; line-height: 1.45; flex: 1; min-width: 0; }
.fact-link { color: var(--lfg-accent); font-weight: 600; word-break: break-word; }
.fact-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fact-copy { display: inline; }
.copy-btn { font-family: var(--lfg-font-body); font-weight: 600; font-size: .74rem; color: var(--lfg-accent); padding: 0; margin-left: 9px; }
.copy-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.copy-btn.done { color: #2ECC40; }
.fact-v .cost { display: inline-block; font-size: .6rem; padding: .34em .6em; }

/* ---------- stylised map card ---------- */
.mapcard { border-radius: 16px; overflow: hidden; border: 1px solid var(--lfg-white-08); background: #121212; }
.mapview { position: relative; height: 184px; background-color: #14140f; overflow: hidden; }
.mapview .grid { position: absolute; inset: 0; background-image: radial-gradient(var(--lfg-white-08) 1px, transparent 1px); background-size: 22px 22px; }
.mapview .road { position: absolute; background: rgba(255,255,255,.07); }
.mapview .road.r1 { left: 0; right: 0; top: 58%; height: 8px; transform: rotate(-6deg); }
.mapview .road.r2 { top: 0; bottom: 0; left: 38%; width: 7px; transform: rotate(7deg); }
.mapview .park { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); width: 150px; height: 110px; border-radius: 46% 54% 60% 40%; background: rgba(46,204,64,.12); }
.map-pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -100%); }
.map-pin .tear { width: 26px; height: 26px; background: var(--lfg-accent); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 6px 16px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.map-pin .tear::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: rotate(45deg); }
.map-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; }
.map-addr { font-size: .82rem; font-weight: 500; color: var(--lfg-white-70); line-height: 1.35; }
.map-addr b { display: block; color: #fff; font-weight: 600; }

/* ---------- real OSM map (Leaflet, dark CARTO tiles) ---------- */
.mapview-real { position: relative; height: 184px; width: 100%; background: #14140f; }
.mapview-canvas { position: absolute; inset: 0; }
.mapview-real .leaflet-container { height: 100%; width: 100%; background: #14140f; font: inherit; outline: none; cursor: pointer; }
.map-hint { position: absolute; top: 10px; right: 10px; z-index: 600; pointer-events: none; display: inline-block; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; background: rgba(14,14,14,.82); color: #fff; font-size: .62rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(2px); }
.map-hint svg { width: 11px; height: 11px; }
.mapview-real .leaflet-tile { filter: none; }
.lfg-leaflet-pin { background: none; border: none; }
.lfg-leaflet-pin .lfg-tear { display: block; width: 24px; height: 24px; background: var(--lfg-accent); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 6px 16px rgba(0,0,0,.5); position: relative; }
.lfg-leaflet-pin .lfg-tear::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%) rotate(45deg); }
.lfg-leaflet-pin.near .lfg-tear { width: 16px; height: 16px; background: rgba(255,255,255,.6); box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.lfg-leaflet-pin.near .lfg-tear::after { width: 5px; height: 5px; background: #14140f; }
.mapview-real .leaflet-popup-content-wrapper, .mapview-real .leaflet-popup-tip { background: #1c1c1c; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.55); }
.mapview-real .leaflet-popup-content { margin: 10px 12px; font-size: .8rem; line-height: 1.4; }
.mapview-real .leaflet-popup-close-button { color: var(--lfg-white-50); }
.lfg-pop strong { display: block; color: #fff; font-weight: 600; margin-bottom: 3px; }
.lfg-pop a { color: var(--lfg-accent); font-weight: 600; text-decoration: none; }
.lfg-pop a:hover { text-decoration: underline; }
.map-near { padding: 13px 16px 15px; border-top: 1px solid var(--lfg-white-08); }
.map-near-label { display: block; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--lfg-white-50); margin-bottom: 9px; }
.map-near-list { display: flex; flex-wrap: wrap; gap: 7px; }
.map-near-chip { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 500; color: var(--lfg-white-70); background: rgba(255,255,255,.05); border: 1px solid var(--lfg-white-08); border-radius: 999px; padding: 5px 11px; transition: background .15s, border-color .15s, color .15s; }
.map-near-chip:hover { background: rgba(230,59,46,.14); border-color: var(--lfg-accent); color: #fff; }
.mapview-real .leaflet-control-attribution { background: rgba(0,0,0,.6); color: var(--lfg-white-50); font-size: 10px; }
.mapview-real .leaflet-control-attribution a { color: var(--lfg-white-70); }
.mapview-real .leaflet-bar a { background: #1c1c1c; color: #fff; border-color: rgba(255,255,255,.12); }
.mapview-real .leaflet-bar a:hover { background: #262626; }
.map-go { flex-shrink: 0; font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--lfg-accent); padding: .6rem .9rem; border-radius: var(--lfg-radius-pill); white-space: nowrap; }
.map-go:hover { filter: brightness(1.06); }

/* ---------- insider-tip gate (freemium signup moment) ---------- */
.gate { position: relative; margin-top: 30px; border-radius: 18px; overflow: hidden; border: 1px solid var(--lfg-white-15); background: #161616; }
.gate::before { content: ""; position: absolute; top: -60%; left: -10%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lfg-accent) 26%, transparent) 0%, transparent 70%); pointer-events: none; }
.gate-inner { position: relative; padding: 26px 26px 28px; max-width: 640px; }
.gate-eyebrow { display: inline-block; background: var(--lfg-accent); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .64rem; padding: .4em .7em; border-radius: var(--lfg-radius-pill); margin-bottom: 12px; }
.gate h3 { font-family: var(--lfg-font-head); font-weight: 700; text-transform: uppercase; font-size: 1.6rem; line-height: .96; margin-bottom: 6px; }
.gate .gate-sub { color: var(--lfg-white-70); font-size: .92rem; margin-bottom: 16px; max-width: 46ch; }
.gate-tip { display: flex; gap: 11px; align-items: flex-start; background: var(--lfg-white-08); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.gate-tip .ico { color: var(--lfg-accent); font-size: 1.1rem; line-height: 1.4; flex-shrink: 0; }
.gate-tip .txt { font-size: .96rem; line-height: 1.55; color: var(--lfg-white-90); filter: none; transition: filter .35s; }
.gate:not(.unlocked) .gate-tip .txt { filter: blur(6px); user-select: none; }
.gate-form { display: flex; gap: 9px; max-width: 440px; }
.gate-form input { flex: 1; min-width: 0; background: var(--lfg-black); border: 1px solid var(--lfg-white-15); color: #fff; font: inherit; font-size: .92rem; padding: .72rem .95rem; border-radius: var(--lfg-radius-sm); }
.gate-form input::placeholder { color: var(--lfg-white-30); }
.gate-form input:focus { outline: none; border-color: var(--lfg-white-30); }
.gate-form .btn { padding: .72rem 1.2rem; white-space: nowrap; }
.gate-note { font-size: .72rem; color: var(--lfg-white-30); margin-top: 10px; }
.gate-done { display: none; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: #2ECC40; margin-top: 4px; }
.gate.unlocked .gate-form { display: none; }
.gate.unlocked .gate-done { display: flex; }
.gate.unlocked .gate-eyebrow { background: #2ECC40; color: #06210b; }
.gate.unlocked .gate-tip .txt { filter: none !important; user-select: text; }

/* ---------- get-there strip ---------- */
.gethere { display: flex; gap: 13px; align-items: flex-start; margin-top: 28px; padding: 16px 18px; border: 1px solid var(--lfg-white-08); border-radius: 14px; background: #131313; }
.gethere .tube-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 2.5px solid var(--lfg-accent); display: flex; align-items: center; justify-content: center; font-size: .82rem; }
.gethere .gh-txt { font-size: .96rem; line-height: 1.55; color: var(--lfg-white-90); }
.gethere .gh-txt b { color: #fff; }

/* ---------- honest fare panel (day-trip spots) ---------- */
.spot-getthere { position: relative; overflow: hidden; margin-top: 26px; background: #161616; border: 1px solid var(--lfg-white-15); border-radius: 16px; padding: 22px 22px 24px; }
.spot-getthere::before { content: ""; position: absolute; top: -55%; right: -8%; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lfg-accent) 30%, transparent), transparent 70%); pointer-events: none; }
.sgt-head { position: relative; margin-bottom: 14px; }
.sgt-eyebrow { display: inline-block; background: var(--lfg-white-15); color: var(--lfg-white); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; padding: .4em .7em; border-radius: 6px; margin-bottom: 8px; }
.sgt-h { font-family: var(--lfg-font-head); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; line-height: .98; }
.sgt-rows { position: relative; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .sgt-rows { grid-template-columns: repeat(3, 1fr); } }
.sgt-row { display: flex; flex-direction: column; gap: 3px; background: var(--lfg-white-08); border-radius: 12px; padding: 12px 14px; }
.sgt-k { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .62rem; color: var(--lfg-white-50); }
.sgt-v { font-weight: 600; font-size: .92rem; color: var(--lfg-white); line-height: 1.25; }
.sgt-row.fare .sgt-v { color: var(--lfg-accent); }
.sgt-note { position: relative; margin-top: 14px; font-family: var(--lfg-font-hand); color: var(--lfg-white); font-size: 1.4rem; line-height: 1.15; }
[data-theme="light"] .spot-getthere { background: #ffffff; }
[data-theme="light"] .sgt-eyebrow { background: rgba(28,20,13,.08); color: var(--lfg-black); }
[data-theme="light"] .sgt-row { background: rgba(28,20,13,.05); }
[data-theme="light"] .sgt-note { color: var(--lfg-black); }

/* ---------- related ---------- */
.related { padding: 8px 0 14px; }
.related .masonry { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .related .masonry { grid-template-columns: repeat(3, 1fr); } }
body.hide-related .related { display: none; }
body.hide-map .mapcard { display: none; }

/* ---------- bottom back link ---------- */
.spot-foot-nav { padding: 6px 0 30px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: var(--lfg-white-70); }
.back-link:hover { color: #fff; }