/* Destination page hero (full-bleed photo) */
.dest-hero {
  position: relative;
  min-height: clamp(440px, 60vh, 620px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.dest-hero__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transform: scale(1.04);
}
.dest-hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  /* Stronger black tint top-to-bottom so the hero copy stays legible
     over photos with mixed brightness. The base solid layer ensures
     readability even on near-white skies. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(13,31,36,0.62) 50%, rgba(13,31,36,0.96) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.10) 100%);
}
.dest-hero__inner {
  padding: var(--space-32) var(--grid-margin) var(--space-16);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 600px) {
  .dest-hero { min-height: clamp(420px, 70vh, 540px); }
  .dest-hero__inner { padding: var(--space-20) var(--grid-margin) var(--space-10); }
  .dest-hero__title { font-size: clamp(2.25rem, 10vw, 3.25rem); }
  .dest-hero__meta { gap: var(--space-3); }
  .dest-hero__meta-item { font-size: 0.8125rem; padding: 6px 12px; }
}
.dest-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.dest-hero__title {
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 24px rgba(13,31,36,0.32);
}
.dest-hero__subtitle {
  color: rgba(255,255,255,0.88);
  max-width: 580px;
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Stories index page */
.stories-hero {
  padding: var(--space-24) 0 var(--space-16);
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, var(--color-accent-light) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, var(--color-primary-light) 0%, transparent 60%),
    var(--color-bg);
  text-align: center;
}
.stories-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.stories-hero__title {
  font-size: var(--text-display);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}
.stories-hero__title-accent {
  color: var(--color-accent-deep);
  font-family: var(--font-heading);
  font-weight: 600;
}
.stories-hero__subtitle {
  max-width: 540px;
  margin: 0 auto;
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
}

/* ─── Filter chips — cinematic pill bar ──────────────────── */
.story-filters {
  display: flex; gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--space-6) 0 var(--space-12);
}
.story-filter {
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-jakarta);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              background var(--duration-normal) var(--ease-out);
}
.story-filter:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-muted);
}
.story-filter.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
@media (max-width: 600px) {
  .story-filters { gap: 6px; padding: var(--space-5) 0 var(--space-10); }
  .story-filter { padding: 8px 14px; font-size: 0.8125rem; }
}

/* ─── Destination guide — full content layout ─────────────── */
.dest-hero__image[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.08);
  transition: transform 80ms linear;
}
.dest-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-8);
}
.dest-hero__meta-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  font-family: var(--font-jakarta);
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.92);
}
/* Spacing between hero meta + live strip + live facts */
.dest-hero__meta + .live-strip,
.dest-hero__meta + .live-facts,
.live-strip + .live-facts,
.live-facts + .live-strip {
  margin-top: var(--space-3);
}
/* When live strip and live facts share a row inside one wrapper,
   align them inline like a single chip-row. */
.hero-live-row {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
}
.hero-live-row .live-strip,
.hero-live-row .live-facts {
  margin-top: 0;
}
.hero-live-row .live-facts {
  display: inline-flex;
}
.dest-hero__meta-item .material-symbols-outlined {
  font-size: 1.05em; color: var(--color-accent);
}
.dest-hero__meta-item strong {
  color: #fff;
  font-weight: 600;
  font-family: var(--font-jakarta);
}
.dest-hero__meta-item--link {
  text-decoration: none;
  transition: background-color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
.dest-hero__meta-item--link:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.dest-hero__visa-checked {
  font-weight: 400;
  font-style: italic;
  opacity: 0.75;
  font-size: 0.85em;
}
.dest-hero__meta-item--easy { background: rgba(29,158,117,0.30); border-color: rgba(29,158,117,0.55); }
.dest-hero__meta-item--easy .material-symbols-outlined { color: #b9efd8; }
.dest-hero__meta-item--mid  { background: rgba(255,200,80,0.22); border-color: rgba(255,200,80,0.55); }
.dest-hero__meta-item--mid  .material-symbols-outlined { color: #ffd97a; }
.dest-hero__meta-item--hard { background: rgba(220,80,90,0.25); border-color: rgba(220,80,90,0.55); }
.dest-hero__meta-item--hard .material-symbols-outlined { color: #f5a8b0; }

/* ─── Vitals mini-pills — full-width strip below Overview ─── */
.vitals-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4) var(--space-4);
  margin-top: var(--space-16);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 960px) {
  .vitals-pills {
    grid-template-columns: repeat(6, 1fr);
  }
}

.vital-pill {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  position: relative;
  transition: all 0.3s var(--ease-out);
}
.vital-pill--interactive {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.15);
}
.vital-pill--interactive:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-primary);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.vital-pill--interactive::after {
  content: 'arrow_outward';
  font-family: 'Material Symbols Outlined';
  position: absolute;
  top: 8px; right: 8px;
  font-size: 0.85rem;
  color: var(--color-primary);
  opacity: 0.6;
  transition: all 0.4s var(--ease-out);
}
.vital-pill--interactive:hover::after {
  opacity: 1;
  animation: arrow-nudge 0.6s infinite alternate ease-in-out;
}

@keyframes arrow-nudge {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(2px, -2px) scale(1.2); }
}

/* Cinematic Insight Modal */
.vital-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.vital-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}
.vital-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 12, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.vital-modal__container {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background: #11181d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  transform: scale(0.95) translateY(30px);
  transition: transform 0.5s var(--ease-out);
  box-shadow: 0 60px 150px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
}
.vital-modal.is-active .vital-modal__container {
  transform: scale(1) translateY(0);
}
.vital-modal__header {
  padding: var(--space-5) var(--space-6);
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vital-modal__title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.vital-modal__close {
  background: rgba(255,255,255,0.05);
  border: none;
  color: #fff;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.vital-modal__close:hover { 
  background: #ff4757;
  transform: rotate(90deg);
}

.vital-modal__body {
  padding: var(--space-8);
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, transparent 70%);
}
.vital-modal__image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  background: #000;
}

@media (max-width: 768px) {
  .vital-modal { padding: 0; }
  .vital-modal__container {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }
  .vital-modal__body {
    padding: var(--space-4);
    align-items: center;
  }
  .vital-modal__image {
    max-height: 80vh;
  }
}

