/*
  Rabbit Hole trip pages (interest-led journeys).

  Loaded ONLY by Rabbit Hole pages (e.g. bali-ocean.html). Off Script /
  destination-led trip pages do not link this file, so nothing here can
  change them. Every selector is prefixed `rh-` to avoid collisions.

  A page opts in with two classes on its wrapper:
    <div class="rh rh--ocean">   (or rh--sound, rh--table, rh--wild, rh--made, rh--move)

  The modifier only swaps the accent tokens below. Typography, buttons,
  navigation and footer stay exactly as on every other Voyagio trip page.
  Relies on the page's own tokens: --ink, --cream, --lilac, --lilac-ink,
  --rule, --muted, --body, --font-heading, --font-body.
*/

/* ---------- Accent per Rabbit Hole (one subtle accent each) ---------- */
.rh{
  --rh-accent:#6F58C4;          /* text, rules, markers on light grounds */
  --rh-accent-soft:#F3EFFF;     /* tinted fills */
  --rh-accent-on-dark:#CCB9FF;  /* text/markers on the ink hero */
}
.rh--ocean{--rh-accent:#2C6E73;--rh-accent-soft:#E8F2F0;--rh-accent-on-dark:#A9D8D1}
/* Proposed accents for future Rabbit Holes, not yet used on a page. */
.rh--sound{--rh-accent:#7A4E9E;--rh-accent-soft:#F2ECF7;--rh-accent-on-dark:#D3BCE8}
.rh--table{--rh-accent:#A0522D;--rh-accent-soft:#F7EDE7;--rh-accent-on-dark:#EBC0A6}
.rh--wild{--rh-accent:#4F6B3A;--rh-accent-soft:#EEF2EA;--rh-accent-on-dark:#C2D6AF}
.rh--made{--rh-accent:#8C6A2F;--rh-accent-soft:#F5F0E6;--rh-accent-on-dark:#E3CC9C}
.rh--move{--rh-accent:#A3443C;--rh-accent-soft:#F7EAE8;--rh-accent-on-dark:#EDB5AE}

/* ---------- Shared bits ---------- */
.rh-wrap{max-width:1480px;margin:0 auto;padding-left:clamp(24px,5vw,84px);padding-right:clamp(24px,5vw,84px)}
.rh-section{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
.rh-section + .rh-section{padding-top:0}
.rh-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-family:var(--font-heading);font-weight:600;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--rh-accent)}
.rh-h2{margin:0 0 22px;font-family:var(--font-heading);font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:0.01em;max-width:22ch}
.rh-copy{display:flex;flex-direction:column;gap:14px;max-width:58ch;font-size:clamp(15px,1.1vw,17px);line-height:1.85;color:var(--body)}
.rh-copy p{margin:0}
.rh-copy .rh-strong{color:var(--ink);font-family:var(--font-heading);font-weight:600;font-size:clamp(16px,1.25vw,19px);line-height:1.6}

/* ---------- Hero: the interest is the protagonist, the place is the setting ---------- */
.rh-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--cream)}
.rh-hero__media{position:absolute;inset:0}
.rh-hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(40,38,63,0.55) 0%,rgba(40,38,63,0.78) 55%,rgba(40,38,63,0.95) 100%)}
.rh-hero__in{position:relative;min-height:clamp(600px,88vh,880px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(40px,6vw,84px)}
.rh-hero__crumb{position:absolute;top:clamp(18px,2.4vw,28px);margin:0;font-size:12px;letter-spacing:0.06em;color:#CFCBD8}
.rh-hero__crumb a{color:#CFCBD8}
.rh-hero__crumb a:hover{color:var(--lilac)}
.rh-hero .rh-eyebrow{color:var(--rh-accent-on-dark)}
.rh-hero__title{margin:0 0 18px;font-family:var(--font-heading);font-weight:600;font-size:clamp(40px,7vw,96px);line-height:0.96;letter-spacing:0.005em;max-width:11ch;color:var(--cream)}
.rh-hero__lede{margin:0 0 22px;font-size:clamp(16px,1.4vw,20px);line-height:1.7;color:#E7E3EE;max-width:40ch}
.rh-hero__setting{margin:0 0 24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-family:var(--font-body);font-style:italic;font-size:clamp(14px,1.1vw,16px);line-height:1.6;color:#CFCBD8}
.rh-hero__setting span{font-family:var(--font-heading);font-style:normal;font-weight:600;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:#8B86A0}
.rh-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(26px,3vw,36px);padding:9px 16px;border-radius:999px;border:1px solid var(--rh-accent-on-dark);font-family:var(--font-heading);font-weight:600;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--cream)}
.rh-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rh-accent-on-dark)}
.rh-hero__ctas{display:flex;flex-wrap:wrap;gap:14px}
@media (min-width:900px){
  /* Keep the subject of the photo visible: the image sits right of the copy. */
  .rh-hero__media{left:34%}
  .rh-hero__shade{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 34%,rgba(40,38,63,0.55) 52%,rgba(40,38,63,0.08) 78%,rgba(40,38,63,0.2) 100%)}
}

/* ---------- Quick facts (same component as other trip pages, accent labels) ---------- */
.rh-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px 32px;padding:clamp(26px,3.2vw,38px) 0;border-bottom:1px solid var(--rule)}
.rh-facts p{margin:0}
.rh-facts .rh-facts__k{margin:0 0 5px;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--rh-accent)}
.rh-facts .rh-facts__v{font-family:var(--font-heading);font-weight:600;font-size:clamp(15px,1.3vw,19px);line-height:1.35}

