/*
 * BEAST OF AFRICA — cpt-display.css v2
 * Shared styles: CPT archive + single templates
 * Fixed: hero bg visibility, button widths, veil selectors, main padding
 */

/* ═══════════════════════════════════════════
   0. ATOMS
═══════════════════════════════════════════ */

.cpt-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .8;
  margin-bottom: .8rem;
}

.cpt-h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem,3.5vw,3rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: .85rem;
}
.cpt-h2 em { font-style: italic; color: var(--sand); }

/* ── Buttons ─────────────────────────────── */
.cpt-btn {
  display: inline-flex;        /* NOT block — prevents full-width stretch */
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 9px;
  padding: .82rem 1.65rem;
  border: none;
  cursor: pointer;
  transition: all .32s var(--ease);
  white-space: nowrap;
  width: auto;                 /* explicit — never inherit 100% */
}
.cpt-btn--primary {
  background: linear-gradient(135deg,var(--forest),var(--deep-forest));
  color: var(--sand);
  border: 1px solid rgba(200,178,138,.28);
}
.cpt-btn--primary:hover {
  border-color: rgba(200,178,138,.55);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(23,53,44,.5);
  color: var(--mist);
}
.cpt-btn--ghost {
  background: transparent;
  border: 1px solid rgba(200,178,138,.26);
  color: rgba(200,178,138,.78);
}
.cpt-btn--ghost:hover { background: rgba(23,53,44,.38); color: var(--sand); }
.cpt-btn--wa {
  background: rgba(37,211,102,.1);
  border: 1px solid rgba(37,211,102,.26);
  color: rgba(37,211,102,.88);
}
.cpt-btn--wa:hover { background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.45); }
.cpt-btn--lg   { padding: 1rem 2.1rem; font-size: .8rem; }
/* --full is OPT-IN only — use explicitly on specific buttons */
.cpt-btn--full { width: 100% !important; justify-content: center; }

/* ── Shared utilities ────────────────────── */
.cpt-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .9rem;
  border-radius: 999px;
  background: rgba(8,14,12,.72);
  border: 1px solid rgba(200,178,138,.18);
  font-family: var(--font-body);
  font-size: .72rem;
  color: rgba(238,245,242,.7);
}

.glass-deep {
  background: rgba(8,14,12,.92);
  border: 1px solid rgba(200,178,138,.13);
  border-radius: 16px;
}
@media (min-width:1024px) and (hover:hover) {
  .glass-deep {
    background: rgba(8,14,12,.78);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
  }
}

.animate {
  opacity: 0;
  transform: translate3d(0,22px,0);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.animate.visible { opacity: 1; transform: translate3d(0,0,0); }
.animate[style*="--delay"] { transition-delay: var(--delay,0s); }

/* ═══════════════════════════════════════════
   1. CINEMATIC INNER HERO
═══════════════════════════════════════════ */

.cpt-hero {
  position: relative;
  /* Height minus fixed header so it fills the viewport correctly */
  height: calc(100vh - var(--hdr-total, 100px));
  min-height: 520px;
  max-height: 820px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.cpt-hero--single {
  max-height: 920px;
  height: calc(100vh - var(--hdr-total, 100px));
}

/* ── Background image ── */
.cpt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;                  /* below veils + content */
  background-size: cover;
  background-position: center 30%;
  filter: brightness(.5) saturate(.9);
  transform: scale(1.03);
  transition: transform 10s ease;
  will-change: transform;
}
.cpt-hero--single .cpt-hero__bg {
  animation: cptKenBurns 14s ease-out forwards;
}
@keyframes cptKenBurns {
  from { transform: scale(1.07) translateY(0); }
  to   { transform: scale(1)    translateY(-1%); }
}

/* ── Veil layers ── */
/* Use explicit class selectors — never :first-of-type (fragile) */
.cpt-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* base veil */
  background: linear-gradient(
    180deg,
    rgba(8,14,12,.18) 0%,
    rgba(8,14,12,.72) 100%
  );
}
.cpt-hero__veil--left {
  background: linear-gradient(
    90deg,
    rgba(8,14,12,.88) 0%,
    rgba(8,14,12,.32) 52%,
    transparent       100%
  );
}
.cpt-hero__veil--bottom {
  background: linear-gradient(
    180deg,
    transparent        42%,
    rgba(8,14,12,.98)  100%
  );
}