/* Hide old tooltips */
.vital-pill__tooltip { display: none !important; }
.vital-pill--has-tooltip:hover .vital-pill__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.vital-pill__tooltip img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}
.vital-pill__icon {
  font-size: 20px !important;
  color: var(--color-primary);
  margin-top: 2px;
}
.vital-pill__content {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.vital-pill__label {
  font-family: var(--font-jakarta);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.vital-pill__value {
  font-family: var(--font-jakarta);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.1;
}
.vital-pill__sub {
  font-family: var(--font-jakarta);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .vitals-pills { 
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-4);
    margin-top: var(--space-12);
    padding: var(--space-8) 0;
  }
  .vital-pill { gap: 10px; }
  .vital-pill__icon { font-size: 18px !important; }
  .vital-pill__label { font-size: 0.625rem; }
  .vital-pill__value { font-size: 0.8125rem; }
  .vital-pill__sub { font-size: 0.6875rem; }
}

/* Visa "last updated" line in the hero — sits below the summary, gets
   the same warmth as a help text but reads like a freshness mark. */
.visa-hero__updated {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-3);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(29,158,117,0.10);
  border: 1px solid rgba(29,158,117,0.25);
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.visa-hero__updated .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-primary);
}
.visa-hero__updated strong {
  font-weight: 700;
  color: var(--color-text);
}

/* Sticky in-page nav under hero */
.dest-nav {
  position: sticky; top: 72px; z-index: 20;
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
  /* Slide in lock-step with the auto-hiding site header. When body
     gets `.header-hidden`, the bar drops from top:72 to top:0 and
     keeps the row of anchors visible at the very top of the viewport. */
  transition: top 0.4s var(--ease-out);
}
body.header-hidden .dest-nav { top: 0; }
.dest-nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: flex; gap: clamp(var(--space-4), 3vw, var(--space-6)); align-items: center;
  height: 56px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  .dest-nav { top: 60px; }
  body.header-hidden .dest-nav { top: 0; }
  .dest-nav__inner { height: 48px; }
}
.dest-nav__inner::-webkit-scrollbar { display: none; }
.dest-nav a {
  font-family: var(--font-jakarta);
  font-size: 0.875rem; font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  position: relative;
  padding: 8px 0;
}
.dest-nav a:hover { color: var(--color-text); }
.dest-nav a.is-active { color: var(--color-primary); }
.dest-nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--color-primary); border-radius: 2px;
}

/* Lead intro paragraph */
.guide-lead {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Section pair layout (image + text) */
.guide-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.guide-pair--reverse { grid-template-columns: 1fr 1fr; }
.guide-pair--reverse > .guide-pair__media { order: 2; }
.guide-pair__media {
  position: relative;
  aspect-ratio: 5 / 4;
  max-height: 420px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-elevated);
}
.guide-pair__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.guide-pair__media:hover img { transform: scale(1.05); }
.guide-pair__caption {
  position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-6);
  color: #fff;
  font-family: var(--font-jakarta);
  font-size: var(--text-body-sm);
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.guide-pair__title { margin-bottom: var(--space-5); font-size: var(--text-h2); letter-spacing: -0.02em; }
.guide-pair__body { font-size: 1.0625rem; line-height: 1.75; color: var(--color-text-secondary); }
.guide-pair__body p + p { margin-top: var(--space-5); }
@media (max-width: 860px) {
  .guide-pair, .guide-pair--reverse { grid-template-columns: 1fr; gap: var(--space-10); }
  .guide-pair--reverse > .guide-pair__media { order: 0; }
}

/* Pin list — map-style */
.pin-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  counter-reset: pin;
}
.pin-list__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.pin-list__item:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}
.pin-list__num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary-muted);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  counter-increment: pin;
}
.pin-list__num::before { content: counter(pin, decimal-leading-zero); }
.pin-list__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.pin-list__region {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-jakarta);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.pin-list__region .material-symbols-outlined { font-size: 0.95em; }
.pin-list__note {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
@media (max-width: 720px) { .pin-list { grid-template-columns: 1fr; gap: var(--space-3); } .pin-list__item { padding: var(--space-4); grid-template-columns: 36px 1fr; gap: var(--space-3); } .pin-list__num { width: 36px; height: 36px; font-size: 0.8125rem; } }

/* Decorative map block (no JS map dep — visual only) */
.guide-map {
  position: relative;
  height: 360px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse 30% 30% at 30% 30%, rgba(29,158,117,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 70% 60%, rgba(255,200,80,0.18) 0%, transparent 60%),
    linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
}
.guide-map::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(0deg, rgba(13,31,36,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,31,36,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.55;
}
.guide-map__pin {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 4px solid #fff;
  box-shadow: 0 0 0 0 rgba(29,158,117,0.45);
  animation: pp-pulse 2s var(--ease-out) infinite;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.guide-map__pin .material-symbols-outlined { font-size: 1em; color: #fff; }
.guide-map__label {
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  position: relative; z-index: 1;
  background: var(--color-surface);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
}
@keyframes pp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29,158,117,0.55); }
  70%  { box-shadow: 0 0 0 22px rgba(29,158,117,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,158,117,0); }
}

/* Itinerary timeline */
.itinerary {
  display: flex; flex-direction: column;
  gap: var(--space-6);
  position: relative;
  padding-left: var(--space-12);
}
.itinerary::before {
  content: "";
  position: absolute;
  left: 16px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary), transparent);
}
.itinerary__row {
  position: relative;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.itinerary__row:hover { transform: translateX(4px); border-color: var(--color-primary); }
.itinerary__row::before {
  content: "";
  position: absolute;
  left: -28px; top: 26px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.itinerary__day {
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.itinerary__title {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 600;
  margin: 4px 0 var(--space-3);
  letter-spacing: -0.01em;
}
.itinerary__notes {
  color: var(--color-text-secondary);
  line-height: 1.65;
  font-size: 0.9375rem;
}

/* Eat & Stay grid */
.recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
}
.recommend-col h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--space-6);
  display: inline-flex; align-items: center; gap: var(--space-3);
  letter-spacing: -0.01em;
}
.recommend-col h3 .material-symbols-outlined {
  width: 36px; height: 36px;
  background: var(--color-primary-muted);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 0.95em;
}
.recommend-list {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.recommend-list li {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.recommend-list li:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.recommend-list .name {
  font-family: var(--font-heading);
  font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -0.005em;
}
.recommend-list .for {
  font-family: var(--font-jakarta);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
@media (max-width: 860px) { .recommend-grid { grid-template-columns: 1fr; gap: var(--space-10); } }

/* Photo strip with parallax / film-strip vibe */
.guide-photostrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 540px) {
  .itinerary { padding-left: var(--space-8); }
  .itinerary__row { padding: var(--space-5); }
}
.guide-photostrip__cell {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.guide-photostrip__cell img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-out), filter 0.6s var(--ease-out);
}
.guide-photostrip__cell:hover img { transform: scale(1.06); filter: saturate(1.15); }
@media (max-width: 720px) { .guide-photostrip { grid-template-columns: repeat(2, 1fr); } }

/* Story detail (article view) */
.story-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}
.story-article__hero {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-bottom: var(--space-12);
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-elevated);
}
.story-article__hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.story-article__title {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 4vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--space-5);
}
.story-article__meta {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  font-family: var(--font-jakarta);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-12);
}
.story-article__body p {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}
.story-article__body h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin: var(--space-12) 0 var(--space-5);
  letter-spacing: -0.01em;
}
.story-article__body blockquote.pull {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-3) var(--space-8);
  margin: var(--space-12) 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-text);
  font-style: italic;
  letter-spacing: -0.005em;
}
.story-article__back {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-jakarta);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}
.story-article__back:hover { color: var(--color-primary); }