/* ---------- Start here (rabbit-hole entry) ---------- */
.rh-entry{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(32px,5vw,80px);align-items:start}
.rh-entry__img{position:relative;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#F1F1F5}
.rh-entry__cap{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.rh-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(14px,1.8vw,20px);margin-top:clamp(36px,4.6vw,60px)}
.rh-step{display:flex;flex-direction:column;gap:10px;border-radius:20px;padding:clamp(22px,2.8vw,30px);background:var(--rh-accent-soft);border:1px solid color-mix(in srgb,var(--rh-accent) 28%,transparent)}
.rh-step__n{margin:0;font-family:var(--font-heading);font-weight:600;font-size:13px;letter-spacing:0.1em;color:var(--rh-accent)}
.rh-step__t{margin:0;font-family:var(--font-heading);font-weight:600;font-size:13px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink)}
.rh-step__d{margin:0;font-size:15px;line-height:1.8;color:var(--body)}

/* ---------- What you come back with (outcomes) ---------- */
.rh-outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 clamp(30px,4vw,64px);margin-top:clamp(18px,2.4vw,30px)}
.rh-outcome{border-top:1px solid var(--rule);padding:clamp(22px,2.6vw,30px) 0}
.rh-outcome h3{margin:0 0 10px;font-family:var(--font-heading);font-weight:600;font-size:clamp(18px,1.7vw,22px);line-height:1.25;letter-spacing:0.01em}
.rh-outcome p{margin:0;font-size:15px;line-height:1.85;color:var(--body);max-width:46ch}

/* ---------- Journey intro ---------- */
.rh-journey{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(32px,5vw,80px);align-items:start}
.rh-journey__imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px)}
.rh-journey__img{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#F1F1F5}
.rh-journey__img:nth-child(2){margin-top:clamp(28px,5vw,72px)}
.rh-journey__turn{color:var(--ink);font-family:var(--font-heading);font-weight:600;font-size:clamp(16px,1.25vw,19px)}

/* ---------- Progression strip (reusable across Rabbit Holes) ---------- */
.rh-progression{background:var(--cream)}
.rh-progression__list{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.rh-progression__step{position:relative;padding-top:22px;border-top:2px solid var(--rule)}
.rh-progression__step:last-child{border-top-color:var(--rh-accent)}
.rh-progression__step::after{content:'\2192';position:absolute;top:-10px;right:0;padding-left:8px;background:var(--cream);font-size:15px;line-height:1;color:var(--rh-accent)}
.rh-progression__step:last-child::after{content:none}
.rh-progression__k{margin:0 0 10px;font-family:var(--font-heading);font-weight:600;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--rh-accent)}
.rh-progression__v{margin:0;font-size:15px;line-height:1.75;color:var(--body);max-width:30ch}
.rh-progression__step:first-child .rh-progression__v{font-style:italic}
@media (max-width:880px){
  .rh-progression__list{grid-template-columns:1fr;gap:0}
  .rh-progression__step{padding:18px 0 22px 28px;border-top:0;border-left:2px solid var(--rule)}
  .rh-progression__step:last-child{border-left-color:var(--rh-accent)}
  .rh-progression__step::before{content:'';position:absolute;left:-6px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--cream);border:2px solid var(--rh-accent)}
  .rh-progression__step::after{content:none}
}

/* ---------- Itinerary: mark the days that are the Rabbit Hole ---------- */
.rh-day-dot{background:var(--rh-accent) !important}
.rh-day-tag{display:inline-flex;align-items:center;margin-left:10px;padding:3px 9px;border-radius:999px;background:var(--rh-accent-soft);color:var(--rh-accent);font-size:10px;letter-spacing:0.14em;vertical-align:1px}

