/* ── HERO ─────────────────────────────── */
.hero {
  min-height: 100vh;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 7rem 2rem 5rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(61,107,61,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 30%, rgba(184,136,42,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 85% 20%, rgba(42,110,130,0.1) 0%, transparent 55%);
}

/* topographic lines */
.topo {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 38px,
    rgba(255,255,255,0.6) 38px,
    rgba(255,255,255,0.6) 39px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 38px,
    rgba(255,255,255,0.2) 38px,
    rgba(255,255,255,0.2) 39px
  );
}

.hero-content { position: relative; z-index: 2; max-width: 820px; }

.hero-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 1.5rem;
  animation: fadeUp 0.9s ease both;
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: 600;
  line-height: 0.95;
  color: #f0ebe0;
  margin-bottom: 0.5rem;
  animation: fadeUp 0.9s ease 0.1s both;
}

.hero-title em {
  font-style: italic;
  font-weight: 400;
  display: block;
  font-size: 0.55em;
  color: rgba(240,235,224,0.55);
  letter-spacing: 0.08em;
}

.hero-divider {
  width: 50px; height: 1px;
  background: var(--gold-lt);
  margin: 1.75rem auto;
  animation: fadeIn 1s ease 0.4s both;
}

.hero-body {
  font-size: 1.05rem;
  color: rgba(240,235,224,0.6);
  max-width: 520px;
  margin: 0 auto 3rem;
  line-height: 1.75;
  animation: fadeUp 0.9s ease 0.3s both;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 0.9s ease 0.45s both;
}

.btn-primary {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--gold-lt);
  color: var(--ink);
  padding: 0.85rem 2rem;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--gold); transform: translateY(-1px); }

.btn-ghost {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid rgba(240,235,224,0.2);
  color: rgba(240,235,224,0.6);
  padding: 0.85rem 2rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: rgba(240,235,224,0.6); color: rgba(240,235,224,0.95); }

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.5);
  animation: fadeIn 1.5s ease 1s both;
}
.hero-scroll::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(240,235,224,0.3), transparent);
  animation: scrollPulse 2s ease infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 0.9; transform: scaleY(1.1); }
}

/* ── STATS BAR ────────────────────────── */
.stats-bar {
  background: var(--ink-soft);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 1.5rem 2rem;
}

.stats-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}

@media (max-width: 600px) { .stats-inner { grid-template-columns: repeat(2,1fr); } }

.stat-item {}
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #f0ebe0;
  display: block;
  line-height: 1;
}
.stat-lbl {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.5);
  display: block;
  margin-top: 0.3rem;
}

/* ── FILTER BAR ──────────────────────── */
.filter-section {
  padding: 3.5rem 2rem 0;
  max-width: 1100px;
  margin: 0 auto;
}

.section-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #866118;
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 2rem;
}

.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.filter-btn {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
  border-radius: 1px;
  font-family: 'DM Sans', sans-serif;
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ── DESTINATION GRID ────────────────── */
.destinations-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
}

@media (max-width: 900px) { .destinations-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { .destinations-grid { grid-template-columns: 1fr; } }

.dest-card {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.25s;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.dest-card:hover { background: var(--cream); }
.dest-card[data-hidden="true"] { display: none; }

/* visual top – CSS illustrated header */
.card-visual {
  height: 200px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.card-visual-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease;
}
.dest-card:hover .card-visual-inner { transform: scale(1.04); }

/* Homepage cards: real itinerary photos (Southwest, California) */
.card-visual-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.2) 45%,
    transparent 72%
  );
  pointer-events: none;
}
.card-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* dolomites */
.visual-dolomites {
  background: linear-gradient(175deg, #0f1a0f 0%, #1a3020 40%, #2d4a2d 70%, #52875a 100%);
}
.visual-dolomites::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 160' preserveAspectRatio='none'%3E%3Cpath d='M0,160 L0,100 L60,80 L120,95 L180,55 L240,75 L300,30 L355,55 L400,15 L445,45 L500,25 L555,60 L610,35 L665,65 L720,40 L760,70 L800,50 L800,160Z' fill='rgba(20,40,20,0.8)'/%3E%3Cpath d='M0,160 L0,120 L80,105 L160,115 L230,90 L290,100 L350,75 L410,88 L470,68 L530,82 L590,65 L650,78 L710,62 L760,75 L800,65 L800,160Z' fill='rgba(30,55,30,0.6)'/%3E%3C/svg%3E") no-repeat bottom / cover;
}