/* ── Hero content ── */
.cpt-hero__content {
  position: relative;
  z-index: 3;
  max-width: var(--contain);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem,6vw,5.5rem);
  animation: cptHeroIn .9s var(--ease) .08s both;
}
@keyframes cptHeroIn {
  from { opacity: 0; transform: translateY(22px); }
}

/* Breadcrumb */
.cpt-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .7rem;
  color: rgba(238,245,242,.38);
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.cpt-breadcrumb a            { color: rgba(238,245,242,.5); text-decoration: none; transition: color .3s; }
.cpt-breadcrumb a:hover      { color: var(--sand); }
.cpt-breadcrumb [aria-hidden]{ color: rgba(200,178,138,.3); }
.cpt-breadcrumb [aria-current]{ color: rgba(200,178,138,.65); }

/* Live badge */
.cpt-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .95rem;
  background: rgba(23,53,44,.62);
  border: 1px solid rgba(200,178,138,.16);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(200,178,138,.78);
  margin-bottom: 1.1rem;
}
.cpt-hero__badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(55,200,120,.9);
  flex-shrink: 0;
  animation: cptDotPulse 2s ease-in-out infinite;
}
@keyframes cptDotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.15; transform:scale(.5); }
}

/* Title */
.cpt-hero__title {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.1rem;
}
.cpt-hero__t1 {
  font-family: var(--font-serif);
  font-size: clamp(3rem,7vw,6rem);
  font-weight: 300;
  line-height: .93;
  letter-spacing: -.03em;
  background: linear-gradient(150deg,#fff 0%,var(--mist) 40%,var(--sand) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cpt-hero__t2 {
  font-family: var(--font-serif);
  font-size: clamp(1rem,2.2vw,1.6rem);
  color: rgba(220,230,227,.55);
  -webkit-text-fill-color: rgba(220,230,227,.55);
  font-weight: 300;
  margin-top: .28rem;
  background: none;
}

.cpt-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(.84rem,1.4vw,.98rem);
  color: rgba(220,230,227,.5);
  line-height: 1.84;
  max-width: 560px;
  margin-bottom: 1.8rem;
}

.cpt-hero__chips {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Hero action buttons — inline-flex row, NOT full-width */
.cpt-hero__actions {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
/* Explicitly reset any accidental width on buttons inside hero */
.cpt-hero__actions .cpt-btn {
  width: auto !important;
}

/* ═══════════════════════════════════════════
   2. DESTINATION ARCHIVE
═══════════════════════════════════════════ */

.dest-archive {
  background: var(--surface);
  padding: clamp(3.5rem,7vw,6rem) 0;
}
.dest-archive__inner {
  max-width: var(--contain);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Country filter tabs */
.dest-filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.dest-filter {
  padding: .42rem 1.1rem;
  border: 1px solid rgba(200,178,138,.14);
  border-radius: 24px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .76rem;
  cursor: pointer;
  transition: all .28s;
  white-space: nowrap;
}
.dest-filter:hover  { border-color: rgba(200,178,138,.3); color: var(--text); }
.dest-filter.active {
  background: rgba(23,53,44,.5);
  border-color: rgba(200,178,138,.44);
  color: var(--sand);
}

/* ── Grid ── */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.2rem;
}

/* Featured: first card spans full width, horizontal layout */
.dest-card--featured {
  grid-column: 1 / -1;
  min-height: 420px;
}
.dest-card--featured .dest-card__title a {
  font-size: clamp(1.5rem,3vw,2.2rem);
}

/* ── Card ── */
.dest-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(200,178,138,.1);
  min-height: 380px;
  display: block;                        /* block, not flex — avoids stretch issues */
  transition: transform .4s var(--ease), box-shadow .4s, border-color .35s;
}
.dest-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 64px rgba(0,0,0,.55);
  border-color: rgba(200,178,138,.24);
}

/* Image wrapper fills card */
.dest-card__img-wrap {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
.dest-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.46) saturate(.88);
  transition: filter .65s, transform .75s var(--ease);
}
.dest-card:hover .dest-card__img {
  filter: brightness(.58) saturate(1.05);
  transform: scale(1.05);
}

