/* ── /tours/<key> detail page ────────────────────────────────────────
   Two-column: content (left) + sticky booking card (right); hero, related
   tours and final CTA span full width. Colours/type from style.css tokens;
   content blocks reuse .modal-* / .tour-* classes. */

.tour-detail-page { background: var(--midnight); min-height: 100vh; scroll-padding-top: 96px; }
/* Top padding clears the fixed floating nav (~80px + offset). */
.tour-detail-container { max-width: 1140px; margin: 0 auto; padding: 104px 1.25rem 4rem; }

/* ── Hero (full-width gallery banner) ── */
.tourpage-hero {
  position: relative;
  height: clamp(300px, 46vh, 500px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  background: var(--obsidian);
}
.tourpage-hero .modal-gallery { position: absolute; inset: 0; height: 100%; }
.tourpage-hero .modal-gallery-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .5s ease;
}
.tourpage-hero .modal-gallery-slide.active { opacity: 1; }
.tourpage-hero-fallback { display: grid; place-items: center; height: 100%; opacity: .5; }
.tourpage-hero-fallback svg { width: 40%; height: 40%; }

/* ── Two-column layout (grid areas) ── */
.tourpage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-areas: "head side" "body side";
  column-gap: 3rem;
  align-items: start;
  margin-top: 1.9rem;
}
.tourpage-head    { grid-area: head; text-align: left; margin-bottom: 1.7rem; }
.tourpage-content { grid-area: body; }
.tourpage-sidebar { grid-area: side; position: sticky; top: 96px; }

/* ── Title block ── */
.tourpage-eyebrow {
  display: inline-block; font-family: var(--font-heading);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .5rem;
}
.tourpage-title {
  font-family: var(--font-display); color: var(--parchment);
  font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.14; margin: 0 0 .55rem;
}
.tourpage-head .tour-rating { justify-content: flex-start; margin: .3rem 0 .7rem; }
.tourpage-tagline {
  font-family: var(--font-body); color: var(--parchment-dim);
  font-size: 1.12rem; line-height: 1.55; margin: 0; max-width: 60ch;
}

/* ── Sticky booking card ── */
.tourpage-booking-card {
  background: linear-gradient(180deg, rgba(30,24,37,0.92), rgba(19,16,26,0.92));
  border: 1px solid var(--gold-line); border-radius: 14px;
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: 0 12px 34px rgba(0,0,0,0.38);
}
/* Pricing sits BELOW the facts (right above Book). No divider line (it didn't
   read well under the What's-included fact) — just a small gap to the price;
   also cancels the modal's inherited 27px top padding + border. */
.tourpage-booking-card .modal-pricing { margin: 0 0 1.1rem; padding-top: 0.7rem; border-top: 0; }
/* Owner tweak — scale up ALL text in the sticky booking card (it read too small).
   Scoped to the tour page, so the homepage cards + modal keep their compact sizes. */
.tourpage-booking-card .modal-price       { font-size: 1.85rem; }
.tourpage-booking-card .modal-price-label { font-size: 1.02rem; }
.tourpage-booking-card .modal-conc        { font-size: 1rem; }
.tourpage-booking-card .modal-kids        { font-size: 1.18rem; }
.tourpage-booking-card .modal-price-note  { font-size: 0.98rem; line-height: 1.5; }
.tourpage-booking-card .tourpage-cf-k     { font-size: 0.8rem; }
.tourpage-booking-card .tourpage-cf-v     { font-size: 1.12rem; }
.tourpage-booking-card .tourpage-book-btn { font-size: 1.05rem; }
.tourpage-booking-card .tourpage-cancel   { font-size: 1rem; }
/* Facts are now the FIRST block in the card, so no top divider/padding here —
   the divider moved onto .modal-pricing (below). */
.tourpage-card-facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .8rem;
}
.tourpage-cf { display: flex; gap: .6rem; align-items: flex-start; }
.tourpage-cf-ico { flex: 0 0 auto; margin-top: 3px; }
.tourpage-cf-ico .we-ico { color: var(--gold); width: 17px; height: 17px; }
.tourpage-cf-txt { display: flex; flex-direction: column; line-height: 1.35; }
.tourpage-cf-k {
  font-family: var(--font-heading); font-size: .68rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--parchment-dim); margin-bottom: 1px;
}
.tourpage-cf-v { font-family: var(--font-body); font-size: 1rem; color: var(--parchment); }
.tourpage-cf-warn .tourpage-cf-v { color: #E4A0A0; }
.tourpage-cf-warn .tourpage-cf-ico .we-ico { color: #E4A0A0; }
.tourpage-book-btn { display: block; width: 100%; text-align: center; }

/* ── Content sections ── */
/* padding:0 overrides the homepage's global `section { padding: … }` — without
   it every <section class="tourpage-section"> inherited ~63px top+bottom padding,
   adding ~130px of dead space to each section. */
.tourpage-section { margin-bottom: 2.4rem; padding: 0; }
.tourpage-content > .tourpage-section:first-child { margin-top: 0; }
.tourpage-h2 {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-heading); color: var(--parchment);
  font-size: 1.35rem; margin: 0 0 1rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--gold-line);
}
.tourpage-h2 .we-ico { color: var(--gold); }

