/* ==========================================================================
   /v/ and /m/ map pages — homepage night theme (app/globals.css .vd-night).
   Static CSS on purpose: these pages are baked HTML on S3, no Tailwind CDN,
   no render-blocking scripts. Structure + SEO rules: varedelo-api
   docs/SEO_PAGE_CONTRACT.md. Keep class names in sync with
   auth/routes/html_generator.py (vp-*).
   ========================================================================== */

:root {
  --night: #0B0D14;
  --night-2: #141826;
  --night-3: #1E2334;
  --ink: #F4F1EA;
  --ink-2: #B8B2C4;
  --ink-3: #857F94;
  --rule: rgba(244, 241, 234, 0.11);
  --rule-2: rgba(244, 241, 234, 0.22);
  --violet: #C7B1E9;
  --purple: #8B5BF5;
  --gold: #E5CB56;
  --cyan: #76E7E3;
  --pin-blue: #3388C0;
  --panel: #FBF8F3;
  --gutter: 1.25rem;
  --radius: 14px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 3rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body.vp-body {
  margin: 0;
  background-color: var(--night);
  background-image: radial-gradient(70rem 46rem at 82% -12%, rgba(139, 91, 245, 0.16), transparent 64%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.vp-body ::selection { background: rgba(139, 91, 245, 0.35); color: #fff; }
.vp-body a { color: inherit; }
.vp-body img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---- header ------------------------------------------------------------ */
.vp-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem var(--gutter);
  background: rgba(11, 13, 20, 0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.vp-logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.vp-logo-mark {
  width: 30px; height: 30px; flex: none;
  background: linear-gradient(135deg, #C7B1E9 0%, #76E7E3 52%, #E9F6F4 100%);
  -webkit-mask: url("/brand/varedelo-mark-alpha.png") center / contain no-repeat;
  mask: url("/brand/varedelo-mark-alpha.png") center / contain no-repeat;
}
.vp-logo-word {
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.035em;
  background: linear-gradient(100deg, #C7B1E9 0%, #76E7E3 52%, #E9F6F4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vp-nav-links { display: flex; align-items: center; gap: 1.1rem; font-size: 0.9rem; }
.vp-nav-links a { text-decoration: none; color: var(--ink-2); }
.vp-nav-links a:hover { color: var(--ink); }
.vp-nav-cta {
  padding: 0.45rem 0.9rem; border-radius: 999px;
  background: var(--gold); color: #14110A !important; font-weight: 600;
}
@media (max-width: 520px) { .vp-nav-hide-sm { display: none; } }

/* ---- layout ------------------------------------------------------------ */
.vp-main { padding: 0 var(--gutter) 4rem; }
.vp { max-width: 1120px; margin: 0 auto; }
@media (min-width: 960px) {
  .vp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); column-gap: 2.5rem; align-items: start; }
  .vp > .vp-hero { grid-column: 1 / -1; }
  /* The card fills its grid area (down to the end of the left column) and the
     map sticks inside it, so it stops before "Keep exploring". Sticky on the
     grid item itself was bounded by the whole grid and slid over that section. */
  .vp > .vp-mapcard { grid-column: 2; grid-row: 2 / span 6; align-self: stretch; }
  .vp-mapcard .vp-map { position: sticky; top: 5rem; }
  .vp > .vp-section { grid-column: 1; }
  .vp > .vp-related { grid-column: 1 / -1; }
}

/* ---- hero -------------------------------------------------------------- */
.vp-hero { padding: 2.2rem 0 1.4rem; }
.vp-kicker {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.vp-kicker span { padding: 0.25rem 0.55rem; border: 1px solid var(--rule-2); border-radius: 2px; }
.vp-kicker span:first-child { color: var(--violet); border-color: rgba(199, 177, 233, 0.45); }
.vp-h1 {
  margin: 0; max-width: 22ch;
  font-family: var(--font-display); font-weight: 650; letter-spacing: -0.03em;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); line-height: 1.04; color: var(--ink);
  text-wrap: balance;
}
.vp-lede { margin: 1rem 0 0; max-width: 60ch; color: var(--ink-2); font-size: 1.05rem; }
.vp-lede a { color: var(--ink); text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.vp-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
.vp-cta, .vp-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 0.7rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: 0.98rem; text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.vp-cta { background: var(--gold); color: #14110A !important; box-shadow: 0 10px 34px -12px rgba(229, 203, 86, 0.6); }
.vp-cta:hover { background: #F0DC77; }
.vp-ghost { border: 1px solid var(--rule-2); color: var(--ink) !important; }
.vp-ghost:hover { border-color: rgba(244, 241, 234, 0.6); background: rgba(244, 241, 234, 0.05); }
.vp-cta:active, .vp-ghost:active { transform: scale(0.98); }

/* ---- map card ---------------------------------------------------------- */
.vp-mapcard { margin: 0.4rem 0 2rem; }
.vp-map {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius);
  background: #EDE4D6; border: 1px solid var(--rule);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}
@media (min-width: 960px) { .vp-map { aspect-ratio: 4 / 5; max-height: calc(100vh - 7rem); } }
.vp-map-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-map-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 360ms ease; }
.vp-map.is-live .vp-map-canvas { opacity: 1; }
.vp-map-open {
  position: absolute; right: 0.75rem; top: 0.75rem;
  padding: 0.6rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(11, 13, 20, 0.86); color: var(--ink); font: 600 0.92rem var(--font-sans);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.vp-map.is-live .vp-map-open, .vp-map.is-loading .vp-map-open { display: none; }
.vp-map.is-loading::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent); animation: vp-sweep 1.1s linear infinite;
}
@keyframes vp-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* The faded ground now comes from the map ID's cloud style (2026-09-17); no CSS wash. */
.vp-pin {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; background: var(--panel);
  box-shadow: inset 0 0 0 3px var(--ring, var(--pin-blue)), 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.vp-pin img { width: 26px; height: 26px; image-rendering: pixelated; pointer-events: none; }
.vp-pin:hover { transform: scale(1.08); }
.vp-pin.is-selected {
  transform: scale(1.18);
  box-shadow: inset 0 0 0 3px var(--ring, var(--pin-blue)), 0 0 0 3px var(--panel), 0 0 0 6px #6011F2, 0 4px 14px rgba(0, 0, 0, 0.4);
}
.vp-pin-label {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  padding: 0.2rem 0.5rem; border-radius: 6px; background: var(--panel); color: #2D3235;
  font: 600 12px var(--font-sans); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); pointer-events: none;
}

/* ---- sections ---------------------------------------------------------- */
.vp-section { padding: 1.6rem 0; border-top: 1px solid var(--rule); }
.vp-section h2 {
  margin: 0 0 1rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: 1.45rem; line-height: 1.2; color: var(--ink);
}
.vp-section h3 { margin: 1.1rem 0 0.5rem; font-size: 0.78rem; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.vp-section p { margin: 0 0 0.8rem; color: var(--ink-2); }

/* spots */
.vp-spot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vp-spot {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0.85rem; align-items: start;
  padding: 0.9rem; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, rgba(244, 241, 234, 0.055), rgba(244, 241, 234, 0.02));
  border: 1px solid var(--rule);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.vp-spot:hover { border-color: rgba(244, 241, 234, 0.35); }
.vp-spot.is-selected { border-color: var(--violet); background: rgba(139, 91, 245, 0.1); }
.vp-spot-icon { width: 40px; height: 40px; image-rendering: pixelated; }
.vp-spot-body { min-width: 0; }
.vp-section .vp-spot-name {
  margin: 0; font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600;
  letter-spacing: -0.01em; text-transform: none; color: var(--ink);
}
.vp-section .vp-spot-meta { margin: 0.15rem 0 0; font-size: 0.8rem; font-family: var(--font-mono); color: var(--ink-3); }
.vp-section .vp-spot-desc { margin: 0.4rem 0 0; font-size: 0.93rem; color: var(--ink-2); }
.vp-section .vp-spot-addr { margin: 0.4rem 0 0; font-size: 0.84rem; color: var(--ink-3); }

.vp-spot-addr a { color: var(--violet); text-decoration: none; white-space: nowrap; margin-left: 0.2rem; }
.vp-spot-addr a:hover { text-decoration: underline; }
.vp-more { margin-top: 0.6rem; }
.vp-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem; border: 1px solid var(--rule-2); border-radius: 999px; font-weight: 600; font-size: 0.9rem;
}
.vp-more > summary::-webkit-details-marker { display: none; }
.vp-more[open] > summary { margin-bottom: 0.6rem; }
.vp-more-note { font-size: 0.85rem; color: var(--ink-3); margin-top: 0.6rem; }

/* source */
.vp-yt {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 12px;
  background: #000; border: 1px solid var(--rule); text-decoration: none;
}
.vp-yt img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 160ms ease; }
.vp-yt:hover img { opacity: 1; }
.vp-yt-play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgba(11, 13, 20, 0.82); border: 1px solid var(--rule-2);
}
.vp-yt-play::after {
  content: ""; position: absolute; left: 26px; top: 20px;
  border-left: 18px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.vp-yt-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 0.9rem 0.7rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); color: var(--ink); font-size: 0.9rem; font-weight: 600;
}
.vp-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vp-note { margin-top: 1rem !important; font-size: 1rem; line-height: 1.65; }
.vp-foods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vp-food {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem 0.4rem 0.5rem;
  border: 1px solid var(--rule-2); border-radius: 2px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink);
}
.vp-food img { width: 24px; height: 24px; image-rendering: pixelated; }

/* ---- tiles + popovers (homepage chip idiom: app/globals.css .vd-chip-food) ----
   Icon + short label; the detail opens on hover, keyboard focus, or tap
   (map-page.js toggles .is-open for touch). Popover text is in the HTML. */
.vp-tiles { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vp-tile { position: relative; }
.vp-tile-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.75rem 0.42rem 0.5rem; border: 1px solid var(--rule-2); border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ink);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.vp-tile-btn img { flex: none; width: auto; height: 26px; image-rendering: pixelated; }
.vp-tile-ext { color: var(--ink-3); }
.vp-tile:focus-within .vp-tile-btn, .vp-tile.is-open .vp-tile-btn {
  border-color: rgba(244, 241, 234, 0.62); background: rgba(244, 241, 234, 0.07);
}
.vp-tile-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.vp-pop {
  position: absolute; bottom: calc(100% + 0.5rem); left: 0; z-index: 20;
  display: block; width: max-content; min-width: 15rem; max-width: min(24rem, 86vw);
  padding: 0.7rem 0.85rem; border: 1px solid rgba(244, 241, 234, 0.18); border-radius: 2px;
  background: #12141d; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  font-family: var(--font-display); font-size: 0.92rem; letter-spacing: -0.01em; line-height: 1.45;
  color: var(--ink-2); white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(3px); pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
/* Hover bridge across the gap, so the pointer can reach the popover (WCAG 1.4.13). */
.vp-pop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.6rem; }
.vp-tile.is-below .vp-pop { bottom: auto; top: calc(100% + 0.5rem); }
.vp-tile.is-below .vp-pop::after { top: auto; bottom: 100%; }
.vp-pop strong { display: block; margin-bottom: 0.2rem; font-weight: 500; color: var(--violet); }
.vp-pop ul { margin: 0.2rem 0 0; padding-left: 1rem; }
.vp-pop li { margin: 0.25rem 0; }
.vp-pop b { color: var(--ink); font-weight: 600; }
@media (hover: hover) {
  .vp-tile:hover .vp-tile-btn { border-color: rgba(244, 241, 234, 0.62); background: rgba(244, 241, 234, 0.07); }
  .vp-tile:hover .vp-pop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
}
.vp-tile:focus-within .vp-pop, .vp-tile.is-open .vp-pop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.vp-spot-tiles { margin: 0.55rem 0 0; }
.vp-spot-tiles .vp-tile-btn { color: var(--violet); border-color: rgba(199, 177, 233, 0.4); }

/* notes — Varedelo's destination research */
.vp-notes-h img { height: 22px; width: auto; margin-right: 0.5rem; vertical-align: -6px; image-rendering: pixelated; }
.vp-research-label {
  margin: 0 0 0.35rem !important; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--violet) !important;
}

.vp-notes-list { margin: 0; padding-left: 1.1rem; color: var(--ink-2); }
.vp-notes-list li { margin: 0.35rem 0; }
.vp-notes-list strong { color: var(--ink); font-weight: 600; }
.vp-tourism { font-size: 0.9rem; }
.vp-tourism a { color: var(--violet); }

/* legacy: markup baked before the tile layout (2026-09-17). Remove once
   Generate All has re-baked every /v/ and /m/ page. */
.vp-section .vp-spot-insight {
  margin: 0.55rem 0 0; padding: 0.55rem 0.7rem; border-left: 2px solid var(--violet);
  background: rgba(139, 91, 245, 0.08); border-radius: 0 8px 8px 0; font-size: 0.9rem; color: var(--ink-2);
}
.vp-spot-insight-label {
  display: block; margin-bottom: 0.2rem; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet);
}
.vp-spot-insight-foods { display: block; margin-top: 0.25rem; color: var(--ink); font-weight: 500; }
.vp-dishes { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.55rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .vp-dishes { grid-template-columns: 1fr 1fr; } }
.vp-dish {
  display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem; border-radius: 10px;
  border: 1px solid var(--rule); background: linear-gradient(180deg, rgba(244, 241, 234, 0.055), rgba(244, 241, 234, 0.02));
}
.vp-dish img { width: 44px; height: 44px; flex: none; image-rendering: pixelated; }
.vp-dish strong { display: block; color: var(--ink); font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.vp-dish span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 0.2rem; font-size: 0.84rem; line-height: 1.45; color: var(--ink-2);
}

/* faq */
.vp-faq details { border-bottom: 1px solid var(--rule); }
.vp-faq summary {
  list-style: none; cursor: pointer; padding: 0.95rem 2rem 0.95rem 0; position: relative;
  font-weight: 600; color: var(--ink);
}
.vp-faq summary::-webkit-details-marker { display: none; }
.vp-faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.8rem; font-size: 1.3rem; color: var(--ink-3); }
.vp-faq details[open] summary::after { content: "–"; }
.vp-faq details p { margin: 0 0 1rem; }