/* Gradient overlay — sits above image, below content */
.dest-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent      18%,
    rgba(8,14,12,.98) 100%
  );
  pointer-events: none;
}

/* Country badge — top-left */
.dest-card__country {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  padding: .26rem .72rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: rgba(8,14,12,.82);
  border: 1px solid rgba(200,178,138,.22);
  color: var(--sand);
  text-transform: uppercase;
}

/* Card body — pinned to bottom */
.dest-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.dest-card__eyebrow {
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(200,178,138,.5);
}
.dest-card__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--mist);
  font-weight: 300;
  line-height: 1.08;
  margin: 0;
}
.dest-card__title a  { color: inherit; text-decoration: none; }
.dest-card:hover .dest-card__title a { color: #fff; }
.dest-card__excerpt p {
  font-family: var(--font-body);
  font-size: .82rem;
  color: rgba(220,230,227,.52);
  line-height: 1.65;
  margin: 0;
}
.dest-card__meta {
  display: flex;
  gap: .75rem;
  align-items: center;
  font-family: var(--font-body);
  font-size: .74rem;
  color: rgba(238,245,242,.42);
  flex-wrap: wrap;
}
.dest-card__price strong { color: rgba(200,178,138,.85); font-weight: 600; }

/* Card actions — inline buttons, never full-width here */
.dest-card__actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: .2rem;
}
.dest-card__actions .cpt-btn {
  width: auto !important;      /* hard guard */
}

/* Empty state */
.dest-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 0;
  color: var(--muted);
}
.dest-empty a { color: var(--sand); text-decoration: underline; }

/* ═══════════════════════════════════════════
   3. ARCHIVE BOTTOM CTA STRIP
═══════════════════════════════════════════ */

.dest-cta-strip {
  background: var(--surface-2);
  border-top: 1px solid rgba(200,178,138,.07);
  padding: clamp(3.5rem,7vw,6rem) 0;
}
.dest-cta-strip__inner {
  max-width: var(--contain);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.dest-cta-strip__copy { flex: 1; min-width: 280px; }
.dest-cta-strip__copy p { font-size: .9rem; color: var(--muted); line-height: 1.7; margin: 0; }
.dest-cta-strip__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.dest-cta-strip__actions .cpt-btn { width: auto !important; }

/* ═══════════════════════════════════════════
   4. SINGLE DESTINATION LAYOUT
═══════════════════════════════════════════ */

.dest-single {
  background: var(--surface);
  padding: clamp(3.5rem,7vw,6rem) 0;
}
.dest-single__inner {
  max-width: var(--contain);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(2.5rem,5vw,4.5rem);
  align-items: start;
}

.dest-single__main { display: flex; flex-direction: column; gap: 2.5rem; }

/* Highlights */
.dest-highlights__list {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .65rem;
}
.dest-highlights__list li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem 1rem; border-radius: 999px;
  background: rgba(23,53,44,.3); border: 1px solid rgba(200,178,138,.12);
  font-family: var(--font-body); font-size: .78rem; color: rgba(238,245,242,.72);
}
.dest-highlights__list li svg { color: var(--sand); flex-shrink: 0; }

/* Main content */
.dest-content { font-family: var(--font-body); color: var(--muted); line-height: 1.88; font-size: .95rem; }
.dest-content h2, .dest-content h3 { font-family: var(--font-serif); color: var(--text); font-weight: 300; margin: 2rem 0 .8rem; }
.dest-content h2 { font-size: clamp(1.5rem,2.5vw,2rem); }
.dest-content h3 { font-size: clamp(1.2rem,2vw,1.5rem); }
.dest-content p  { margin-bottom: 1.1rem; }
.dest-content a  { color: var(--sand); text-decoration: underline; }
.dest-content ul, .dest-content ol { padding-left: 1.4rem; margin-bottom: 1.1rem; }
.dest-content li { margin-bottom: .4rem; }
.dest-content img { width:100%; height:auto; border-radius:14px; margin:1.5rem 0; filter:brightness(.9) saturate(.9); }
.dest-content strong { color: var(--text); }
.dest-content blockquote { border-left:2px solid rgba(200,178,138,.4); padding-left:1.25rem; color:rgba(238,245,242,.6); font-style:italic; font-family:var(--font-serif); font-size:1.05rem; margin:1.5rem 0; }