/* Full-page story modal-style overlay (hash-driven open) */
.story-detail {
  display: none;
  padding: var(--space-24) 0 var(--space-32);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-16);
}
.story-detail.is-open { display: block; }

/* Footer extension — new structure with brandcol + socials */
.site-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--space-8);
}
.site-footer__brandcol .site-footer__tagline {
  margin-top: var(--space-5);
  max-width: 360px;
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-bottom: var(--space-5);
}
.site-footer__socials {
  display: flex; gap: var(--space-3);
}
.site-footer__socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.site-footer__socials a:hover {
  background: var(--color-primary);
  color: #fff !important;
  transform: translateY(-2px);
}
.site-footer__socials a .material-symbols-outlined { font-size: 1.05em; }
@media (max-width: 860px) {
  .site-footer__top { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-8); }
  .site-footer__brandcol { grid-column: 1 / -1; }
}
/* Mobile: brand block on top, 3 link columns inline below. */
@media (max-width: 540px) {
  .site-footer__top {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-6);
  }
  .site-footer__brandcol { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════
   Country hub — Cities, Itineraries, chip filters
═══════════════════════════════════════════════════════════════════ */

/* ─── Cities grid — modern compact cards (no scale hover, glance UX) ─── */
.region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
@media (max-width: 960px) { .region-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .region-grid { grid-template-columns: 1fr; } }

.region-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.region-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(13,31,36,0.04), 0 8px 22px rgba(13,31,36,0.08);
  color: inherit;
}

.region-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.region-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* No transform-scale — modern hover is the border + a colour shift only */
  transition: filter 480ms var(--ease-out);
}
.region-card:hover .region-card__media img { filter: saturate(1.08) brightness(1.02); }
.region-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,31,36,0) 50%, rgba(13,31,36,0.55) 100%);
  pointer-events: none;
}
.region-card__content {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.region-card__name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.region-card__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.region-card__local-name {
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  opacity: 0.65;
  font-weight: 500;
  white-space: nowrap;
}
/* Live weather chip — top-right of the media */
.region-card__weather {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.96);
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(13,31,36,0.12);
  transition: opacity var(--duration-normal) var(--ease-out);
  opacity: 0.55;
}
.region-card__weather.is-loaded { opacity: 1; }
.region-card__weather-icon {
  font-size: 16px !important;
  color: var(--color-primary);
}
.region-card__weather-temp { line-height: 1; }

/* Top-categories chip cluster overlaid on the image (top-left) */
.region-card__pop {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
}

