/* ============================================================
   BOOKING PAGE — page-local layout
   Source: book-page.md (design handoff, 2026-05-10).
   Loaded only on /booking/ via inc/enqueues.php so any class
   collisions with main.css are contained to this page.
   Tokens come from main.css; no token changes here.

   Notable preservations vs the design doc:
   - .booking-section--alt keeps Carolina's --cream-warm tone
     (warmer than the design's --warm-white default).
   - The rates table itself stays as the existing .ec-rates
     markup emitted by elite_render_rates_table() — the new
     supporting messages (.booking-rates-intro / -note /
     -bespoke) are siblings of that block, not replacements.
   ============================================================ */

/* -- Hero (text bottom-anchored, gold WhatsApp pill) --
   Resets main.css's homepage-hero rules:
   - .hero has padding 8rem 5vw 1.5rem + min-height 46vh + flex centring;
     we override to a fixed 460px shell with bottom-anchored grid.
   - .hero-bg::before paints a horizontal cream→transparent wash that
     fights the design's clean bottom-only fade; we neutralise it so
     only ::after (the bottom fade) drives readability. */
.hero--booking {
  position: relative;
  height: 460px;             /* SEO: gallery must sit on/below the fold */
  min-height: 460px;
  padding: 0;                 /* main.css sets 8rem 5vw 1.5rem on .hero */
  display: block;             /* main.css sets flex on .hero */
  overflow: hidden;
  background: var(--cream);
}
.hero--booking .hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: 50% 30%;
  filter: saturate(.92) brightness(.98);
}
/* Neutralise main.css's horizontal cream wash — booking hero relies on
   the bottom-only fade in ::after for type contrast. */
.hero--booking .hero-bg::before { content: none; background: none; }
/* Cream fade — strong lower band so type sits on a near-solid wash */
.hero--booking .hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(250,248,245,0)    0%,
      rgba(250,248,245,0)    34%,
      rgba(250,248,245,.45)  52%,
      rgba(250,248,245,.82)  72%,
      rgba(250,248,245,.96)  88%,
      var(--cream)           100%);
}
.hero--booking .hero-inner {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto; padding: 0 5vw 1.2rem;
  height: 100%;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem;
  align-items: end;
}
.hero--booking .hero-left  {
  /* H1 baseline aligned to the WhatsApp button's vertical centre on
     the right column. Hero-right is `align-self: end` with padding-
     bottom: .15rem; the button itself is roughly 2.4rem tall, so its
     centre sits ~1.35rem above hero-inner's bottom edge. With this
     padding-bottom on hero-left, the H1 baseline lands at that height. */
  align-self: end;
  padding-bottom: .55rem;
  animation: fadeUp .9s var(--ease-out-soft) .2s both;
}
.hero--booking .hero-right {
  align-self: end;
  animation: fadeUp .9s var(--ease-out-soft) .5s both;
  max-width: 32ch; padding-bottom: .15rem;
}
/* Hero typography matches the join hero: h1, .hero-overlay and .hero-meta
   inherit from the shared rules in main.css. Booking only adds the
   readability text-shadows and the gold-pale hairline above the meta. */
.hero--booking h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05;
  letter-spacing: -.005em;
  text-shadow: 0 1px 0 rgba(250,248,245,.55);
}
.hero--booking .hero-overlay {
  text-shadow: 0 1px 0 rgba(250,248,245,.5);
  margin: 0 0 .85rem;
}
.hero--booking .hero-meta {
  padding-top: .7rem;
  border-top: 1px solid var(--gold-pale);
  max-width: 26ch;
}

/* Hero CTA — gold pill */
.hero--booking .hero-cta-wrap { margin-top: 2.1rem; }
.hero--booking .hero-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .75rem 1.4rem;
  background: var(--gold-decor); color: var(--cream);
  font-family: var(--sans); font-weight: 500;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold-decor);
  transition: background .25s var(--ease-out-soft),
              color      .25s var(--ease-out-soft),
              border-color .25s var(--ease-out-soft);
}
.hero--booking .hero-cta:hover { background: transparent; color: var(--gold); border-color: var(--gold); }
.hero--booking .hero-cta svg { width: 14px; height: 14px; }
.hero--booking .hero-cta .cta-num {
  font-family: var(--serif); font-weight: 500;
  text-transform: none; letter-spacing: .02em;
  font-size: 1rem;
}