/* Gallery */
.dest-gallery__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; margin-top:.85rem; }
.dest-gallery__item { border-radius:10px; overflow:hidden; }
.dest-gallery__img  { width:100%; aspect-ratio:4/3; object-fit:cover; filter:brightness(.8) saturate(.85); transition:filter .5s,transform .55s var(--ease); display:block; }
.dest-gallery__item:hover .dest-gallery__img { filter:brightness(.95) saturate(1); transform:scale(1.04); }

/* ── Sidebar ── */
.dest-single__sidebar { display:flex; flex-direction:column; gap:1.25rem; position:sticky; top:calc(var(--hdr-total,100px) + 1.5rem); }

.dest-sidebar-card { padding:1.75rem 1.6rem; display:flex; flex-direction:column; gap:.85rem; }
.dest-sidebar-card .cpt-btn { /* full-width only inside sidebar */ width:100% !important; justify-content:center; }
.dest-sidebar-card__title { font-family:var(--font-serif); font-size:1.2rem; color:var(--mist); font-weight:400; margin:0; }
.dest-sidebar-card__price { display:flex; align-items:baseline; gap:.45rem; font-family:var(--font-body); font-size:.82rem; color:var(--muted); }
.dest-sidebar-card__price strong { font-family:var(--font-serif); font-size:1.65rem; color:var(--sand); font-weight:300; }
.dest-sidebar-card__facts { list-style:none; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.dest-sidebar-card__facts li { display:flex; align-items:center; gap:.6rem; font-family:var(--font-body); font-size:.82rem; color:var(--muted); }
.dest-sidebar-card__facts li svg { color:var(--sand); flex-shrink:0; }
.dest-sidebar-card__facts li strong { color:var(--text); }

/* Weather widget */
.dest-wx-display { display:flex; align-items:center; gap:.75rem; }
.dest-wx-icon   { font-size:1.5rem; }
.dest-wx-temp   { display:block; font-family:var(--font-serif); font-size:1.6rem; color:var(--sand); font-weight:300; line-height:1; }
.dest-wx-cond   { font-size:.76rem; color:var(--muted); }
.dest-wx-row    { display:flex; gap:1rem; font-size:.76rem; color:rgba(238,245,242,.42); }

/* Related */
.dest-related__list { display:flex; flex-direction:column; gap:.6rem; margin-top:.65rem; }
.dest-related__item { display:flex; gap:.85rem; align-items:center; padding:.7rem .8rem; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid rgba(200,178,138,.07); text-decoration:none; transition:background .3s,border-color .3s; }
.dest-related__item:hover { background:rgba(23,53,44,.3); border-color:rgba(200,178,138,.18); }
.dest-related__img   { width:52px; height:52px; border-radius:9px; background-size:cover; background-position:center; filter:brightness(.72) saturate(.88); flex-shrink:0; }
.dest-related__copy strong { display:block; font-family:var(--font-body); font-size:.84rem; color:var(--text); }
.dest-related__copy span   { font-size:.74rem; color:var(--sand); }

/* ═══════════════════════════════════════════
   5. RESPONSIVE
═══════════════════════════════════════════ */

@media (max-width:1100px) {
  .dest-grid { grid-template-columns:repeat(2,1fr); }
  .dest-single__inner { grid-template-columns:1fr 300px; }
}
@media (max-width:900px) {
  .dest-single__inner { grid-template-columns:1fr; }
  .dest-single__sidebar { position:static; flex-direction:row; flex-wrap:wrap; }
  .dest-sidebar-card { flex:1; min-width:260px; }
  .dest-gallery__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .dest-grid { grid-template-columns:1fr; }
  .dest-card--featured { grid-column:auto; }
  .dest-cta-strip__inner { flex-direction:column; align-items:flex-start; }
  .cpt-hero { height:clamp(480px,80vh,700px); }
}
@media (max-width:480px) {
  .cpt-hero__t1 { font-size:clamp(2.4rem,12vw,3.8rem); }
  .cpt-hero__actions { flex-direction:column; align-items:flex-start; }
  .dest-gallery__grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════
   6. MOTION SAFETY
═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  .animate,
  .cpt-hero__bg,
  .dest-card__img,
  .dest-gallery__img {
    animation:none !important;
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* ═══════════════════════════════════════════
   7. MAIN PADDING OVERRIDE
   style.css adds padding-top to <main> for the
   fixed header. CPT pages use a cinematic hero
   that must sit flush — zero that padding and
   let the hero itself provide the offset.
═══════════════════════════════════════════ */

/* ── CPT page main padding reset ──────────────────────
   Beats both:
     main { padding-top: var(--hdr-total) }          (element selector)
     main#site-main { padding-top: var(--hdr-total) } (ID selector)
   by combining body class + ID + !important
─────────────────────────────────────────────────── */
body.post-type-archive-destination #site-main,
body.post-type-archive-lodge       #site-main,
body.post-type-archive-itinerary   #site-main,
body.post-type-archive-safari      #site-main,
body.post-type-archive-experience  #site-main,
body.single-destination            #site-main,
body.single-lodge                  #site-main,
body.single-itinerary              #site-main,
body.single-safari                 #site-main,
body.single-experience             #site-main,
/* Fallback for themes that use <main> without id */
body.post-type-archive-destination main,
body.post-type-archive-lodge       main,
body.post-type-archive-itinerary   main,
body.post-type-archive-safari      main,
body.post-type-archive-experience  main,
body.single-destination            main,
body.single-lodge                  main,
body.single-itinerary              main,
body.single-safari                 main,
body.single-experience             main {
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════
   6. ITINERARY ARCHIVE CARDS
═══════════════════════════════════════════ */

.cpt-archive {
  background: var(--surface);
  border-top: 1px solid rgba(200,178,138,.07);
  padding: clamp(3.5rem,7vw,6rem) 0;
}
.cpt-archive__inner {
  max-width: var(--contain);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.cpt-filters--secondary {
  margin-top: -.75rem;
  margin-bottom: 2rem;
}

.itin-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.2rem;
}

.itin-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(200,178,138,.1);
  min-height: 420px;
  display: block;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .35s;
}
.itin-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 64px rgba(0,0,0,.55);
  border-color: rgba(200,178,138,.24);
}

.itin-card__img-wrap { position: absolute; inset: 0; display: block; }
.itin-card__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.62) saturate(.92);
  transition: filter .65s, transform .75s var(--ease);
}
.itin-card:hover .itin-card__img { filter: brightness(.78) saturate(1.05); transform: scale(1.05); }