.region-card__body {
  padding: var(--space-4) var(--space-5) var(--space-4);
  display: flex; flex-direction: column;
  gap: 6px;
}
.region-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
}
.region-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
}
.region-card__bestfor {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  font-family: var(--font-jakarta);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.region-card__bestfor .material-symbols-outlined { font-size: 12px; }

.region-card__tagline {
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stats stack — peak season · today's vibe · UNESCO. Each row reads
   icon + label + value, stacked vertically for breathing room. */
.region-card__stats {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.region-card__stats li {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-jakarta);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.region-card__stats li[hidden] { display: none; }
.region-card__stats li .material-symbols-outlined {
  font-size: 15px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.region-card__stat-label {
  font-weight: 500;
  color: var(--color-text-secondary);
}
.region-card__stats strong {
  font-family: var(--font-jakarta);
  font-weight: 600;
  color: var(--color-text);
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Category chip — used on image overlay AND in best-for. White inner badge so they pop on photos. */
.region-card__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 2px 6px rgba(13,31,36,0.16);
}
.region-card__chip .material-symbols-outlined { font-size: 13px; }
.region-card__chip--eat      { color: var(--cat-eat); }
.region-card__chip--stay     { color: var(--cat-stay); }
.region-card__chip--activity { color: var(--cat-activity); }
.region-card__chip--see      { color: var(--cat-see); }
.region-card__chip--shop     { color: var(--cat-shop); }
.region-card__chip--drink    { color: var(--cat-drink); }

@media (max-width: 540px) {
  .region-card__media { aspect-ratio: 16 / 10; }
  .region-card__body { padding: var(--space-4); }
  .region-card__name { font-size: 1.0625rem; }
  .region-card__stats { gap: var(--space-2); }
  .region-card__stats li { font-size: 0.6875rem; }
}

/* Pin highlight when arriving from a region-card click */
.pin-list__item.is-highlighted {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
  animation: pp-pin-pulse-soft 1.2s var(--ease-out) 0s 2;
}
@keyframes pp-pin-pulse-soft {
  0%, 100% { box-shadow: 0 0 0 4px var(--color-primary-light); }
  50%      { box-shadow: 0 0 0 10px rgba(29,158,117,0.05); }
}

/* ─── Itinerary chip filter bar ─── */
.itinerary-filters {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-10);
}
.itinerary-filters__group {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
}
.itinerary-filters__label {
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}
.filter-chip {
  appearance: none;
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-transform: capitalize;
  transition: background var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}
.filter-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.filter-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
@media (max-width: 720px) {
  .itinerary-filters { gap: var(--space-4); padding: var(--space-3) var(--space-4); }
  .itinerary-filters__group { width: 100%; }
}

/* ─── Itinerary cards ─── */
.itinerary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gutter);
}
@media (max-width: 860px) { .itinerary-grid { grid-template-columns: 1fr; } }

.itinerary-card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.itinerary-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card-hover);
}
.itinerary-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-alt);
  overflow: hidden;
}
.itinerary-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.itinerary-card:hover .itinerary-card__media img { transform: scale(1.05); }
.itinerary-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,31,36,0) 50%, rgba(13,31,36,0.4) 100%);
  pointer-events: none;
}
.itinerary-card__days {
  position: absolute; bottom: var(--space-3); left: var(--space-3);
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-jakarta);
  font-weight: 700;
  font-size: var(--text-overline);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.itinerary-card__body {
  padding: var(--space-6);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.itinerary-card__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.itinerary-card__chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-jakarta);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.itinerary-card__chip--type {
  background: var(--color-primary-muted);
  color: var(--color-primary);
}
.itinerary-card__chip--budget {
  background: var(--color-accent-light);
  color: var(--color-accent-deep);
}
.itinerary-card__chip--pace {
  background: var(--color-secondary-muted);
  color: var(--color-secondary);
}
.itinerary-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
}
.itinerary-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}
.itinerary-card__cities {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.itinerary-card__cities .material-symbols-outlined {
  font-size: 14px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.itinerary-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}
.itinerary-card__season {
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.itinerary-card__read {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-jakarta);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--duration-normal) var(--ease-out);
}
.itinerary-card__read .material-symbols-outlined { font-size: 14px; }
.itinerary-card__read:hover { gap: 10px; }
@media (max-width: 540px) {
  .itinerary-card__body { padding: var(--space-5); gap: var(--space-3); }
  .itinerary-card__title { font-size: 1.125rem; }
}

.itinerary-grid__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-8);
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.itinerary-grid__empty .material-symbols-outlined {
  font-size: 32px;
  color: var(--color-text-muted);
}
.itinerary-grid__empty p {
  font-family: var(--font-jakarta);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  max-width: 460px;
  margin: 0;
}
.itinerary-grid__empty a { color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════════════════
   Itinerary detail page (itinerary.html?slug=...)
═══════════════════════════════════════════════════════════════════ */

/* Sticky-nav anchor offset so jumps don't land behind the bars.
   132 = 72px site header + 56px dest-nav + 4px breathing room. */
section[id] { scroll-margin-top: 132px; }
@media (max-width: 600px) { section[id] { scroll-margin-top: 116px; } }

/* Hero back-link */
.itinerary-detail__back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--space-5);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(10px);
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: background var(--duration-normal) var(--ease-out);
  align-self: flex-start;
}
.itinerary-detail__back:hover { background: rgba(255,255,255,0.22); color: #fff; }
.itinerary-detail__back .material-symbols-outlined { font-size: 16px; }

/* Hero chip row (shares chip style with cards but on dark hero bg) */
.itinerary-detail__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: var(--space-5) 0 var(--space-6);
}
.itinerary-detail__chips .itinerary-card__chip {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.24);
}

/* Activity cards — small badges with an icon */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 860px) { .activity-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .activity-grid { grid-template-columns: 1fr; } }

.activity-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.activity-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.activity-card__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: 22px;
}
.activity-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.25;
}
.activity-card__region {
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* On the country-page, city cards are non-clickable info cards.
   Drop the arrow + hover-shift styling for the static variant. */
.region-card--static {
  cursor: default;
}
.region-card--static:hover {
  transform: none;
  border-color: var(--color-border);
  box-shadow: none;
}
.region-card--static:hover .region-card__icon {
  background: var(--color-primary-muted);
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   Visa requirements block (international country pages)
═══════════════════════════════════════════════════════════════════ */

/* Hero band — comfortable padding, just less margin to the cards below */
.visa-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.95) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  box-shadow: 0 1px 3px rgba(13,31,36,0.04), 0 8px 20px rgba(13,31,36,0.06);
}
.visa-hero__icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  font-size: 26px !important;
  flex-shrink: 0;
}
.visa-hero__copy { display: flex; flex-direction: column; gap: 2px; }
.visa-hero__copy h2 {
  font-size: 1.375rem !important;
  margin-top: 4px !important;
}
.visa-hero__summary {
  font-family: var(--font-jakarta);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 4px 0 0;
  max-width: 600px;
}
.visa-hero__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-jakarta);
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-normal) var(--ease-out),
              gap var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
}
.visa-hero__cta:hover { background: var(--color-primary-hover); color: #fff; gap: 10px; }
.visa-hero__cta .material-symbols-outlined { font-size: 14px; }
@media (max-width: 720px) {
  .visa-hero {
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .visa-hero__cta { grid-column: 1 / -1; justify-content: center; }
  .visa-hero__icon { width: 36px; height: 36px; font-size: 20px !important; }
}

.visa-card { position: relative; }
.visa-card__row dt {
  display: inline-flex !important; align-items: center; gap: 6px;
}
.visa-card__row dt .material-symbols-outlined {
  font-size: 13px;
  color: var(--color-primary);
}

.visa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (max-width: 960px) { .visa-grid { grid-template-columns: 1fr; } }

.visa-card {
  display: flex; flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.visa-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}
.visa-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.visa-card__type {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}
.visa-card__cost {
  font-family: var(--font-jakarta);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background: var(--color-primary-muted);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.visa-card__rows {
  margin: 0;
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.visa-card__row { margin: 0; }
.visa-card__row dt {
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 4px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.visa-card__row dt .material-symbols-outlined { font-size: 13px !important; color: var(--color-primary); }
.visa-card__row dd {
  margin: 0;
  font-family: var(--font-jakarta);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
}
.visa-card__apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: auto;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  font-family: var(--font-jakarta);
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: none;
  transition: background var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              gap var(--duration-normal) var(--ease-out);
}
.visa-card__apply:hover {
  background: var(--color-primary);
  color: #fff;
  gap: 10px;
}
.visa-card__apply .material-symbols-outlined { font-size: 14px; transition: transform var(--duration-normal) var(--ease-out); }
.visa-card__apply:hover .material-symbols-outlined { transform: translateX(2px); }

.visa-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
@media (max-width: 720px) { .visa-meta { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); } }
.visa-meta__col h4 {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.visa-meta__col h4 .material-symbols-outlined {
  font-size: 18px;
  color: var(--color-primary);
}
.visa-meta__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.visa-meta__list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-jakarta);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.visa-meta__list li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.visa-meta__note {
  font-family: var(--font-jakarta);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

.visa-disclaimer {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-4);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-light);
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  color: var(--color-accent-deep);
}
.visa-disclaimer .material-symbols-outlined { font-size: 14px; }

.visa-card__pin {
  position: absolute;
  top: -10px; right: var(--space-4);
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-jakarta);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(255,200,80,0.45);
}

/* ═══════════════════════════════════════════════════════════════════
   Stories rail — horizontal-scroll long-read carousel (country page)
═══════════════════════════════════════════════════════════════════ */
.stories-rail {
  display: flex;
  gap: var(--grid-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
  margin: 0 calc(-1 * var(--grid-margin));
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  scrollbar-width: thin;
}
.stories-rail::-webkit-scrollbar { height: 6px; }
.stories-rail::-webkit-scrollbar-track { background: transparent; }
.stories-rail::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}

.stories-rail__card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.stories-rail__card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
  color: inherit;
}