/* Description */
.tourpage-desc p {
  font-family: var(--font-body); color: var(--parchment);
  font-size: 1.14rem; line-height: 1.75; margin: 0 0 1.1rem;
}
.tourpage-desc p:last-child { margin-bottom: 0; }

/* On this walk — itinerary + map */
.tourpage-itinerary { margin: 0 0 1.4rem; }
.tourpage-route-map {
  height: clamp(320px, 44vh, 440px); width: 100%;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--gold-line);
}

/* Related-tour cards carry the homepage .reveal (scroll-fade) class, but this
   page doesn't run the IntersectionObserver — show them immediately. */
.tour-detail-page .reveal { opacity: 1 !important; transform: none !important; }

/* Related tours (full-width row below the two columns) */
.tourpage-related { margin-top: 1rem; }
.tourpage-related .tour-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem; margin-top: .4rem;
}
.tourpage-related .tour-card { margin: 0; }

/* Final CTA */
.tourpage-cta { text-align: center; margin: 2.6rem 0 .5rem; padding: 0; }
.tourpage-cta-btn { display: inline-block; }

/* 404 */
.tourpage-missing {
  max-width: 640px; margin: 4rem auto; text-align: center;
  font-family: var(--font-body); color: var(--parchment); font-size: 1.15rem;
}
.tourpage-missing a { color: var(--gold); }

/* ── In-page section tab bar (sticky anchors) ── */
.tourpage-tabbar{position:sticky;top:96px;z-index:5;display:flex;gap:.3rem;flex-wrap:wrap;background:rgba(19,16,26,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--gold-line);padding:.5rem 0;margin:0 0 1.6rem}
.tourpage-tabbar a{font-family:var(--font-heading);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--parchment-dim);padding:.35rem .7rem;border-radius:6px;text-decoration:none}
.tourpage-tabbar a:hover{color:var(--gold)}

/* ── What's included / excluded ── */
.tourpage-incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.tourpage-incl-list{list-style:none;margin:0;padding:0}
.tourpage-incl-list li{display:flex;gap:.5rem;align-items:flex-start;margin-bottom:.55rem;font-family:var(--font-body);color:var(--parchment);line-height:1.45}
.tourpage-incl-list .we-ico{flex:0 0 auto;margin-top:2px;width:18px;height:18px}
.tourpage-incl-yes .we-ico{color:#6FBF73}
.tourpage-incl-no .we-ico{color:var(--parchment-dim)}
.tourpage-incl-no li{color:var(--parchment-dim)}

/* ── FAQ (native <details> accordion) ── */
.tourpage-faq-item{border-bottom:1px solid var(--gold-line)}
.tourpage-faq-item summary{cursor:pointer;list-style:none;font-family:var(--font-heading);color:var(--parchment);padding:.9rem 0;position:relative;padding-right:1.6rem}
.tourpage-faq-item summary::-webkit-details-marker{display:none}
.tourpage-faq-item summary::after{content:'+';position:absolute;right:.2rem;color:var(--gold);font-size:1.2rem;line-height:1}
.tourpage-faq-item[open] summary::after{content:'\2212'}
.tourpage-faq-a{font-family:var(--font-body);color:var(--parchment-dim);padding:0 0 1rem;line-height:1.6}

/* ── Free-cancellation reassurance line (booking card) ── */
.tourpage-cancel{display:flex;align-items:center;gap:.4rem;margin:.7rem 0 0;font-family:var(--font-body);font-size:.9rem;color:var(--parchment-dim)}
.tourpage-cancel .we-ico{color:#6FBF73;width:16px;height:16px;flex:0 0 auto}

/* ── Tablet / mobile: stack, booking card between title and body ── */
@media (max-width: 900px) {
  .tourpage-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "side" "body";
    column-gap: 0;
  }
  .tourpage-sidebar { position: static; margin-bottom: 2rem; }
  .tourpage-booking-card { max-width: 480px; }
}
@media (max-width: 640px) {
  .tour-detail-container { padding: 96px 1rem 3rem; }
  .tourpage-booking-card { max-width: none; }
  .tourpage-hero { height: clamp(240px, 40vh, 340px); }
  .tourpage-incl-grid { grid-template-columns: 1fr; }
}