/* =========================================================================
   Ohalik — Experience (tour category) pages + Booking Terms
   Scoped under .xp-page so it never collides with style.css
   Drop at: public/css/experience.css   →   <link href="/css/experience.css">
   Shares the "Our Story" palette: deep green, gold, paper.
   ========================================================================= */

.xp-page {
  --deep:  #0B1A1A;
  --deep2: #102A28;
  --gold:  #C8A24B;
  --gold-ink: #a07d22;
  --paper: #F4EFE6;
  --ink:   #1A1714;

  font-family: 'Hanken Grotesk', sans-serif;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.xp-page *,
.xp-page *::before,
.xp-page *::after { box-sizing: border-box; }

.xp-page ::selection { background: var(--gold); color: var(--deep); }

.xp-wrap { max-width: 880px; margin: 0 auto; }

/* ---- hero ---- */
.xp-hero {
  position: relative;
  min-height: clamp(420px, 72vh, 680px);
  display: flex; align-items: flex-end;
  background: var(--deep);
}
.xp-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.xp-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,26,26,.42) 0%, rgba(11,26,26,.18) 40%, rgba(11,26,26,.88) 100%);
}
.xp-hero-inner {
  position: relative; z-index: 1; width: 100%;
  max-width: 1180px; margin: 0 auto;
  padding: clamp(6rem,16vh,10rem) clamp(1.5rem,6vw,4rem) clamp(3rem,7vh,4.5rem);
  color: #fff;
}
.xp-kicker {
  text-transform: uppercase; letter-spacing: .36em; font-size: .72rem;
  font-weight: 600; color: var(--gold); margin: 0 0 1.2rem;
}
.xp-hero-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(2.6rem,6vw,4.4rem); line-height: 1.02;
  letter-spacing: -.01em; margin: 0 0 .9rem; color: #fff;
}
.xp-hero-sub {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(1.25rem,2.4vw,1.7rem); line-height: 1.35;
  color: rgba(244,239,230,.92); margin: 0 0 1.6rem; max-width: 40ch;
}
.xp-hero-meta { margin: 0; font-size: .95rem; color: rgba(244,239,230,.85); }
.xp-hero-meta .xp-lead { display: block; font-weight: 600; letter-spacing: .02em; margin-bottom: .35rem; }
.xp-hero-meta .xp-route { display: block; font-style: italic; color: rgba(244,239,230,.72); }

/* ---- prose sections ---- */
.xp-section { padding: clamp(3.5rem,9vh,6rem) clamp(1.5rem,6vw,4rem); }
.xp-section--paper { background: var(--paper); color: var(--ink); }
.xp-section--deep  { background: var(--deep);  color: var(--paper); }

.xp-h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.9rem,3.6vw,2.7rem); line-height: 1.08;
  letter-spacing: -.01em; margin: 0 0 1.4rem; color: var(--ink);
}
.xp-section--deep .xp-h2 { color: #fff; }

.xp-prose p {
  font-size: clamp(1rem,1.35vw,1.12rem); line-height: 1.75;
  margin: 0 0 1.2rem; color: inherit;
}
.xp-prose p:last-child { margin-bottom: 0; }
.xp-prose a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.xp-section--deep .xp-prose a, .xp-days .xp-prose a { color: var(--gold); }

.xp-section + .xp-section--paper .xp-wrap { border-top: 1px solid rgba(26,23,20,.12); padding-top: clamp(3rem,7vh,4.5rem); }
.xp-section--paper + .xp-section--paper { padding-top: 0; }

/* ---- itinerary ---- */
.xp-days { background: var(--deep); color: var(--paper); }
.xp-days .xp-h2 { color: #fff; margin-bottom: clamp(2rem,5vh,3rem); }
.xp-day {
  border-top: 1px solid rgba(244,239,230,.16);
  padding: clamp(1.8rem,4vh,2.6rem) 0;
}
.xp-day:last-child { padding-bottom: 0; }
.xp-day-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(1.35rem,2.4vw,1.75rem); line-height: 1.15;
  margin: 0 0 .9rem; color: var(--gold);
}
.xp-day .xp-prose p { color: rgba(244,239,230,.9); }
.xp-soul {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(1.1rem,1.9vw,1.3rem); color: rgba(200,162,75,.95);
  margin: 1.1rem 0 0;
}

/* ---- "at a glance" stats block ---- */
.xp-glance {
  margin: 1.4rem 0 0; padding: 1.2rem 1.4rem;
  background: var(--deep2); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
}
.xp-glance-title {
  text-transform: uppercase; letter-spacing: .28em; font-size: .68rem;
  font-weight: 700; color: var(--gold); margin: 0 0 .8rem;
}
.xp-glance dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.1rem; }
.xp-glance dt { font-weight: 600; font-size: .88rem; color: rgba(244,239,230,.95); }
.xp-glance dd { margin: 0; font-size: .88rem; line-height: 1.5; color: rgba(244,239,230,.78); }
@media (max-width: 560px) {
  .xp-glance dl { grid-template-columns: 1fr; gap: .1rem; }
  .xp-glance dd { margin-bottom: .55rem; }
}

/* ---- practical notes / terms clauses ---- */
.xp-notes-list { margin: 0; }
.xp-notes-list > div { padding: 1rem 0; border-top: 1px solid rgba(26,23,20,.12); }
.xp-notes-list > div:first-of-type { border-top: 0; padding-top: 0; }
.xp-note-label { font-weight: 700; margin-right: .35rem; }
.xp-notes-list p { margin: 0; font-size: clamp(.98rem,1.3vw,1.08rem); line-height: 1.7; }

/* numbered clauses (booking terms) */
.xp-clause { padding: clamp(1.4rem,3.5vh,2rem) 0; border-top: 1px solid rgba(26,23,20,.12); }
.xp-clause:first-of-type { border-top: 0; padding-top: 0; }
.xp-clause h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(1.3rem,2.2vw,1.6rem); margin: 0 0 .8rem; color: var(--ink);
}
.xp-clause h3 span { color: var(--gold-ink); margin-right: .5rem; }
.xp-clause ul { margin: .4rem 0 1rem; padding-left: 1.2rem; }
.xp-clause li { font-size: clamp(.98rem,1.3vw,1.08rem); line-height: 1.7; margin-bottom: .45rem; }

/* ---- CTA band ---- */
.xp-cta { text-align: center; }
.xp-cta .xp-h2 { margin-bottom: .8rem; }
.xp-cta-lead {
  max-width: 52ch; margin: 0 auto 2rem; font-size: clamp(1rem,1.4vw,1.15rem);
  line-height: 1.7; color: rgba(244,239,230,.85);
}
.xp-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.xp-btn {
  display: inline-block; padding: .95rem 2.1rem; border-radius: 999px;
  font-size: .92rem; font-weight: 600; letter-spacing: .04em;
  text-decoration: none; transition: transform .18s ease, opacity .18s ease;
}
.xp-btn:hover { transform: translateY(-2px); opacity: .92; }
.xp-btn--gold  { background: var(--gold); color: var(--deep); }
.xp-btn--ghost { border: 1px solid rgba(244,239,230,.5); color: var(--paper); }

/* ---- effective date line (terms) ---- */
.xp-effective {
  font-style: italic; color: rgba(26,23,20,.65);
  margin: 0 0 2rem; font-size: .95rem;
}