.stories-rail__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.stories-rail__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 480ms var(--ease-out);
}
.stories-rail__card:hover .stories-rail__image img { filter: saturate(1.08); }
.stories-rail__tag {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
}

.stories-rail__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.stories-rail__meta {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stories-rail__meta .dot {
  width: 3px; height: 3px;
  background: currentColor;
  border-radius: 50%;
}
.stories-rail__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stories-rail__excerpt {
  font-family: var(--font-jakarta);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 540px) {
  .stories-rail__card { flex-basis: 280px; }
}

/* ═══════════════════════════════════════════════════════════════════
   City detail page — pill filters · map · rich pin cards
═══════════════════════════════════════════════════════════════════ */

/* ── Category color tokens (used by both map markers + cards) ── */
:root {
  --cat-eat:      #C17F3A;   /* warm amber-brown */
  --cat-stay:     #1D9E75;   /* primary teal */
  --cat-activity: #2AB5C8;   /* horizon blue */
  --cat-see:      #7A4CA6;   /* aubergine */
  --cat-shop:     #D85C8E;   /* rose */
  --cat-drink:    #0a2620;   /* anchor */
}

/* ── Pin filter bar — slim, centered, slick (above + below the map) ── */
.pin-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--space-4) 0 var(--space-5);
}
.pin-filters--slim .story-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.pin-filters--slim .story-filter .material-symbols-outlined {
  font-size: 14px;
}
.story-filter__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px;
  padding: 0 5px;
  margin-left: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  font-family: var(--font-jakarta);
  font-size: 0.6875rem;
  font-weight: 700;
  transition: background var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}
.story-filter.is-active .story-filter__count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
@media (max-width: 600px) {
  /* Wrap the pills onto multiple rows instead of a hidden horizontal
     scroll — every category stays visible, no non-indicative scrollbar. */
  .pin-filters {
    padding: var(--space-3) 0 var(--space-4);
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }
  .pin-filters--slim .story-filter { white-space: nowrap; padding: 6px 12px; }
}

/* ── Real Leaflet map ── */
/* Lift the whole map section above following sections so popups
   that extend below the tiles paint over the filter bar + list. */
section#map {
  position: relative;
  z-index: 5;
}
/* ─── Map + pin-list explorer ─────────────────────────────────────
   Mobile / narrow (default): single column, normal page flow — map on
   top with its 16/9 aspect ratio, list below.
   Desktop (≥900px): the map is locked full-height on the LEFT and stays
   fully in view; the pin list scrolls inside its own pane on the RIGHT.
   The page itself doesn't scroll within the panel, so the map never
   slides away — it reads as "a map next to a scrollable list", not "a
   map that froze while the page moved". */
.region-explorer { display: block; }
.region-explorer__map { display: flex; flex-direction: column; position: relative; }
/* Mobile: a taller map so popup cards fit fully inside it (the map clips
   its own overflow, so a short map would crop a tall popup). */
.region-explorer__map .region-map { aspect-ratio: auto; height: min(62vh, 440px); }
.region-explorer__map .region-map__hint { margin-top: var(--space-3); }
/* The list pane is the card frame now (moved off .pin-slim-list so the
   sticky group headers aren't trapped by an inner overflow context). */
.region-explorer__list {
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

@media (min-width: 900px) {
  .region-explorer {
    display: grid;
    /* Map 60% · list 40% — the map is the star; the list is the index. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-6);
    /* Viewport-bounded panel height so the whole map is always visible. */
    height: min(680px, calc(100vh - 150px));
  }
  .region-explorer__map { height: 100%; }
  /* Map fills the column; the hint sits beneath it. */
  .region-explorer__map .region-map {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
    height: auto;
  }
  .region-explorer__map .region-map__hint { flex-shrink: 0; margin-top: var(--space-3); align-self: center; }
  /* The list is the only thing that scrolls — internally, via native
     overflow. `data-lenis-prevent` (on the element) keeps the site's
     smooth-scroll from swallowing the wheel here, and
     `overscroll-behavior: contain` isolates this scroll context so the
     wheel doesn't jerk/chain back to the page when the cursor crosses
     into the pane or hits the pane's top/bottom edge. */
  .region-explorer__list {
    margin-top: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
    /* Soft fade at the bottom edge hints there's more to scroll. */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
  }
  .region-explorer__list::-webkit-scrollbar { width: 8px; }
  .region-explorer__list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
  }
  .region-explorer__list::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
  }
}

