/* ════════════════════════════════════════════════════════════
   STYLE.CSS — Global stylesheet for Triplaro
   All colors, fonts, and spacing tokens live here as CSS
   variables. index.html and article.html contain structural
   markup only and reference these variables exclusively.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette ── */
  --bg:           #fbfbfa;
  --surface:      #f4f3f0;
  --card:         #ffffff;
  --border:       #e8e6e1;
  --ink:          #1a1a1a;
  --ink-soft:     #5a5753;
  --ink-muted:    #9b9793;
  --accent:       #1a1a1a;
  --accent-hover: #333333;
  --rule:         1px solid var(--border);
  --skel-base:    #eeecea;
  --skel-shine:   #f6f5f2;

  /* ── Brand / accent color ──
     This is the teal actually used throughout matcher.html and the
     My Plans section (previously out of sync with an unused #32A8DD
     blue defined here but never actually used in the product). */
  --brand:        #0891B2;
  --brand-blue:   #0891B2;
  --brand-dark:   #066b8a;
  --brand-light:  rgba(8, 145, 178, 0.12);
  --brand-border: rgba(8, 145, 178, 0.35);

  /* ── Text colors ── */
  --text-dark:  #1a1a1a;
  --text-light: #555555;

  /* ── Typography ── */
  --heading-font: 'Playfair Display', serif;
  --body-font:    'Inter', sans-serif;

  /* ── Article layout tokens ── */
  --hero-height:       520px;
  --hero-height-md:    400px;
  --hero-height-sm:    260px;
  --sidebar-width:     300px;
  --content-max:       720px;
  --layout-gap:        2.5rem;
  --section-radius:    14px;
  --glass-bg:          rgba(255, 255, 255, 0.72);
  --glass-border:      rgba(255, 255, 255, 0.55);
  --glass-shadow:      0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  --glass-blur:        blur(16px);
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