@media (max-width: 880px) {
  .hero--booking { height: 540px; min-height: 540px; }
  .hero--booking .hero-bg::after {
    background:
      linear-gradient(to bottom,
        rgba(250,248,245,0)    0%,
        rgba(250,248,245,0)    22%,
        rgba(250,248,245,.55)  44%,
        rgba(250,248,245,.92)  66%,
        var(--cream)           92%);
  }
  .hero--booking .hero-inner {
    display: flex; flex-direction: column;
    justify-content: flex-end; align-items: center;
    gap: .85rem; padding: 0 6vw 1.4rem; text-align: center;
  }
  .hero--booking .hero-left,
  .hero--booking .hero-right { text-align: center; width: 100%; }
  .hero--booking .hero-right { max-width: none; margin-left: auto; margin-right: auto; }
  .hero--booking h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero--booking .hero-overlay { font-size: 1.05rem; margin-bottom: .55rem; }
  /* Centre the meta strap horizontally — max-width: 26ch otherwise
     anchors it to the left of the centred parent. Matches the
     equivalent rule for .hero--join. */
  .hero--booking .hero-meta { margin-left: auto; margin-right: auto; }
  .hero--booking .hero-cta-wrap {
    align-self: center; margin-top: 1.8rem; width: 100%;
    display: flex; justify-content: center;
  }
  .hero--booking .hero-cta { padding: .85rem 1.6rem; }
}

/* -- Section scaffold -- */
.booking-section { padding: 5rem 5vw; background: var(--cream); }
/* Preserve Carolina's existing zebra tone — cream-warm, not warm-white. */
.booking-section--alt { background: var(--cream-warm); }
.booking-section .sec-inner { max-width: 1240px; margin: 0 auto; }

.booking-section-head { text-align: center; margin-bottom: 3rem; }
.booking-section-head .eyebrow {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: .68rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: 1rem;
}
.booking-section-head .eyebrow::before,
.booking-section-head .eyebrow::after {
  content: ''; width: 28px; height: 1px; background: var(--gold-decor);
}
.booking-section-head .sec-h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.15;
  margin: 0; color: var(--charcoal);
}
.booking-section-head .sec-h2 em { font-style: italic; color: var(--gold); }
.booking-section-head .divider-sm {
  width: 56px; height: 1px; background: var(--gold-decor);
  margin: 1.4rem auto 0;
}

/* -- Two-column row: text + portrait. Page-local override of
      main.css's centered layout — start-aligned so sticky photos
      track scroll properly. -- */
.booking-section .booking-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 4.5rem;
  align-items: start;
}
.booking-section .booking-grid--photo-left { grid-template-columns: 1fr 1.15fr; }
.booking-section .booking-grid--photo-left .booking-grid-photo { order: 0; }
.booking-section .booking-grid--photo-left .booking-grid-text  { order: 1; }
/* Bumped from 768→900 so iPad portrait (820px) gets the stacked
   layout. At 2-col with sticky the text column squeezed to ~330px
   and the sticky photo on left visually overlaid the cramped text. */
@media (max-width: 900px) {
  .booking-section .booking-grid,
  .booking-section .booking-grid--photo-left { grid-template-columns: 1fr; gap: 2.5rem; }
  .booking-section .booking-grid--photo-left .booking-grid-text  { order: 0; }
  .booking-section .booking-grid--photo-left .booking-grid-photo { order: 1; }
}
/* Sticky photo behaviour now lives globally in main.css so /join/
   gets the same editorial-magazine treatment. Page-local CSS here
   only adjusts column ratio and gap. */

/* -- Long-form prose (Lisa voice) — booking-page layout +
      link treatment. Typography (p/h3/em/strong/lists) is now
      promoted to main.css so the same legibility applies on the
      join page and the home travel section. -- */
.booking-section .booking-prose { max-width: 56ch; }
.booking-section .booking-prose a {
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid var(--gold-pale);
  transition: color .2s, border-color .2s;
}
.booking-section .booking-prose a:hover { color: var(--rose); border-color: var(--rose); }

/* -- Essentials strip (6 cells) — page-local refinement of the strip
      already styled in main.css. Keeping the existing 6-column layout
      and just tightening the section padding so the rules sit between
      hero and the merged "How to book" without dead space. -- */
.booking-rules-section { padding: 2.4rem 5vw; }

/* Rule-value: support a small inline tick icon in front of "Required". */
.booking-rules-strip .rule-value .rule-check {
  display: inline-block; vertical-align: -.05em; margin-right: .35rem;
  width: 14px; height: 14px; color: var(--gold);
}

/* -- Rates supporting messages around .ec-rates (rendered by
      elite_render_rates_table). -- */