.region-map {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;            /* tiles, not popups, are clipped */
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.region-map .leaflet-container {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  font-family: var(--font-jakarta);
}

/* "Zoom to all pins" button — overlaid top-right of the map. */
.region-map__fit {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 500;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: 0 2px 8px rgba(13,31,36,0.18);
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
.region-map__fit:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.region-map__fit .material-symbols-outlined { font-size: 20px; }

/* Custom DivIcon markers — filled category-coloured badge carrying the
   SAME number as the matching list row. White ring + number so it pops
   on the light map tiles and mirrors the list badge exactly. */
.region-map__marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cat-stay);
  border: 2px solid #fff;
  color: #fff;
  box-shadow: 0 2px 6px rgba(13,31,36,0.30);
  transition: transform var(--duration-normal) var(--ease-spring),
              opacity var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.region-map__marker-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
}
/* The active/hovered marker lifts above its neighbours so overlapping
   pins don't hide the selected one. */
.region-map__marker:hover,
.region-map__marker.is-hovered {
  transform: scale(1.18);
  box-shadow: 0 6px 14px rgba(13,31,36,0.32);
  z-index: 1000 !important;
}
/* Sticky selected state — set when the pin's popup is open / its row is
   clicked. A teal halo + bigger lift reads as "this is the one". */
.region-map__marker.is-active {
  transform: scale(1.28);
  box-shadow: 0 0 0 4px rgba(29,158,117,0.35), 0 8px 18px rgba(13,31,36,0.42);
  z-index: 1200 !important;
}
.region-map__marker--eat      { background: var(--cat-eat); }
.region-map__marker--stay     { background: var(--cat-stay); }
.region-map__marker--activity { background: var(--cat-activity); }
.region-map__marker--see      { background: var(--cat-see); }
.region-map__marker--shop     { background: var(--cat-shop); }
.region-map__marker--drink    { background: var(--cat-drink); }
.region-map__marker.is-dimmed { filter: grayscale(0.7); opacity: 0.5; }

/* Marker hover tooltip — brand-styled name chip. */
.region-map__tip.leaflet-tooltip {
  background: var(--color-anchor);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 4px 10px;
  font-family: var(--font-jakarta);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 3px 10px rgba(13,31,36,0.30);
}
.region-map__tip.leaflet-tooltip-top::before { border-top-color: var(--color-anchor); }

/* List row hover-sync — when the user hovers a list row, the matching
   marker scales up (via .is-hovered above) and the row gets a soft
   highlight. Same when the user hovers the marker itself. */
.pin-slim.is-hovered { background: var(--color-bg-alt); }
/* Sticky selected row — set when the pin's marker popup is open. Soft
   teal wash + a left accent bar in the primary colour. */
.pin-slim.is-active {
  background: var(--color-primary-muted);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.region-map__hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-jakarta);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.region-map__hint .material-symbols-outlined { font-size: 14px; }

/* ── Premium Slide-up Detail Overlay ── */
.pin-detail-overlay {
  position: absolute;
  bottom: 24px;
  left: var(--space-4);
  right: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 40px rgba(13,31,36,0.22);
  z-index: 1000;
  transform: translateY(130%);
  opacity: 0;
  transition: transform var(--duration-normal) var(--ease-spring),
              opacity var(--duration-fast) var(--ease-out);
  pointer-events: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pin-detail-overlay.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.pin-detail-overlay__close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1010;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.90);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(13,31,36,0.12);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.pin-detail-overlay__close:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: scale(1.05);
}
.pin-detail-overlay__close .material-symbols-outlined { font-size: 16px; }

/* Content card — ultra-slim scroll-free layout */
.pin-detail-overlay__card { display: flex; flex-direction: row; height: 120px; width: 100%; overflow: hidden; }
.pin-detail-overlay__media { width: 120px; height: 120px; background: var(--color-bg-alt); overflow: hidden; flex-shrink: 0; position: relative; }
.pin-detail-overlay__media img { width: 100%; height: 100%; object-fit: cover; }
.pin-detail-overlay__body {
  flex: 1;
  padding: 12px 16px;
  display: flex; flex-direction: column;
  min-width: 0;
  overflow: hidden; /* Guaranteed scroll-free */
}
.pin-detail-overlay__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4);
  padding-right: 28px; /* Cleanly clears the top-right close button */
}
.pin-detail-overlay__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.pin-detail-overlay__meta-top {
  display: flex; align-items: center; gap: var(--space-2);
  flex-shrink: 0;
}
.pin-detail-overlay__note {
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Slim Footer */
.pin-detail-overlay__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto; /* Push to the very bottom */
}
.pin-detail-overlay__address {
  font-family: var(--font-jakarta);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.pin-detail-overlay__cta.pin-rich__cta {
  margin-top: 0;
  padding: 5px 12px;
  font-size: 0.75rem;
  height: auto;
  flex-shrink: 0;
}

/* Adjustments when no media is present */
.pin-detail-overlay__card.no-media .pin-detail-overlay__body {
  padding-right: var(--space-10); /* Keep clear of close button */
}

@media (max-width: 600px) {
  .pin-detail-overlay {
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
  }
  .pin-detail-overlay__card { height: 110px; }
  .pin-detail-overlay__media { width: 110px; height: 110px; }
  .pin-detail-overlay__body { padding: 10px 12px; }
  .pin-detail-overlay__name { font-size: 0.9375rem; }
  .pin-detail-overlay__note {
    margin-top: 4px;
    -webkit-line-clamp: 1; /* clamp note to exactly 1 line on mobile */
  }
  .pin-detail-overlay__footer { margin-top: auto; }
}

/* Leaflet attribution / zoom controls — tone down to match site. */
.leaflet-container .leaflet-control-attribution {
  background: rgba(255,255,255,0.85);
  font-family: var(--font-jakarta);
  font-size: 10px;
  color: var(--color-text-muted);
}
.leaflet-container .leaflet-control-attribution a { color: var(--color-primary); }
.leaflet-container .leaflet-control-zoom a {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.leaflet-container .leaflet-control-zoom a:hover {
  background: var(--color-primary-muted);
  color: var(--color-primary);
}

/* ── Shared category chip + cost (used by popup + slim list) ── */
.pin-rich__cat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pin-rich__cat .material-symbols-outlined { font-size: 13px; }
.pin-rich__cat--eat      { background: rgba(193,127,58,0.10);   color: var(--cat-eat); }
.pin-rich__cat--stay     { background: var(--color-primary-muted); color: var(--cat-stay); }
.pin-rich__cat--activity { background: var(--color-secondary-muted); color: var(--cat-activity); }
.pin-rich__cat--see      { background: rgba(122,76,166,0.12);   color: var(--cat-see); }
.pin-rich__cat--shop     { background: rgba(216,92,142,0.12);   color: var(--cat-shop); }
.pin-rich__cat--drink    { background: rgba(10,38,32,0.10);     color: var(--cat-drink); }

.pin-rich__cost {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-primary);
  letter-spacing: 0.04em;
}
.pin-rich__meta {
  list-style: none; padding: 0; margin: var(--space-2) 0 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.pin-rich__meta li {
  display: flex; align-items: flex-start; gap: 6px;
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.pin-rich__meta .material-symbols-outlined {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-primary);
}
.pin-rich__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-3);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-muted);
  font-family: var(--font-jakarta);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-primary);
  text-decoration: none;
  align-self: flex-start;
  transition: background var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              gap var(--duration-normal) var(--ease-out);
}
.pin-rich__cta:hover {
  background: var(--color-primary);
  color: #fff;
  gap: 10px;
}
.pin-rich__cta .material-symbols-outlined { font-size: 14px; }