@font-face { font-display: swap; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body { overflow-x: hidden; 
  font-family: var(--body-font);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--heading-font);
  color: #000;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
h4 {
  font-family: var(--body-font);
  color: #000;
  margin-bottom: 1rem;
}
p {
  color: var(--text-light);
  margin-bottom: 1.5rem;
}
a { text-decoration: none; color: inherit; transition: all 0.2s ease; }
a:hover { color: var(--brand-dark); }
img { display: block; max-width: 100%; }

/* ─── SCROLLBAR ─── */
html { scrollbar-width: thin; scrollbar-color: #0891B2 rgba(0,0,0,0.06); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
::-webkit-scrollbar-thumb { background: #0891B2; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #0771a0; }

/* ── Visual breathing room: extra spacing for prose blocks ── */
.article-body p,
.dest-card-desc,
.how-step p,
.hero-sub,
.newsletter-sub {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.article-body h2,
.article-body h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.dest-card-desc p:last-child,
.how-step p:last-child,
.sidebar-card__body:last-child,
.article-body p:last-child {
  margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════
   INDEX.HTML — page-specific styles
   ════════════════════════════════════════════════════════════ */


/* ─── UTILITY ─── */
.container { max-width: 1080px; margin: 0 auto; padding: 0 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ─── NAV ─── */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(251, 251, 250, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--rule);
  padding: 0 2rem;
}

.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  gap: 1.5rem;
}

.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}
.logo-wordmark {
  font-family: var(--heading-font);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo-wordmark span {
  color: var(--ink-muted);
  font-weight: 600;
}
.logo:hover { opacity: 0.65; }

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.nav-links a:hover { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.nav-cta {
  font-family: var(--heading-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #0891B2;
  color: #fff;
  border: none;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}
.nav-cta:hover { background: #066b8a; transform: translateY(-1px); }

@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(8,145,178,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(8,145,178,0); }
}
.btn-primary { animation: subtlePulse 2.5s ease-in-out infinite; }

/* ─── HAMBURGER BUTTON ─── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: var(--rule);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-hamburger:hover { background: var(--surface); }
.nav-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── MOBILE DRAWER ─── */
.nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  z-index: 300;
  background: #111827;
  flex-direction: column;
  padding: 72px 28px 40px;
  gap: 0;
  overflow-y: auto;
  transform: translateX(100%);
  opacity: 1;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  box-shadow: -4px 0 32px rgba(0,0,0,0.25);
}
.nav-drawer.open {
  transform: translateX(0);
  pointer-events: all;
}
.nav-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 28px;
  padding-bottom: 8px;
}
.nav-drawer ul li a {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f9fafb;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  transition: color 0.15s ease;
}
.nav-drawer ul li a:hover { color: var(--brand); }
.nav-drawer-cta {
  font-family: var(--heading-font);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 0.9rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: center;
  display: block;
}
.nav-drawer-cta:hover { background: var(--brand-dark); }
/* Overlay behind the drawer */
.nav-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.nav-drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ─── HERO ─── */
.hero {
  padding: 8rem 2rem 6rem;
  text-align: center;
  border-bottom: var(--rule);
  position: relative;
  overflow: hidden;
  background: #0a120e; /* fallback while slideshow loads */
  min-height: 540px;
}

/* Dark overlay so text stays readable */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 18, 14, 0.62) 0%,
    rgba(10, 18, 14, 0.52) 60%,
    rgba(10, 18, 14, 0.70) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.hero > * { position: relative; z-index: 1; }

.hero-eyebrow {
  display: inline-block;
  font-family: var(--heading-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 1.85rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 780px;
  margin: 0 auto 1.4rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero h1 em {
  font-style: normal;
  position: relative;
  display: inline-block;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.6);
  border-radius: 2px;
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  animation: heroUnderlineIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.9s forwards;
}
@keyframes heroUnderlineIn {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

.hero-sub {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(255,255,255,0.82);
  max-width: 500px;
  margin: 0 auto 2.75rem;
  line-height: 1.8;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.btn-primary {
  font-family: var(--heading-font);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 0.75rem 1.6rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }

.btn-secondary {
  font-family: var(--heading-font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: none;
  border: var(--rule);
  padding: 0.75rem 1.6rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
}
.btn-secondary:hover { color: var(--ink); background: var(--surface); border-color: #ccc9c3; }

/* Override inside hero (photo bg) */
.hero .btn-secondary {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn-secondary:hover { color: #fff; background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.65); }

/* ── FLOATING CTA: one-shot arrival pulse when it first becomes visible ── */
@keyframes ctaArrivalPulse {
  0%   { box-shadow: 0 8px 28px rgba(8,145,178,0.45); }
  40%  { box-shadow: 0 8px 28px rgba(8,145,178,0.45), 0 0 0 10px rgba(8,145,178,0); }
  100% { box-shadow: 0 8px 28px rgba(8,145,178,0.45); }
}
.floating-cta.has-arrived { animation: ctaArrivalPulse 0.7s ease 0.3s 1; }
.floating-cta.has-arrived:hover { animation: none; }

/* ── HOW-STEP: photo subtle scale on card hover ── */
.how-step-photo {
  overflow: hidden;
}
.how-step-photo > * { transition: transform 0.4s ease; }
.how-step:hover .how-step-photo { background-size: cover; }
.how-step { position: relative; overflow: hidden; }
.how-step-photo {
  transition: transform 0.4s ease;
  transform-origin: center;
}
.how-step:hover .how-step-photo {
  transform: scale(1.03);
}

/* Hero stats strip */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}

.hero-stat {
  text-align: center;
}

.hero-stat-num {
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0891B2;
  display: block;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.hero-stat-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.hero-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.25);
}

/* ─── SECTION SHARED ─── */
.section {
  padding: 5rem 2rem;
  border-bottom: var(--rule);
}

.section-header {
  max-width: 1080px;
  margin: 0 auto 2.75rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.section-eyebrow {
  font-family: var(--heading-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.5rem;
}

/* Section title with an animated brand-teal underline that draws in when
   the section scrolls into view (triggered by .is-visible on .fade-up parent) */
.section-title {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.15;
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  height: 2px; width: 40px;
  background: var(--brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1) 0.2s;
}
.fade-up.is-visible .section-title::after { transform: scaleX(1); }

.section-sub {
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-weight: 400;
  align-self: flex-end;
}

/* ─── TRUST BAR (marquee ticker) ─── */
.trust-bar {
  background: var(--ink);
  color: rgba(255,255,255,0.75);
  padding: 0.6rem 0;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
.trust-bar-track {
  display: inline-flex;
  gap: 0;
  animation: marquee 32s linear infinite;
  width: max-content;
}
.trust-bar-track:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.trust-bar-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0 2.5rem;
}
.trust-bar-icon { color: var(--brand); font-size: 0.65rem; }

/* ─── FLOATING CTA ─── */
.floating-cta {
  position: fixed; bottom: 28px; right: 28px; z-index: 999;
  background: var(--brand); color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  padding: 14px 22px; border-radius: 999px; border: none;
  text-decoration: none; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 28px rgba(8,145,178,0.45);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
  pointer-events: none;
}
.floating-cta.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.floating-cta:hover { box-shadow: 0 12px 36px rgba(8,145,178,0.55); transform: translateY(-2px); color: #fff; }
@media (max-width: 600px) {
  .floating-cta { bottom: 18px; right: 16px; padding: 13px 18px; font-size: 12px; }
}

/* ─── STATS SECTION ─── */
.stats-section {
  padding: 32px 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.stats-inner {
  max-width: 700px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.stat-item { padding: 12px 24px; position: relative; }
.stat-item:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: 32px; width: 1px; background: var(--border);
}
.stat-num {
  display: block; font-family: var(--heading-font);
  font-size: clamp(24px, 3.5vw, 36px); font-weight: 700;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px;
}
.stat-num span { color: var(--brand); }
.stat-label {
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 500;
  color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
@media (max-width: 600px) {
  .stat-item { padding: 10px 12px; }
  .stat-num { font-size: 22px; }
}

/* ─── DESTINATIONS SECTION ─── */
  padding: 5rem 2rem;
  border-bottom: var(--rule);
  background: var(--bg);
}

/* ─── MATCHER PROMO ─── */
.matcher-promo {
  max-width: 680px;
  margin: 2.5rem auto 0;
  text-align: center;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  overflow: hidden;
}

/* Scenic photo banner inside the promo card */
.matcher-promo-photo {
  width: 100%;
  height: 200px;
  background-image: url('https://images.unsplash.com/photo-1537956965359-7573183d1f57?auto=format&fit=crop&w=900&q=75');
  background-size: cover;
  background-position: center 55%;
  position: relative;
}
.matcher-promo-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.28) 100%);
}

.matcher-promo-body {
  padding: 2.25rem 2rem 2.5rem;
}
.matcher-promo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4b5563;
  margin: 0 auto 1.75rem;
  max-width: 520px;
}

/* Region tabs */
.region-tabs {
  display: flex;
  gap: 0.5rem;
  max-width: 1080px;
  margin: 0 auto 2.5rem;
  flex-wrap: wrap;
}

.region-tab {
  font-family: var(--heading-font);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: none;
  border: var(--rule);
  border-radius: 100px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.region-tab:hover { color: var(--ink); border-color: #ccc9c3; background: var(--surface); }
.region-tab.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 3px 12px rgba(8,145,178,0.25);
}

/* Country sub-tabs row */
.country-tabs {
  display: flex;
  gap: 0.4rem;
  max-width: 1080px;
  margin: -1.6rem auto 2rem;   /* tuck up under the region row */
  flex-wrap: wrap;
  padding-left: 0.1rem;
}
.country-tab {
  font-family: var(--heading-font);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.country-tab:hover { color: var(--ink); border-color: #ccc9c3; background: var(--surface); }
.country-tab.active {
  background: rgba(8,145,178,0.1);
  color: var(--brand);
  border-color: rgba(8,145,178,0.3);
  font-weight: 700;
}

/* Grid layout */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
}

/* ─── DESTINATION CARD (active) ─── */
.dest-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: var(--rule);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.05);
  transition: all 0.28s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.dest-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  border-color: #d0cec9;
}

/* Card image area */
.dest-card-img {
  position: relative;
  width: 100%;
  padding-top: 62%;
  overflow: hidden;
  background: var(--surface);
  flex-shrink: 0;
}

/* Shimmer skeleton while photo loads — same keyframe as article-hero */
.dest-card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, var(--skel-base) 30%, var(--skel-shine) 50%, var(--skel-base) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  z-index: 0;
  transition: opacity 0.4s ease;
}
.dest-card-img.img-loaded::before { opacity: 0; pointer-events: none; }

.dest-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, opacity 0.4s ease;
  opacity: 0;
  z-index: 1;
}
.dest-card-img.img-loaded img { opacity: 1; }
.dest-card:hover .dest-card-img img { transform: scale(1.06); }

/* Region badge */
.dest-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  font-family: var(--heading-font);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(251, 251, 250, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: var(--rule);
  border-radius: 100px;
  padding: 0.25rem 0.65rem;
}

/* Card body */
.dest-card-body {
  padding: 1.35rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dest-card-city {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.dest-card-country {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-bottom: 0.85rem;
}

.dest-card-desc {
  font-size: 0.83rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1.2rem;
}

/* Meta tags */
.dest-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.dest-tag {
  font-family: var(--heading-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface);
  border: var(--rule);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
}

/* CTA link at bottom */
.dest-card-cta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--heading-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: auto;
}

.dest-card-cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.dest-card:hover .dest-card-cta svg { transform: translateX(4px); }

/* ─── COMING SOON CARD ─── */
.dest-card-soon {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: var(--rule);
  background: var(--surface);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.75rem;
  transition: border-color 0.2s ease;
}

/* Subtle grid pattern on coming-soon cards */
.dest-card-soon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.45;
  pointer-events: none;
}

.dest-card-soon:hover { border-color: #ccc9c3; }

.soon-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  opacity: 0.4;
}

.soon-region {
  font-family: var(--heading-font);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
}

.soon-pill {
  display: inline-block;
  font-family: var(--heading-font);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: var(--rule);
  border-radius: 100px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.soon-desc {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 200px;
  position: relative;
  z-index: 1;
}

/* ─── FEATURED / SPOTLIGHT CARD (spans 2 cols) ─── */
.dest-card-featured {
  grid-column: span 2;
  flex-direction: row;
  min-height: 260px;
}

.dest-card-featured .dest-card-img {
  width: 48%;
  padding-top: 0;
  min-height: 260px;
  flex-shrink: 0;
}

.dest-card-featured .dest-card-body {
  padding: 2rem 1.75rem;
  justify-content: center;
}

.dest-card-featured .dest-card-city { font-size: 1.55rem; }

.dest-card-featured .dest-card-desc {
  font-size: 0.88rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 340px;
}

/* "Editor's pick" ribbon */
.dest-ribbon {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-family: var(--heading-font);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border-radius: 100px;
  padding: 0.25rem 0.65rem;
}

/* ─── HOW IT WORKS (3-col) ─── */
.how-section {
  padding: 5rem 2rem;
  border-top: 1px solid rgba(0,0,0,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  background: var(--bg);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
}

.how-step {
  background: var(--card);
  border: var(--rule);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.how-step:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

/* Photo strip at top of each step card */
.how-step-photo {
  width: 100%;
  height: 160px;
  background-color: #1a2b30;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.how-step-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.18) 100%);
}

.how-step-inner {
  padding: 1.5rem 1.75rem 2rem;
}

.how-step-num {
  font-family: var(--heading-font);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
  display: block;
}

.how-step-icon {
  font-size: 1.6rem;
  margin-bottom: 0.9rem;
  display: block;
  line-height: 1;
}

.how-step h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.how-step p {
  font-size: 0.83rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ─── NEWSLETTER ─── */
.newsletter-section {
  padding: 6rem 2rem;
  text-align: center;
  border-bottom: var(--rule);
}

.newsletter-inner {
  max-width: 520px;
  margin: 0 auto;
}

.newsletter-eyebrow {
  font-family: var(--heading-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1rem;
  display: block;
}

.newsletter-title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 0.75rem;
  line-height: 1.15;
}

.newsletter-sub {
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.newsletter-form {
  display: flex;
  gap: 0.6rem;
  max-width: 420px;
  margin: 0 auto 1rem;
}

.newsletter-input {
  flex: 1;
  font-family: var(--body-font);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--card);
  border: var(--rule);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.newsletter-input::placeholder { color: var(--ink-muted); }
.newsletter-input:focus {
  border-color: #b0ada8;
  box-shadow: 0 0 0 3px rgba(26,26,26,0.06);
}

.newsletter-btn {
  font-family: var(--heading-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 0.7rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.newsletter-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }

.newsletter-note {
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-weight: 300;
}

/* ─── FOOTER ─── */
/* Scoped to :has(.footer-top) so this dark, full footer design (used on
   article/destination pages like kyoto.html, prague-vienna.html) doesn't
   collide with the lighter, simpler footer further down this file (used
   on other page templates). Both previously targeted the bare `footer`
   selector, which caused a background/color mismatch: the later rule's
   light background would win while this rule's near-white text color
   leaked through, making footer links unreadable except on hover. */
footer:has(.footer-top) {
  padding: 64px 24px 32px;
  background: var(--ink);
  color: rgba(255,255,255,0.6);
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 32px;
}

.footer-brand .footer-logo-wordmark {
  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.footer-brand .footer-logo-wordmark span { color: var(--brand); font-weight: 600; }

.footer-brand-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px; line-height: 1.65;
  color: rgba(255,255,255,0.45);
  margin-top: 12px; max-width: 220px;
}

.footer-col-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 16px; display: block;
}

.footer-col-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col-links a {
  font-family: 'Outfit', sans-serif;
  font-size: 14px; color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-col-links a:hover { color: #fff; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}

/* Higher-specificity override so this always wins over the plain
   .footer-copy rule further down the file (which targets the lighter,
   simpler footer template used elsewhere on the site). */
footer:has(.footer-top) .footer-copy {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px; color: rgba(255,255,255,0.28);
  margin: 0;
  opacity: 1;
}

.footer-logo-wordmark {
  font-family: var(--heading-font);
  font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.01em;
}
.footer-logo-wordmark span { color: var(--brand); font-weight: 600; }

.footer-links {
  display: flex; gap: 1.75rem; list-style: none;
  flex-wrap: wrap; justify-content: center;
}
.footer-links a { font-size: 0.78rem; color: rgba(255,255,255,0.5); transition: color 0.2s ease; }
.footer-links a:hover { color: #fff; }

.footer-disclosure { display: none; }

.footer-socials { display: flex; gap: 14px; }
.footer-social-link {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); text-decoration: none;
  font-size: 14px; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.footer-social-link:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ─── BACK TO TOP (mobile) ─── */
#backToTop {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  right: 1.25rem;
  z-index: 250;
  width: 44px;
  height: 44px;
  background: var(--card);
  border: var(--rule);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
  opacity: 0;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#backToTop.visible { opacity: 1; pointer-events: all; }
#backToTop:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.14); transform: translateY(-2px); }
#backToTop svg {
  width: 16px; height: 16px;
  stroke: var(--ink-soft); fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 769px) { #backToTop { display: none !important; } }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .dest-card-featured {
    grid-column: span 1;
    flex-direction: column;
  }
  .dest-card-featured .dest-card-img {
    width: 100%;
    padding-top: 60%;
    min-height: unset;
  }
  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .how-grid { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 768px) {
  nav { padding: 0 1rem; }
  .nav-links  { display: none; }
  .nav-hamburger { display: flex; }
  .nav-drawer { display: flex; }
  .nav-cta { font-size: 0.68rem; padding: 0.45rem 0.75rem; letter-spacing: 0.02em; }
  .nav-actions { gap: 0.4rem; }

  .hero { padding: 3.5rem 1.25rem 3rem; background-attachment: scroll; }
  .hero h1 { font-size: clamp(1.9rem, 7vw, 2.5rem); }
  .hero-stats { gap: 1.5rem; }
  .hero-stat-divider { display: none; }

  /* Hero slideshow: shrink the fixed 540px desktop box down to something
     sane for phones, so background-size:cover stops cropping the subject
     (e.g. pyramid tips) to fit an oversized box. */
  .hero, #heroSection { min-height: 420px; }

  /* Pricing section (boats photo + glass cards) — was unreadable on mobile because
     every label/pill had white-space:nowrap and the section had min-height:760px. */
  #pricing { min-height: unset !important; }
  #pricing > div[style*="max-width:1100px"] { padding: 16px 18px 40px !important; }
  #pricing h2,
  #pricing p,
  #pricing span,
  #pricing div { white-space: normal !important; }
  #pricing h2 { font-size: clamp(22px, 7vw, 30px) !important; }
  #pricing > div[style*="max-width:1100px"] > div:first-child { margin-bottom: 20px !important; }

  /* Pricing rows: stack price block, features, and CTA cleanly instead of
     fighting for space in one nowrap row */
  #pricing div[style*="background:rgba(255,255,255,0.10)"],
  #pricing div[style*="background:rgba(8,145,178,0.18)"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  #pricing div[style*="display:flex;flex-direction:column;align-items:flex-end"] {
    align-items: stretch !important;
    width: 100%;
  }
  #pricing div[style*="display:flex;flex-direction:column;align-items:flex-end"] span {
    align-self: flex-start;
  }
  #pricing a[href="matcher.html"][style*="border:1.5px solid"],
  #pricing button#previewPackBtn,
  #pricing a[href="matcher.html"][style*="background:#fff"] {
    text-align: center !important;
    width: 100%;
  }

  .destinations-section { padding: 3.5rem 1.25rem; }
  .dest-grid { grid-template-columns: 1fr; }
  .dest-card-featured { grid-column: span 1; }

  .section { padding: 3rem 1.25rem; }
  .how-section { padding: 3rem 1.25rem; }
  .newsletter-section { padding: 3.5rem 1.25rem; }
  .newsletter-form { flex-direction: column; }
  .newsletter-btn { width: 100%; }
  .section-header { flex-direction: column; gap: 0.25rem; }
}

@media (max-width: 480px) {
  .dest-card-soon { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ════════════════════════════════════════════════════════════
   ARTICLE.HTML — page-specific styles
   ════════════════════════════════════════════════════════════ */


/* ─── UTILITY ─── */
/* .sr-only already defined in the INDEX.HTML section above — shared globally, not redefined here */


/* ═══════════════════════════════════════════
   NAV — shared `nav`, `.nav-inner`, `.logo*`, `.nav-links*`,
   `.nav-actions`, `.nav-cta`, `.nav-hamburger` styling is identical to the
   INDEX.HTML section above and intentionally not redefined here.

   The mobile drawer below WAS also reusing the same `.nav-drawer` /
   `.nav-drawer-cta` class names as index.html, but with a totally different
   design (slide-down light panel here vs. slide-from-right dark panel on
   index.html). Because both rule sets lived in the same stylesheet under
   identical selectors, whichever one appeared later in the file silently
   won on every page that loaded style.css — so one of the two drawers was
   never actually rendering as designed.

   Renamed to `.article-nav-drawer` / `.article-nav-drawer-cta` below to
   remove the collision. IMPORTANT: if/when article.html exists, its markup
   needs the matching class names (`article-nav-drawer`,
   `article-nav-drawer-cta`) instead of the shared `nav-drawer` /
   `nav-drawer-cta` ones, or its drawer will silently fall back to the
   index.html dark drawer styling instead of this light one. ─────────────── */

/* Mobile Drawer (article.html variant) */
.article-nav-drawer {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 190;
  background: rgba(251, 251, 250, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: var(--rule);
  flex-direction: column;
  padding: 2rem 1.75rem 3rem;
  gap: 0;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.article-nav-drawer.open { opacity: 1; transform: translateY(0); pointer-events: all; }
.article-nav-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: var(--rule);
  margin-bottom: 2rem;
}
.article-nav-drawer ul li a {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 1rem 0;
  border-top: var(--rule);
  transition: color 0.15s ease;
}
.article-nav-drawer ul li a:hover { color: var(--ink-soft); }
.article-nav-drawer-cta {
  font-family: var(--heading-font);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 0.9rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  display: block;
}
.article-nav-drawer-cta:hover { background: var(--accent-hover); }


/* ═══════════════════════════════════════════
   ARTICLE HERO BANNER
═══════════════════════════════════════════ */
.article-hero {
  position: relative;
  width: 100%;
  height: var(--hero-height);
  background: var(--surface);
  overflow: hidden;
}

/* Image injected by app.js as background-image or <img> */
.article-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Gradient overlay for text legibility */
.article-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,  rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.12) 55%, transparent 100%),
    linear-gradient(to right, rgba(10,10,10,0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Hero meta — injected by app.js */
.article-hero__meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 2.5rem 3rem 2.75rem;
  max-width: calc(var(--content-max) + var(--sidebar-width) + var(--layout-gap) + 6rem);
  margin: 0 auto;
}

/* Skeleton shimmer while hero loads */
.article-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, var(--skel-base) 30%, var(--skel-shine) 50%, var(--skel-base) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite linear;
  z-index: 0;
  transition: opacity 0.4s ease;
}
.article-hero.loaded::after { opacity: 0; pointer-events: none; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════
   PAGE WRAPPER & TWO-COLUMN LAYOUT
═══════════════════════════════════════════ */
.article-wrapper {
  max-width: calc(var(--content-max) + var(--sidebar-width) + var(--layout-gap) + 6rem);
  margin: 0 auto;
  padding: 2.75rem 3rem 5rem;
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  grid-template-areas: "content sidebar";
  gap: var(--layout-gap);
  align-items: start;
}

/* ─── CONTENT COLUMN ─── */
.article-content {
  grid-area: content;
  min-width: 0; /* prevent grid blowout */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ─── SIDEBAR COLUMN ─── */
.article-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: calc(56px + 1.5rem); /* nav height + breathing room */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-self: start;
}


/* ═══════════════════════════════════════════
   BACK NAV + BREADCRUMB ROW
═══════════════════════════════════════════ */
.article-nav-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--heading-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.45rem 0.85rem 0.45rem 0.65rem;
  border: var(--rule);
  border-radius: 100px;
  transition: all 0.2s ease;
  background: var(--card);
  white-space: nowrap;
  flex-shrink: 0;
}
.back-link svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.back-link:hover {
  color: var(--ink);
  border-color: #ccc9c3;
  background: var(--surface);
}
.back-link:hover svg { transform: translateX(-3px); }

/* Breadcrumb trail (injected by app.js) */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-sep {
  opacity: 0.4;
  font-size: 0.65rem;
}
.breadcrumb-current {
  color: var(--ink-soft);
  font-weight: 500;
}


/* ═══════════════════════════════════════════
   VISA CHECKER ZONE  (glassmorphic panel)
═══════════════════════════════════════════ */
#visa-checker-zone {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--section-radius);
  box-shadow: var(--glass-shadow);
  padding: 1.5rem 1.6rem 1.6rem;
  position: relative;
  overflow: hidden;
}

/* Subtle tinted shimmer strip at top */
#visa-checker-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(26,26,26,0.12) 0%, rgba(26,26,26,0.04) 50%, rgba(26,26,26,0.12) 100%);
  border-radius: var(--section-radius) var(--section-radius) 0 0;
}

.visa-checker-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
}
.visa-checker-icon {
  width: 30px;
  height: 30px;
  background: var(--ink);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.visa-checker-icon svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.visa-checker-title {
  font-family: var(--heading-font);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.visa-checker-sub {
  font-size: 0.67rem;
  color: var(--ink-muted);
  font-weight: 400;
  display: block;
  margin-top: 0.1rem;
}

/* Passport searchable input */
.passport-select-wrap { position: relative; margin-bottom: 0.85rem; }
#passport-search {
  width: 100%; font-family: var(--body-font); font-size: 0.875rem;
  font-weight: 400; color: var(--ink); background: var(--card);
  border: var(--rule); border-radius: 9px;
  padding: 0.65rem 2.5rem 0.65rem 0.9rem;
  outline: none; cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
#passport-search:focus { border-color: #b0ada8; box-shadow: 0 0 0 3px rgba(26,26,26,0.06); }
#passport-search::placeholder { color: var(--ink-muted); }
#passport-dropdown {
  display: none; position: absolute; top: calc(100% + 4px);
  left: 0; right: 0; background: var(--card); border: var(--rule);
  border-radius: 9px; max-height: 220px; overflow-y: auto;
  z-index: 999; box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
#passport-dropdown.open { display: block; }
.passport-option {
  padding: 0.55rem 0.9rem; font-size: 0.875rem;
  cursor: pointer; color: var(--ink); transition: background 0.1s;
}
.passport-option:hover, .passport-option.active { background: rgba(0,0,0,0.05); }
.passport-option.no-results { color: var(--ink-muted); cursor: default; }
#passport-selector { display: none; }

/* Visa alert / result area */
#visa-alert-status {
  min-height: 2.5rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.55;
  transition: all 0.25s ease;
  /* JS adds classes: .visa-ok / .visa-warn / .visa-info to style results */
}
#visa-alert-status:empty {
  /* placeholder state — JS populates this */
}
/* Status colour modifiers (app.js applies these) */
#visa-alert-status.visa-ok {
  background: rgba(45, 106, 79, 0.07);
  border: 1px solid rgba(45, 106, 79, 0.2);
  padding: 0.65rem 0.85rem;
  color: #0e6a87;
}
#visa-alert-status.visa-warn {
  background: rgba(180, 100, 20, 0.07);
  border: 1px solid rgba(180, 100, 20, 0.2);
  padding: 0.65rem 0.85rem;
  color: #8a4a0a;
}
#visa-alert-status.visa-info {
  background: rgba(26, 26, 26, 0.04);
  border: var(--rule);
  padding: 0.65rem 0.85rem;
  color: var(--ink-soft);
}


/* ═══════════════════════════════════════════
   DYNAMIC CONTROLS ZONE
   (JS draws Days / Budget / Style button rows)
═══════════════════════════════════════════ */
#dynamic-controls-zone {
  /* Intentionally unstyled — acts as a bare container.
     JS injects button rows and their own wrapper styles. */
}


/* ═══════════════════════════════════════════
   INDEPENDENT DISPLAY BLOCKS
   (JS injects all content — these are blank slates)
═══════════════════════════════════════════ */
#itinerary-display,
#accommodation-display,
#activity-display,
#transport-display,
#food-display {
  /* Intentionally empty — JS hydrates these */
}


/* ═══════════════════════════════════════════
   SIDEBAR WIDGETS
═══════════════════════════════════════════ */

/* Generic glassmorphic sidebar card */
.sidebar-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--section-radius);
  box-shadow: var(--glass-shadow);
  padding: 1.5rem 1.5rem 1.6rem;
  position: relative;
  overflow: hidden;
}

.sidebar-card__eyebrow {
  font-family: var(--heading-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.6rem;
}

.sidebar-card__title {
  font-family: var(--heading-font);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

.sidebar-card__body {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 1.1rem;
}

/* CTA button inside sidebar card */
.sidebar-cta-btn {
  display: block;
  width: 100%;
  font-family: var(--heading-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sidebar-cta-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
}

/* Outlined variant */
.sidebar-cta-btn--outline {
  background: transparent;
  color: var(--ink);
  border: var(--rule);
}
.sidebar-cta-btn--outline:hover {
  background: var(--surface);
  border-color: #ccc9c3;
  transform: translateY(-1px);
  box-shadow: none;
}

/* ── Sidebar: At a Glance info-grid ── */
.sidebar-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Each row: icon pill + label + value */
.sidebar-fact {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--border);
}
.sidebar-fact:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-fact:first-child { padding-top: 0; }
/* Icon pill */
.sidebar-fact__icon {
  width: 28px;
  height: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-fact__icon svg {
  width: 13px;
  height: 13px;
  stroke: var(--ink-soft);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-fact__label {
  font-family: var(--body-font);
  color: var(--ink-muted);
  font-weight: 400;
  font-size: 0.75rem;
  white-space: nowrap;
}
.sidebar-fact__value {
  font-family: var(--heading-font);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.75rem;
  text-align: right;
  letter-spacing: -0.01em;
}


/* Thin divider inside sidebar cards */
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 1rem 0;
  opacity: 0.6;
}

/* Sidebar: affiliate disclaimer micro-text */
.sidebar-affiliate-note {
  font-size: 0.65rem;
  color: var(--ink-muted);
  font-weight: 300;
  line-height: 1.55;
  margin-top: 0.75rem;
}


/* ═══════════════════════════════════════════
   REUSABLE CONTENT SECTION SHELL
   (app.js injects heading + content into these)
═══════════════════════════════════════════ */
.content-section {
  background: var(--card);
  border: var(--rule);
  border-radius: var(--section-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.content-section:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.07);
}

.content-section__header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.35rem 1.75rem 1.2rem;
  border-bottom: var(--rule);
}
.content-section__icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.content-section__heading {
  font-family: var(--heading-font);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.content-section__body {
  padding: 1.5rem 1.75rem 1.75rem;
}

/* Filter / toggle pill buttons — app.js renders these inside #dynamic-controls-zone */
.controls-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.controls-row-label {
  font-family: var(--heading-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  min-width: 52px;
  flex-shrink: 0;
}
.filter-pill {
  font-family: var(--heading-font);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--card);
  border: var(--rule);
  border-radius: 100px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.filter-pill:hover {
  color: var(--ink);
  border-color: #ccc9c3;
  background: var(--surface);
}
.filter-pill.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}


/* ═══════════════════════════════════════════
   NEWSLETTER STRIP (inline, below content)
═══════════════════════════════════════════ */
.article-newsletter {
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--section-radius);
  padding: 2rem 2.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.article-newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.35;
  pointer-events: none;
}
.article-newsletter__eyebrow {
  font-family: var(--heading-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 1;
}
.article-newsletter__title {
  font-family: var(--heading-font);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.5rem;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}
.article-newsletter__sub {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.article-newsletter__form {
  display: flex;
  gap: 0.55rem;
  max-width: 380px;
  margin: 0 auto 0.75rem;
  position: relative;
  z-index: 1;
}
.article-newsletter__input {
  flex: 1;
  font-family: var(--body-font);
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--card);
  border: var(--rule);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.article-newsletter__input::placeholder { color: var(--ink-muted); }
.article-newsletter__input:focus {
  border-color: #b0ada8;
  box-shadow: 0 0 0 3px rgba(26,26,26,0.06);
}
.article-newsletter__btn {
  font-family: var(--heading-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.15rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.article-newsletter__btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.article-newsletter__note {
  font-size: 0.67rem;
  color: var(--ink-muted);
  font-weight: 300;
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════
   FOUNDER STORY SECTION
═══════════════════════════════════════════ */
.founder-section {
  padding: 6rem 2rem;
  border-bottom: var(--rule);
  background: var(--bg);
}
.founder-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.founder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  background: rgba(8,145,178,0.07);
  border: 1px solid rgba(8,145,178,0.18);
  border-radius: 50%;
  margin-bottom: 1.5rem;
}
.founder-eyebrow {
  font-family: var(--heading-font);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); display: block; margin-bottom: 0.75rem;
}
.founder-title {
  font-size: clamp(1.65rem, 3.5vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.025em;
  color: var(--ink); line-height: 1.15; margin-bottom: 2rem;
}
.founder-body {
  text-align: left; display: flex; flex-direction: column; gap: 1.25rem;
}
.founder-body p {
  font-size: 0.97rem; color: var(--ink-soft);
  font-weight: 300; line-height: 1.85; margin: 0;
}
.founder-sign {
  font-family: var(--heading-font) !important;
  font-size: 1rem !important; font-weight: 700 !important;
  color: var(--ink) !important; letter-spacing: -0.01em;
  margin-top: 0.5rem !important;
}
@media (max-width: 600px) {
  .founder-section { padding: 4rem 1.25rem; }
}

/* ═══════════════════════════════════════════
   NEWSLETTER — BEEHIIV EMBED CENTERING
═══════════════════════════════════════════ */
.newsletter-inner [data-beehiiv-form],
.newsletter-inner iframe,
.newsletter-inner > div {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ═══════════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════════ */
.contact-section {
  display: none;
}
.contact-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.contact-eyebrow {
  font-family: var(--heading-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.75rem;
}
.contact-title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 0.65rem;
  line-height: 1.15;
}
.contact-sub {
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}
.contact-form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-label {
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.contact-input {
  font-family: var(--body-font);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--card);
  border: var(--rule);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  outline: none;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.contact-input::placeholder { color: var(--ink-muted); }
.contact-input:focus {
  border-color: #b0ada8;
  box-shadow: 0 0 0 3px rgba(26,26,26,0.06);
}
.contact-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239b9793' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.contact-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}
.contact-btn {
  font-family: var(--heading-font);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 0.85rem 2rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  align-self: flex-start;
}
.contact-btn:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.contact-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.contact-status {
  font-size: 0.82rem;
  min-height: 1.2em;
  margin: 0;
}
@media (max-width: 600px) {
  .contact-section { padding: 4rem 1.25rem; }
  .contact-row { grid-template-columns: 1fr; }
  .contact-btn { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer:not(:has(.footer-top)) {
  padding: 2.75rem 2rem;
  background: var(--bg);
  border-top: var(--rule);
}

.footer-inner:not(:has(.footer-top)) {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.footer-logo-wordmark {
  font-family: var(--heading-font);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.footer-logo-wordmark span { color: var(--ink-muted); font-weight: 600; }

.footer-links {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a {
  font-size: 0.78rem;
  color: var(--ink-muted);
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--ink); }

.footer-disclosure {
  font-size: 0.72rem;
  color: var(--ink-muted);
  max-width: 560px;
  line-height: 1.7;
  font-weight: 300;
}

.footer-copy {
  font-size: 0.7rem;
  color: var(--ink-muted);
  opacity: 0.6;
}


/* ─── BACK TO TOP (mobile) ─── */
#backToTop {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  right: 1.25rem;
  z-index: 250;
  width: 44px;
  height: 44px;
  background: var(--card);
  border: var(--rule);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
  opacity: 0;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#backToTop.visible { opacity: 1; pointer-events: all; }
#backToTop:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.14); transform: translateY(-2px); }
#backToTop svg {
  width: 16px; height: 16px;
  stroke: var(--ink-soft); fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 769px) { #backToTop { display: none !important; } }


/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 960px)
═══════════════════════════════════════════ */
@media (max-width: 960px) {
  :root {
    --sidebar-width: 260px;
    --layout-gap:    1.75rem;
  }

  .article-wrapper {
    padding: 2rem 2rem 4rem;
  }

  .article-hero__meta {
    padding: 2rem 2rem 2.25rem;
  }
}


/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 768px)
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Nav */
  nav { padding: 0 1rem; }
  .nav-links    { display: none; }
  .nav-hamburger { display: flex; }
  .nav-drawer   { display: flex; }
  .nav-cta      { font-size: 0.68rem; padding: 0.45rem 0.75rem; letter-spacing: 0.02em; }
  .nav-actions  { gap: 0.4rem; }

  /* Pages with a currency selector in the nav (matcher.html) have one extra
     element competing for the same row. Drop the inline CTA button here —
     the hamburger drawer already has its own "Find My Destination" link —
     instead of trying to squeeze it in alongside the dropdown and Sign in. */
  .nav-actions:has(.nav-currency-select) .nav-cta { display: none; }

  /* Hero — text was position:absolute + bottom:0 inside a fixed-height
     box, so a long title/paragraph/tag-row combo overflowed above the
     top edge and got clipped. Fix: keep the text overlaid on the photo
     (matching desktop), but let the image/container grow to whatever
     height the text actually needs instead of a fixed height that
     clips it. Top padding keeps a strip of photo visible above the
     text instead of text starting flush at the top edge. */
  .article-hero {
    height: auto;
    min-height: var(--hero-height-md);
  }
  .article-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .article-hero__meta {
    position: relative;
    padding: 9rem 1.25rem 1.75rem;
    max-width: none;
  }

  /* Single-column layout: sidebar moves below content */
  .article-wrapper {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "sidebar";
    padding: 1.5rem 1.25rem 3.5rem;
    gap: 1.5rem;
  }

  /* Sidebar is no longer sticky on mobile */
  .article-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  /* Newsletter form stacks vertically */
  .article-newsletter__form {
    flex-direction: column;
  }
  .article-newsletter__btn {
    width: 100%;
  }
}


/* ═══════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .article-hero__meta {
    padding-top: 7rem;
  }

  .article-wrapper {
    padding: 1.25rem 1rem 3rem;
  }

  #visa-checker-zone {
    padding: 1.25rem 1.25rem 1.4rem;
  }

  .content-section__body {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}


/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ══ ITINERARY DUAL-CURRENCY BUDGET TABLE (fixed-width cols so USD/Local stay aligned even when local-currency numbers are long, e.g. JPY) ══ */
.itin-budget-fxnote { font-family:'Outfit',sans-serif; font-size:11px; color:var(--ink-muted); margin-bottom:10px; }
.itin-budget-table { border-radius:10px; overflow:hidden; border:1px solid rgba(0,0,0,0.06); background:#fff; }
.itin-budget-thead { display:flex; align-items:center; gap:14px; padding:10px 14px; background:#eceae6; }
.itin-budget-thead .bcol2-label { flex:1; font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:#6b7280; }
.itin-budget-thead .bcol2-usd { width:78px; flex-shrink:0; text-align:right; font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:#6b7280; }
.itin-budget-thead .bcol2-local { width:132px; flex-shrink:0; text-align:right; font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:#6b7280; }
.itin-budget-tr { display:flex; align-items:center; gap:14px; padding:10px 14px; border-top:1px solid rgba(0,0,0,0.06); }
.itin-budget-label { flex:1; font-family:'Outfit',sans-serif; font-size:13px; color:var(--ink-soft); }
.itin-budget-usd { width:78px; flex-shrink:0; text-align:right; font-family:'Outfit',sans-serif; font-size:13px; font-weight:600; color:var(--brand); white-space:nowrap; }
.itin-budget-local { width:132px; flex-shrink:0; text-align:right; font-family:'Outfit',sans-serif; font-size:13px; font-weight:600; color:var(--brand); white-space:nowrap; }
.itin-budget-est { display:inline-block; font-family:'Plus Jakarta Sans',sans-serif; font-size:8.5px; font-weight:700; color:#a16207; background:#fef3c7; border-radius:4px; padding:1px 5px; vertical-align:middle; }
.itin-budget-check { color:#16a34a; font-weight:700; }
.itin-budget-tr.is-optional .itin-budget-usd, .itin-budget-tr.is-optional .itin-budget-local { color:var(--ink-muted); font-weight:400; }
.itin-budget-tr.is-total { padding:12px 14px; border-top:1px solid rgba(0,0,0,0.08); background:#f4f3f0; }
.itin-budget-tr.is-total .itin-budget-label { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:#1a1a1a; }
.itin-budget-tr.is-total .itin-budget-usd, .itin-budget-tr.is-total .itin-budget-local { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; }
.itin-budget-tr.is-total-trip { background:#eef9fb; border-top:1px solid rgba(8,145,178,0.18); }
@media (max-width:380px) {
  .itin-budget-usd, .itin-budget-thead .bcol2-usd { width:64px; }
  .itin-budget-local, .itin-budget-thead .bcol2-local { width:110px; }
}

/* Mobile: label was being squeezed into ~100px next to two fixed-width
   number columns, causing long labels (e.g. "SITA bus day pass, Amalfi
   Coast") to wrap into a tall, narrow, unreadable stack. Instead, let the
   label take the full row and drop USD/Local onto their own line below,
   right-aligned. */
@media (max-width:600px) {
  .itin-budget-thead {
    display: none;
  }
  .itin-budget-tr {
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 3px;
  }
  .itin-budget-label {
    flex-basis: 100%;
  }
  .itin-budget-usd,
  .itin-budget-local {
    width: auto;
    flex: none;
    text-align: left;
  }
  .itin-budget-tr.is-total,
  .itin-budget-tr.is-total-trip {
    row-gap: 3px;
  }
}