.booking-rates-intro {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.15rem; line-height: 1.55; color: var(--gold);
  margin: 0 0 1.8rem; padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--gold-pale);
  max-width: 50ch;
}
.booking-rates-note {
  margin-top: 1.2rem;
  font-size: .85rem; line-height: 1.7; color: var(--warm-grey);
  font-style: italic;
}
.booking-rates-bespoke {
  margin: 2rem 0 0; padding-top: 1.6rem;
  border-top: 1px solid var(--gold-pale);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.1rem; color: var(--gold); line-height: 1.4;
  text-align: right;
}

/* Suppress the legacy rule-chips emitted by elite_render_rates_table()
   on the booking page only — the essentials strip at the top of the
   page now carries those facts (and adds Deposit + ID screening),
   so the chips become noise here. The single-escort page still shows
   them. */
.booking-section .ec-rules { display: none; }

/* -- Etiquette accordion -- */
.booking-etiquette .etiquette-acc {
  max-width: 820px; margin: 0 auto;
  border-top: 1px solid var(--gold-pale);
}
.acc-item { border-bottom: 1px solid var(--gold-pale); }
.acc-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-family: var(--serif); font-weight: 400;
  font-size: 1.18rem; line-height: 1.4; color: var(--charcoal);
  transition: color .25s var(--ease-out-soft);
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::marker { content: ''; }
.acc-item summary:hover  { color: var(--gold); }
.acc-icon {
  flex: 0 0 auto;
  font-family: var(--sans); font-weight: 200;
  font-size: 1.5rem; color: var(--gold); line-height: 1;
  transition: transform .35s var(--ease-out-soft);
}
.acc-item[open] .acc-icon { transform: rotate(45deg); }
.acc-item[open] summary    { color: var(--gold); }
.acc-body {
  padding: 0 0 1.6rem;
  max-width: 64ch;
  animation: accFade .45s var(--ease-out-soft);
}
.acc-body p {
  font-family: var(--sans); font-weight: 300;
  font-size: .95rem; line-height: 1.75; color: var(--graphite);
  margin: 0 0 .8rem;
}
.acc-body p:last-child { margin-bottom: 0; }
.acc-body strong       { color: var(--charcoal); font-weight: 500; }
@keyframes accFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Safeguarding callout — full-width block at bottom of accordion.
   Page-local alternative to .ec-callout--warning (charcoal field) —
   this one sits on a warm cream background with an "Important"
   eyebrow, per the design handoff. */
.ec-callout--block {
  max-width: 820px; margin: 3rem auto 0;
  border: 1px solid rgba(154,117,80,.35);
  background: rgba(245,232,217,.45);
  padding: 1.6rem 1.7rem;
}
.ec-callout--block::before {
  content: 'Important';
  display: block;
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: .8rem;
}
.ec-callout--block p {
  font-family: var(--sans); font-weight: 300;
  font-size: .92rem; line-height: 1.7; color: var(--charcoal);
  margin: 0;
}
.ec-callout--block strong { color: var(--charcoal); font-weight: 500; }

/* -- Sign-off — champagne band, letter card. Overrides main.css
      .booking-signoff (charcoal field) only on this page. -- */
.booking-signoff {
  background: var(--champagne);
  padding: 6.5rem 5vw;
  position: relative;
  border-top: 1px solid var(--gold-pale);
  border-bottom: 1px solid var(--gold-pale);
}
.booking-signoff::before,
.booking-signoff::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 80px; height: 1px; background: var(--gold-decor); opacity: .8;
}
.booking-signoff::before { top: 2.6rem; }
.booking-signoff::after  { bottom: 2.6rem; }

.booking-signoff .signoff-card    { max-width: 720px; margin: 0 auto; text-align: center; }
.booking-signoff .signoff-eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin: 0 0 2.5rem;
}
.booking-signoff .signoff-eyebrow-rule {
  display: block; width: 36px; height: 1px;
  background: var(--gold-decor); opacity: .55;
}
.booking-signoff .signoff-eyebrow-text {
  font-size: .68rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.booking-signoff .signoff-message {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem); line-height: 1.55;
  color: var(--charcoal); margin: 0 0 1.8rem;
  text-wrap: pretty;
}
.booking-signoff .signoff-signature {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.25rem; color: var(--gold); margin: 0 0 2.4rem;
  letter-spacing: .04em;
}
.booking-signoff .signoff-flourish {
  font-family: var(--serif); font-size: 1.5rem;
  color: var(--gold-decor); opacity: .7;
  margin: 0 0 1.6rem; line-height: 1;
}
.booking-signoff .signoff-question {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.3;
  color: var(--gold); margin: 0 0 2.5rem;
}
.booking-signoff .signoff-cta {
  display: inline-flex; align-items: center; gap: .65rem; text-decoration: none;
}

/* fadeUp keyframe — fallback if main.css's variant gets renamed. */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}