/* ── Slim list (exportable) ── */
.pin-slim__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-top: var(--space-2);
}
.pin-slim__head .btn-sm {
  padding: 8px 14px;
  font-size: 0.8125rem;
}
.pin-slim__head .btn-sm .material-symbols-outlined { font-size: 14px; }

.pin-slim-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pin-category-group {
  border-bottom: 1px solid var(--color-border);
}
.pin-category-group:last-child {
  border-bottom: 0;
}
/* Sticky category headers inside the list. Sticky only on desktop, where
   the list pane is the scroll container; on mobile they're plain headers
   in normal page flow. */
.pin-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--space-5) 9px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-jakarta);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pin-group-head__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pin-group-head__label { flex: 1; }
.pin-group-head__count {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--color-text);
}
@media (min-width: 900px) {
  .pin-group-head { position: sticky; top: 0; z-index: 3; }
}
.pin-slim {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-fast) var(--ease-out);
}
.pin-slim:last-child { border-bottom: 0; }
.pin-slim:hover { background: var(--color-bg-alt); }

/* Number badge — category-coloured, doubles as the colour dot and
   pairs with the map marker the row highlights on hover. */
.pin-slim__num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
  color: #fff;
  background: var(--color-text-muted);
  margin-top: 1px;
}
.pin-slim__num--eat      { background: var(--cat-eat); }
.pin-slim__num--stay     { background: var(--cat-stay); }
.pin-slim__num--activity { background: var(--cat-activity); }
.pin-slim__num--see      { background: var(--cat-see); }
.pin-slim__num--shop     { background: var(--cat-shop); }
.pin-slim__num--drink    { background: var(--cat-drink); }

.pin-slim__body {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 5px;
}
.pin-slim__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3);
}
.pin-slim__heading {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.pin-slim__cat {
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pin-slim__cat--eat      { color: var(--cat-eat); }
.pin-slim__cat--stay     { color: var(--cat-stay); }
.pin-slim__cat--activity { color: var(--cat-activity); }
.pin-slim__cat--see      { color: var(--cat-see); }
.pin-slim__cat--shop     { color: var(--cat-shop); }
.pin-slim__cat--drink    { color: var(--cat-drink); }
.pin-slim__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.2;
}
.pin-slim__actions {
  display: flex; align-items: center; gap: var(--space-3);
  flex-shrink: 0;
}
.pin-slim__cost {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* The personal note — the hero of the row. Curly quotes added in CSS
   so the data stays clean. */
.pin-slim__note {
  margin: 0;
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
  /* Clamp to two lines so a long note doesn't bloat the card — the full
     note (plus hours + address) lives in the map marker popup. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pin-slim__note::before { content: '\201C'; }
.pin-slim__note::after  { content: '\201D'; }
.pin-slim__meta {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.pin-slim__meta span {
  display: inline-flex; align-items: center; gap: 4px;
}
.pin-slim__meta .material-symbols-outlined {
  font-size: 13px;
  color: var(--color-text-muted);
}
.pin-slim__cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary-muted);
  color: var(--color-primary);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}
.pin-slim__cta:hover {
  background: var(--color-primary);
  color: #fff;
}
.pin-slim__cta .material-symbols-outlined { font-size: 16px; }

@media (max-width: 720px) {
  .pin-slim { padding: var(--space-4); }
}

.pin-rich-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.pin-rich-empty .material-symbols-outlined {
  font-size: 32px;
  color: var(--color-text-muted);
}
.pin-rich-empty p {
  font-family: var(--font-jakarta);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
}
.pin-rich-empty a { color: var(--color-primary); }

/* ─── City page — gallery (distinct from homepage marquee) ───
   Calm editorial grid with varied cell sizes for visual rhythm.
   No animation; the homepage owns the rolling motion. */
.region-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 140px;
  gap: var(--space-3);
}
.region-gallery__cell {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  grid-column: span 2;
  grid-row: span 2;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.region-gallery__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.region-gallery__cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
/* Editorial pattern: every 5th cell takes 3 columns; every 7th takes 2 rows.
   Creates a varied "magazine" rhythm without manual per-cell sizing. */
.region-gallery__cell:nth-child(5n+1) { grid-column: span 3; grid-row: span 2; }
.region-gallery__cell:nth-child(7n+3) { grid-row: span 3; }
@media (max-width: 960px) {
  .region-gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; }
  .region-gallery__cell:nth-child(5n+1) { grid-column: span 2; }
}
@media (max-width: 540px) {
  .region-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 110px; gap: 6px; }
  .region-gallery__cell { grid-column: span 1; grid-row: span 1; }
  .region-gallery__cell:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
  .region-gallery__cell:nth-child(7n+3) { grid-row: span 1; }
}

/* ─── Pin suggestion form (city pages) ─────────────────────── */
.pin-suggest {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
  margin: 0 auto;
}
.pin-suggest__header {
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.pin-suggest__eyebrow {
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
}
.pin-suggest__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 0;
  color: var(--color-text);
}
.pin-suggest__sub {
  font-family: var(--font-jakarta);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
}
.pin-suggest__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.pin-suggest__field {
  display: flex; flex-direction: column; gap: 4px;
}
.pin-suggest__field--wide { grid-column: 1 / -1; }
.pin-suggest__label {
  font-family: var(--font-jakarta);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.pin-suggest__input,
.pin-suggest__select,
.pin-suggest__textarea {
  font: inherit;
  font-family: var(--font-body);
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  width: 100%;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.pin-suggest__input:focus,
.pin-suggest__select:focus,
.pin-suggest__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.18);
}
.pin-suggest__textarea {
  min-height: 88px;
  resize: vertical;
}
.pin-suggest__actions {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
}
.pin-suggest__hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
}
.pin-suggest__success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-2);
  text-align: center;
}
.pin-suggest__success-icon {
  font-size: 44px;
  color: var(--color-primary);
  font-variation-settings: 'wght' 500, 'FILL' 1;
}
.pin-suggest__success-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0;
  color: var(--color-text);
}
.pin-suggest__success-text {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  max-width: 360px;
}
.pin-suggest.is-submitted .pin-suggest__grid,
.pin-suggest.is-submitted .pin-suggest__actions,
.pin-suggest.is-submitted .pin-suggest__hint { display: none; }
.pin-suggest.is-submitted .pin-suggest__success { display: flex; }
@media (max-width: 540px) {
  .pin-suggest { padding: var(--space-6); }
  .pin-suggest__grid { grid-template-columns: 1fr; }
}