/* okinawa */
.visual-okinawa {
  background: linear-gradient(175deg, #071520 0%, #0e2d40 35%, #1a5468 65%, #2a7a94 100%);
}
.visual-okinawa::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 120'%3E%3Cpath d='M-10,60 C100,20 200,100 320,50 C440,0 560,80 680,40 C740,20 770,50 810,35 L810,120 L-10,120Z' fill='rgba(255,255,255,0.05)'/%3E%3Cpath d='M-10,80 C80,50 200,110 320,70 C440,30 560,95 680,65 C740,50 770,75 810,60 L810,120 L-10,120Z' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E") no-repeat bottom / cover;
}
.visual-okinawa::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30px;
  background: linear-gradient(to top, rgba(42,122,148,0.4), transparent);
}

/* china */
.visual-china {
  background: linear-gradient(175deg, #1a0505 0%, #3a0e0e 35%, #6b1a1a 65%, #8b2a2a 100%);
}
.visual-china::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 140' preserveAspectRatio='none'%3E%3Cpath d='M0,140 L0,90 L40,85 L80,75 L90,60 L110,65 L130,45 L155,50 L175,30 L195,38 L220,55 L250,40 L280,60 L320,50 L360,38 L400,55 L440,42 L480,60 L520,48 L560,65 L600,50 L640,70 L680,55 L720,75 L760,60 L800,75 L800,140Z' fill='rgba(60,10,10,0.85)'/%3E%3Cpath d='M0,140 L0,110 L100,100 L200,108 L300,95 L400,103 L500,92 L600,100 L700,90 L800,98 L800,140Z' fill='rgba(40,5,5,0.7)'/%3E%3C/svg%3E") no-repeat bottom / cover;
}

.card-country {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-family: 'DM Sans', sans-serif;
}

.card-badge {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.7);
  padding: 0.25rem 0.6rem;
  backdrop-filter: blur(4px);
}

.card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.card-region {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
}

.card-desc {
  font-size: 0.875rem;
  color: #4a4540;
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1.5rem;
}

.card-meta {
  display: flex;
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-lt);
}

.card-meta-item {}
.card-meta-label {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.15rem;
}
.card-meta-value {
  font-size: 0.8rem;
  color: var(--ink);
  font-weight: 500;
}

.card-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #866118;
  font-weight: 500;
  margin-top: 1.25rem;
  transition: gap 0.2s;
}
.dest-card:hover .card-cta { gap: 0.75rem; }
.card-cta::after { content: '→'; }

/* ── EDITORIAL STRIP ──────────────────── */
.editorial-strip {
  background: var(--ink);
  padding: 5rem 2rem;
  text-align: center;
}

.editorial-inner {
  max-width: 700px;
  margin: 0 auto;
}

.editorial-strip .section-eyebrow { color: var(--gold-lt); }

.editorial-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  font-style: italic;
  color: #f0ebe0;
  margin: 0.75rem 0 1.25rem;
  line-height: 1.2;
}

.editorial-body {
  font-size: 0.92rem;
  color: rgba(240,235,224,0.6);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.06);
  margin-top: 3rem;
  text-align: left;
}
@media(max-width:600px){ .pillars { grid-template-columns: 1fr; } }

.pillar {
  background: var(--ink);
  padding: 2rem 1.5rem;
}

.pillar h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 400;
  color: #f0ebe0;
  margin-bottom: 0.5rem;
}

.pillar p {
  font-size: 0.8rem;
  color: rgba(240,235,224,0.6);
  line-height: 1.6;
}

/* ── COMING SOON ─────────────────────── */
.coming-section {
  padding: 4rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.coming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  margin-top: 2rem;
}

.coming-card {
  background: var(--paper);
  padding: 1.5rem;
  opacity: 0.55;
}
.coming-card:hover { opacity: 0.75; background: var(--warm); }

.coming-flag {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
  display: block;
}

.coming-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.coming-region {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.coming-tag {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--warm);
  border: 1px solid var(--border);
  padding: 0.15rem 0.5rem;
  display: inline-block;
}

@media (max-width: 560px) {
  .card-meta-label { font-size: 0.65rem; }
}