/* ---------- First-timers + FAQ ---------- */
.rh-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 clamp(30px,4vw,64px);margin-top:clamp(30px,4vw,48px)}
.rh-faq__item{border-top:1px solid var(--rule);padding:clamp(20px,2.4vw,26px) 0}
.rh-faq__item h3{margin:0 0 10px;font-family:var(--font-heading);font-weight:600;font-size:clamp(16px,1.4vw,18px);line-height:1.3;letter-spacing:0.01em;text-transform:none}
.rh-faq__item p{margin:0;font-size:15px;line-height:1.9;color:var(--body);max-width:52ch}

/* ---------- Inclusions split: the trip vs the rabbit hole ---------- */
.rh-include-card--rh{border-color:color-mix(in srgb,var(--rh-accent) 40%,transparent) !important;background:var(--rh-accent-soft) !important}
.rh-tbc{flex:0 0 auto;margin-left:auto;align-self:center;padding:3px 9px;border-radius:999px;border:1px dashed var(--rh-accent);color:var(--rh-accent);font-family:var(--font-heading);font-weight:600;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap}
.rh-note{margin:18px 0 0;padding:14px 16px;border-radius:12px;background:#FFFFFF;border:1px solid var(--rule);font-size:13px;line-height:1.75;color:var(--body)}

/* ---------- Price ---------- */
.rh-price{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:880px){.rh-price{grid-template-columns:1fr}}

/* =====================================================================
   Variants. Each Rabbit Hole shares the anatomy above but picks its own
   mood, so the pages read as one family without looking copy-pasted.
   ===================================================================== */

/* ---------- Hero, split (night / SOUND): copy left, framed images right ---------- */
.rh-hero--split .rh-hero__in{min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(36px,5vw,84px);padding-top:clamp(72px,8vw,116px);padding-bottom:clamp(40px,5vw,72px)}
.rh-hero__copy{display:flex;flex-direction:column;min-width:0}
.rh-hero__frames{position:relative;min-width:0}
.rh-hero__frame{position:relative;width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#3A3752}
.rh-hero__frame--inset{position:absolute;left:-12%;bottom:-7%;width:44%;aspect-ratio:1/1;border:6px solid var(--ink);border-radius:16px}
.rh-hero__frame-cap{position:absolute;right:14px;bottom:14px;margin:0;padding:6px 12px;border-radius:999px;background:rgba(40,38,63,0.72);font-size:11px;letter-spacing:0.08em;color:var(--cream)}
.rh-chapters{position:relative;list-style:none;margin:0;padding:clamp(22px,2.6vw,30px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);border-top:1px solid rgba(255,255,255,0.14)}
.rh-chapters li{margin:0}
.rh-chapters__n{display:block;margin:0 0 6px;font-family:var(--font-heading);font-weight:600;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:#8B86A0}
.rh-chapters__t{display:block;font-family:var(--font-heading);font-weight:600;font-size:clamp(15px,1.3vw,18px);color:var(--cream)}
.rh-chapters__d{display:block;margin-top:4px;font-size:13px;line-height:1.6;color:#CFCBD8}
.rh-chapters li.is-key .rh-chapters__n,.rh-chapters li.is-key .rh-chapters__t{color:var(--rh-accent-on-dark)}
.rh-hero--split .rh-chapters{grid-column:1 / -1}
.rh-hero--split .rh-hero__crumb,.rh-hero--light .rh-hero__crumb{left:clamp(24px,5vw,84px)}
@media (max-width:880px){
  .rh-hero--split .rh-hero__in{grid-template-columns:1fr}
  .rh-hero--split .rh-hero__frames{order:-1;margin-top:28px}
  .rh-hero__frame{aspect-ratio:4/3}
  .rh-hero__frame--inset{display:none}
}
@media (max-width:560px){.rh-chapters{grid-template-columns:1fr;gap:16px}}
/* Chapters list on a light ground (journey section) */
.rh-chapters--light{border-top-color:var(--rule)}
.rh-chapters--light .rh-chapters__n{color:var(--muted)}
.rh-chapters--light .rh-chapters__t{color:var(--ink)}
.rh-chapters--light .rh-chapters__d{color:var(--body)}
.rh-chapters--light li.is-key .rh-chapters__n,.rh-chapters--light li.is-key .rh-chapters__t{color:var(--rh-accent)}
.rh-chapters--stack{grid-template-columns:1fr;gap:0;padding:0;border-top:0}
.rh-chapters--stack li{padding:clamp(18px,2.2vw,24px) 0;border-top:1px solid var(--rule)}

/* ---------- Hero, light (gentle gateway, e.g. Sri Lanka OCEAN) ---------- */
.rh-hero--light{background:var(--cream);color:var(--ink)}
.rh-hero--light .rh-hero__in{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(32px,5vw,80px);padding-top:clamp(72px,8vw,116px);padding-bottom:clamp(48px,6vw,88px)}
.rh-hero--light .rh-hero__crumb,.rh-hero--light .rh-hero__crumb a{color:var(--muted)}
.rh-hero--light .rh-eyebrow{color:var(--rh-accent)}
.rh-hero--light .rh-hero__title{color:var(--ink);font-size:clamp(38px,5.6vw,80px)}
.rh-hero--light .rh-hero__lede{color:var(--body)}
.rh-hero--light .rh-hero__setting{color:var(--muted)}
.rh-hero--light .rh-hero__setting span{color:var(--muted)}
.rh-hero--light .rh-badge{color:var(--ink);border-color:var(--rh-accent)}
.rh-hero--light .rh-badge::before{background:var(--rh-accent)}
.rh-hero__panel{position:relative;width:100%;aspect-ratio:5/4;border-radius:22px;overflow:hidden;background:#F1F1F5}
@media (max-width:880px){
  .rh-hero--light .rh-hero__in{grid-template-columns:1fr}
  .rh-hero--light .rh-hero__panel{order:-1;margin-top:28px;aspect-ratio:4/3}
}

/* ---------- Steps, open (no cards) ---------- */
.rh-steps--open .rh-step{background:transparent;border:0;border-top:2px solid var(--rh-accent);border-radius:0;padding:20px 0 0}

/* ---------- Progression strip, dark (night) ---------- */
.rh-progression--dark{background:var(--ink);color:var(--cream)}
.rh-progression--dark .rh-eyebrow{color:var(--rh-accent-on-dark)}
.rh-progression--dark .rh-h2{color:var(--cream)}
.rh-progression--dark .rh-progression__step{border-top-color:rgba(255,255,255,0.16)}
.rh-progression--dark .rh-progression__step:last-child{border-top-color:var(--rh-accent-on-dark)}
.rh-progression--dark .rh-progression__step::after{background:var(--ink);color:var(--rh-accent-on-dark)}
.rh-progression--dark .rh-progression__k{color:var(--rh-accent-on-dark)}
.rh-progression--dark .rh-progression__v{color:#DCD9E4}
@media (max-width:880px){
  .rh-progression--dark .rh-progression__step{border-left-color:rgba(255,255,255,0.16)}
  .rh-progression--dark .rh-progression__step:last-child{border-left-color:var(--rh-accent-on-dark)}
  .rh-progression--dark .rh-progression__step::before{background:var(--ink);border-color:var(--rh-accent-on-dark)}
}

/* ---------- Itinerary chapter markers (narrative beats inside the day list) ---------- */
.rh-chapter-mark{display:flex;align-items:baseline;gap:14px;margin:0 0 clamp(22px,2.8vw,32px);padding-top:6px}
.rh-chapter-mark span{font-family:var(--font-heading);font-weight:600;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--rh-accent)}
.rh-chapter-mark strong{font-family:var(--font-heading);font-weight:600;font-size:clamp(17px,1.6vw,20px);color:var(--ink)}
.rh-climax{margin:clamp(8px,1.4vw,16px) 0 clamp(30px,3.6vw,44px);border-radius:22px;padding:clamp(26px,4vw,48px);background:var(--ink);color:var(--cream)}
.rh-climax .rh-eyebrow{color:var(--rh-accent-on-dark)}
.rh-climax__title{margin:0 0 14px;font-family:var(--font-heading);font-weight:600;font-size:clamp(34px,5vw,64px);line-height:0.98;letter-spacing:0.005em;color:var(--cream)}
.rh-climax__title em{font-style:normal;color:var(--rh-accent-on-dark)}
.rh-climax__body{margin:0 0 10px;font-size:15px;line-height:1.85;color:#DCD9E4;max-width:56ch}
.rh-climax__body:last-child{margin-bottom:0}

/* ---------- A day's rhythm (morning / afternoon / evening) ---------- */
.rh-rhythm{list-style:none;margin:0;padding:0}
.rh-rhythm li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(--rule)}
.rh-rhythm li:last-child{border-bottom:1px solid var(--rule)}
.rh-rhythm__k{margin:0;font-family:var(--font-heading);font-weight:600;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--rh-accent);padding-top:3px}
.rh-rhythm__v{margin:0;font-size:15px;line-height:1.8;color:var(--body)}
.rh-rhythm-img{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#F1F1F5;margin-top:clamp(18px,2.4vw,28px)}
@media (max-width:560px){.rh-rhythm li{grid-template-columns:1fr;gap:4px}}