.itin-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 15%, rgba(8,14,12,.97) 100%);
}

.itin-card__badges {
  position: absolute; top: 1rem; left: 1rem;
  display: flex; gap: .4rem; z-index: 3;
}
.itin-card__days {
  padding: .28rem .72rem; border-radius: 6px;
  font-family: var(--font-body); font-size: .62rem; font-weight: 700;
  background: rgba(8,14,12,.85); border: 1px solid rgba(200,178,138,.22);
  color: var(--sand);
}
.itin-card__type {
  padding: .28rem .72rem; border-radius: 6px;
  font-family: var(--font-body); font-size: .6rem; font-weight: 600;
  background: rgba(200,178,138,.88); color: var(--surface);
}

.itin-card__body {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2; padding: 1.5rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.itin-card__tagline {
  font-family: var(--font-body); font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(200,178,138,.52);
}
.itin-card__title {
  font-family: var(--font-serif); font-size: 1.35rem;
  color: var(--mist); font-weight: 300; line-height: 1.1; margin: 0;
}
.itin-card__title a { color: inherit; text-decoration: none; }
.itin-card:hover .itin-card__title a { color: #fff; }
.itin-card__excerpt { font-size: .8rem; color: rgba(220,230,227,.52); line-height: 1.6; margin: 0; }
.itin-card__dests, .itin-card__season {
  display: flex; align-items: center; gap: .35rem;
  font-size: .74rem; color: rgba(238,245,242,.42); margin: 0;
}
.itin-card__dests svg, .itin-card__season svg { color: var(--sand); flex-shrink: 0; }

.itin-card__pricing {
  display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0;
}
.itin-card__price-tier {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .35rem .6rem; border-radius: 7px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(200,178,138,.1);
}
.itin-card__price-tier span { font-size: .58rem; color: rgba(238,245,242,.38); text-transform: uppercase; letter-spacing: .1em; }
.itin-card__price-tier strong { font-family: var(--font-serif); font-size: .98rem; color: var(--sand); font-weight: 300; }

.itin-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.itin-card__actions .cpt-btn { width: auto !important; }

/* Itinerary pricing tiers (single page) */
.itin-pricing { display: flex; flex-direction: column; gap: .85rem; }
.itin-pricing__note { font-size: .8rem; color: var(--muted); font-style: italic; margin: 0; }
.itin-pricing__tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: .85rem; margin-top: .25rem; }
.itin-pricing__tier {
  padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; min-height: 220px;
}
.itin-pricing__label {
  font-family: var(--font-body); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .18em; font-weight: 700;
}
.itin-pricing__price {
  font-family: var(--font-serif); font-size: 2rem; font-weight: 300; line-height: 1; color: var(--sand);
}
.itin-pricing__desc { font-size: .8rem; color: var(--muted); line-height: 1.6; flex-grow: 1; }

/* ═══════════════════════════════════════════
   7. LODGE ARCHIVE CARDS
═══════════════════════════════════════════ */

.lodge-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.2rem;
}