/* related */
.vp-chips, .vp-cards { list-style: none; margin: 0; padding: 0; }
.vp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.vp-chip {
  display: inline-block; padding: 0.45rem 0.8rem; border: 1px solid var(--rule-2); border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.8rem; text-decoration: none; color: var(--ink);
}
.vp-chip:hover { border-color: rgba(244, 241, 234, 0.62); background: rgba(244, 241, 234, 0.07); }
/* Related maps: compact rows on phones (thumb left), cards from tablet up. */
.vp-cards { display: grid; gap: 0.6rem; }
.vp-card {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0.8rem; align-items: center;
  overflow: hidden; border-radius: 12px; text-decoration: none; padding: 0.5rem;
  border: 1px solid var(--rule); background: linear-gradient(180deg, rgba(244, 241, 234, 0.055), rgba(244, 241, 234, 0.02));
}
.vp-card:hover { border-color: rgba(244, 241, 234, 0.35); }
.vp-card img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; border-radius: 8px; background: #EDE4D6; }
.vp-card-text { display: flex; flex-direction: column; min-width: 0; }
.vp-card-title { font-weight: 600; font-size: 0.92rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp-card-meta { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-3); }
@media (min-width: 720px) {
  .vp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
  .vp-card { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
  .vp-card img { border-radius: 0; }
  .vp-card-text { padding: 0.7rem 0.8rem 0.8rem; }
}

/* footer */
.vp-footer {
  max-width: 1120px; margin: 0 auto; padding: 2rem var(--gutter) 3rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; justify-content: space-between; color: var(--ink-3); font-size: 0.85rem;
}
.vp-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.vp-footer a { text-decoration: none; color: var(--ink-2); }
.vp-footer a:hover { color: var(--ink); }

/* platform chooser (public/platform-choice.js) in night colours */
.vp-body .vrd-choice-ov { background: rgba(5, 6, 10, 0.72); }
.vp-body .vrd-choice-card { background: var(--night-2); border: 1px solid var(--rule-2); color: var(--ink); }
.vp-body .vrd-choice-h, .vp-body .vrd-choice-t { color: var(--ink); }
.vp-body .vrd-choice-p, .vp-body .vrd-choice-s, .vp-body .vrd-choice-x { color: var(--ink-3); }
.vp-body .vrd-choice-btn { background: var(--night-3); border-color: var(--rule-2); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .vp-body *, .vp-body *::before, .vp-body *::after { transition: none !important; animation: none !important; }
}