/* ─── Live-data badge (city hero / destination) ───────────── */
.live-strip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  font-family: var(--font-jakarta);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.92);
}
.live-strip--light {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.live-strip__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
  animation: live-pulse 2.4s var(--ease-out) infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.live-strip__sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
.live-strip__item {
  display: inline-flex; align-items: center; gap: 4px;
}
.live-strip__item .material-symbols-outlined {
  font-size: 16px;
}
.live-strip__item strong { font-weight: 700; }
/* Tone variants for UV / AQI bands. Backgrounds stay subtle so the
   strip reads as a single chip-row. */
.live-strip__item--good      { color: #b9efd8; }
.live-strip__item--good      .material-symbols-outlined { color: #5fd9a8; }
.live-strip__item--fair      { color: #d2efb9; }
.live-strip__item--fair      .material-symbols-outlined { color: #aede71; }
.live-strip__item--moderate  { color: #ffd97a; }
.live-strip__item--moderate  .material-symbols-outlined { color: #ffc850; }
.live-strip__item--poor      { color: #ffb286; }
.live-strip__item--poor      .material-symbols-outlined { color: #ff8a4c; }
.live-strip__item--very-poor { color: #f5a8b0; }
.live-strip__item--very-poor .material-symbols-outlined { color: #ff6b78; }
.live-strip__item--extreme   { color: #ec84a8; }
.live-strip__item--extreme   .material-symbols-outlined { color: #d6427b; }
.live-strip[data-state="loading"] .live-strip__dot { background: #94a3b8; animation: none; }
.live-strip[data-state="error"] { display: none; }

/* ─── Live facts strip (country page) ─────────────────────── */
.live-facts {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: var(--space-4);
}
.live-facts__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  font-family: var(--font-jakarta);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.live-facts__chip strong { font-weight: 700; color: #fff; }
.live-facts__chip .material-symbols-outlined { font-size: 14px; opacity: 0.8; }
.live-facts__chip--accent {
  background: rgba(255,200,80,0.18);
  border-color: rgba(255,200,80,0.45);
  color: var(--color-accent);
}
.live-facts__chip--accent strong { color: #fff; }

/* ─── Hero summary (city page) — inline wiki blurb in the
   subtitle slot. Smooths in once fetched. */
.hero-summary {
  max-width: 680px;
  margin-top: var(--space-5);
  display: flex; flex-direction: column; gap: 6px;
}
.hero-summary__text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-body);
  transition: opacity 240ms var(--ease-out);
}
.hero-summary[data-state="loading"] .hero-summary__text {
  opacity: 0.85;
}
.hero-summary__link {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  font-family: var(--font-jakarta);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
}
.hero-summary__link .material-symbols-outlined { font-size: 14px; }

.live-strip--hero-bottom {
  margin-top: var(--space-6);
  align-self: flex-start;
}

/* Old hero-wiki chip (no longer rendered, kept hidden as a safety net) */
.hero-wiki { display: none; }
.hero-wiki--legacy { margin-top: var(--space-3); max-width: 720px; }
.hero-wiki__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  font-family: var(--font-jakarta);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.hero-wiki__toggle:hover {
  background: rgba(255,200,80,0.18);
  border-color: rgba(255,200,80,0.5);
  color: var(--color-accent);
}
.hero-wiki__toggle .material-symbols-outlined { font-size: 16px; }
.hero-wiki__chev { transition: transform 220ms var(--ease-out); }
.hero-wiki.is-open .hero-wiki__chev { transform: rotate(180deg); }
.hero-wiki__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--ease-out), margin-top 320ms var(--ease-out), opacity 280ms var(--ease-out);
  opacity: 0;
  margin-top: 0;
}
.hero-wiki.is-open .hero-wiki__panel {
  max-height: 320px;
  opacity: 1;
  margin-top: var(--space-3);
}
.hero-wiki__text {
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(13,31,36,0.6);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  max-height: 220px;
  overflow-y: auto;
}
.hero-wiki__link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-family: var(--font-jakarta);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-accent);
}
.hero-wiki__link .material-symbols-outlined { font-size: 14px; }