.lodge-card {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(200,178,138,.1); min-height: 400px; display: block;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .35s;
}
.lodge-card:hover {
  transform: translateY(-8px); box-shadow: 0 28px 64px rgba(0,0,0,.55);
  border-color: rgba(200,178,138,.24);
}
.lodge-card__img-wrap { position: absolute; inset: 0; display: block; }
.lodge-card__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: brightness(.62) saturate(.92);
  transition: filter .65s, transform .75s var(--ease);
}
.lodge-card:hover .lodge-card__img { filter: brightness(.78) saturate(1.05); transform: scale(1.05); }
.lodge-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 18%, rgba(8,14,12,.97) 100%);
}

.lodge-card__tier {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  padding: .28rem .78rem; border-radius: 6px;
  font-family: var(--font-body); font-size: .6rem; font-weight: 700;
  background: rgba(8,14,12,.85);
  border: 1px solid var(--tier-color, rgba(200,178,138,.35));
  color: var(--tier-color, var(--sand));
}
.lodge-card__country {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  padding: .22rem .65rem; border-radius: 5px;
  font-family: var(--font-body); font-size: .6rem;
  background: rgba(200,178,138,.88); color: var(--surface); font-weight: 600;
}

.lodge-card__body {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2; padding: 1.5rem;
  display: flex; flex-direction: column; gap: .42rem;
}
.lodge-card__dest {
  display: flex; align-items: center; gap: .35rem;
  font-size: .7rem; color: rgba(200,178,138,.52);
}
.lodge-card__dest svg { flex-shrink: 0; }
.lodge-card__title {
  font-family: var(--font-serif); font-size: 1.35rem; color: var(--mist);
  font-weight: 300; line-height: 1.08; margin: 0;
}
.lodge-card__title a { color: inherit; text-decoration: none; }
.lodge-card:hover .lodge-card__title a { color: #fff; }
.lodge-card__excerpt { font-size: .8rem; color: rgba(220,230,227,.52); line-height: 1.6; margin: 0; }
.lodge-card__price {
  display: flex; align-items: baseline; gap: .35rem;
  font-family: var(--font-body); font-size: .74rem; color: rgba(238,245,242,.4);
}
.lodge-card__price strong { font-family: var(--font-serif); font-size: 1.15rem; color: var(--sand); font-weight: 300; }
.lodge-card__best-for {
  display: flex; align-items: center; gap: .35rem;
  font-size: .74rem; color: rgba(238,245,242,.38); margin: 0;
}
.lodge-card__best-for svg { color: var(--sand); flex-shrink: 0; }
.lodge-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.lodge-card__actions .cpt-btn { width: auto !important; }

/* ═══════════════════════════════════════════
   8. EXPERIENCE ARCHIVE CARDS
═══════════════════════════════════════════ */

.exp-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
}

.exp-card {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(200,178,138,.1); min-height: 360px; display: block;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .35s;
}
.exp-card:hover {
  transform: translateY(-6px); box-shadow: 0 22px 52px rgba(0,0,0,.5);
  border-color: rgba(200,178,138,.22);
}
.exp-card__img-wrap { position: absolute; inset: 0; display: block; }
.exp-card__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: brightness(.62) saturate(.92);
  transition: filter .65s, transform .75s var(--ease);
}
.exp-card:hover .exp-card__img { filter: brightness(.78) saturate(1.05); transform: scale(1.05); }
.exp-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 22%, rgba(8,14,12,.97) 100%);
}

.exp-card__meta-top {
  position: absolute; top: 1rem; left: 1rem; right: 1rem; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.exp-card__type {
  padding: .26rem .72rem; border-radius: 6px;
  font-family: var(--font-body); font-size: .62rem; font-weight: 700;
  background: rgba(8,14,12,.85); border: 1px solid rgba(200,178,138,.2); color: var(--sand);
}
.exp-card__location {
  padding: .26rem .65rem; border-radius: 6px;
  font-family: var(--font-body); font-size: .6rem; font-weight: 600;
  background: rgba(200,178,138,.85); color: var(--surface);
}

.exp-card__body {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .38rem;
}
.exp-card__title {
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--mist);
  font-weight: 300; line-height: 1.1; margin: 0;
}
.exp-card__title a { color: inherit; text-decoration: none; }
.exp-card:hover .exp-card__title a { color: #fff; }
.exp-card__excerpt { font-size: .78rem; color: rgba(220,230,227,.5); line-height: 1.55; margin: 0; }
.exp-card__facts {
  display: flex; gap: .65rem; flex-wrap: wrap;
  font-family: var(--font-body); font-size: .72rem; color: rgba(238,245,242,.42);
  align-items: center;
}
.exp-card__facts svg { color: var(--sand); }
.exp-card__actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .2rem; }
.exp-card__actions .cpt-btn { width: auto !important; }

/* Experience map */
.exp-map-wrap { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════
   9. RESPONSIVE — new grids
═══════════════════════════════════════════ */

@media (max-width:1200px) {
  .itin-grid, .lodge-grid { grid-template-columns: repeat(2,1fr); }
  .exp-grid { grid-template-columns: repeat(3,1fr); }
  .itin-pricing__tiers { grid-template-columns: 1fr; }
}
@media (max-width:900px) {
  .exp-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:768px) {
  .itin-grid, .lodge-grid { grid-template-columns: 1fr; }
  .itin-pricing__tiers { grid-template-columns: 1fr; }
}
@media (max-width:560px) {
  .exp-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   10. PAGE SLUG CONFLICT FIX
   If a static PAGE exists with the same slug as a CPT archive
   (e.g. page slug 'itineraries' vs CPT archive slug 'itineraries'),
   WordPress serves the PAGE not the CPT archive.
   
   FIX: Go to WP Admin → Pages and DELETE these pages:
   - "Itineraries" (slug: itineraries)
   - "Lodges"      (slug: lodges)
   - "Experiences" (slug: experiences)
   
   The CPT archive templates handle those URLs automatically.
   The ONLY page you need to keep is "Destinations" if you're
   using it as a menu link — but even that should be deleted
   and the menu link pointed directly at the CPT archive URL.
   
   AFTER deleting the pages:
   WP Admin → Settings → Permalinks → Save Changes (flush rewrite)
═══════════════════════════════════════════ */
/* ── Phase 1/2 grammar — applies across ALL CPT archives & singles ── */
@keyframes hpTitleShimmer{to{background-position:220% center}}
.cpt-h2 em,.cpt-hero__t2{font-style:italic;background:linear-gradient(92deg,#c8b28a,#d4c09e 40%,rgba(236,245,242,.9) 70%,#c8b28a);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hpTitleShimmer 7s linear infinite}
.cpt-btn--gold{background:linear-gradient(135deg,#c8b28a,#d4c09e);color:#10201a;border-color:transparent;box-shadow:0 8px 24px rgba(200,178,138,.2)}
.cpt-btn--gold:hover{box-shadow:0 14px 36px rgba(200,178,138,.32);transform:translateY(-2px);color:#0c1813}
.cpt-btn--sm{padding:.5rem 1.05rem;font-size:.68rem}
@media(prefers-reduced-motion:reduce){.cpt-h2 em,.cpt-hero__t2{animation:none!important}}