/* ============================================================
   DOLPHIN TOURS OAHU - TOUR PAGE
   Light "white & ocean blue" layout that matches the homepage.
   Loads on top of main.css (shares its CSS variables + buttons).
   Scoped under body.tour-page. Header/footer come from the theme.
   ============================================================ */

/* --- TOUR HERO --- */
.tour-page .tour-hero {
  position: relative; overflow: hidden;
  min-height: 58vh; display: flex; align-items: flex-end;
  padding: 70px 5vw 64px;
  background: var(--color-navy);
}
.tour-page .tour-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-repeat: no-repeat;
  background-position: center -410px; /* base = widest screens (>=2560px); narrower widths overridden below */
}
.tour-page .tour-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(13,42,74,0.28) 0%, rgba(13,42,74,0.74) 100%);
}
.tour-page .tour-hero-content { position: relative; z-index: 2; max-width: 820px; color: #fff; }
.tour-page .rating-badge { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.tour-page .stars { color: var(--color-star); letter-spacing: 2px; }
.tour-page .rating-text { color: rgba(255,255,255,0.85); font-size: 0.88rem; }
.tour-page .tour-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 700; line-height: 1.12;
  margin-bottom: 1rem; color: #fff;
}
.tour-page .tour-hero-sub { color: rgba(255,255,255,0.9); font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.6rem; max-width: 660px; }
.tour-page .tour-hero-meta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.tour-page .tour-meta-pill {
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.32);
  color: #fff; font-size: 0.83rem; padding: 0.45rem 1rem; border-radius: var(--radius-pill);
  display: inline-block; white-space: nowrap; backdrop-filter: blur(4px);
}
.tour-page .tour-hero-price { font-size: 1.25rem; font-weight: 700; color: var(--color-star); margin-bottom: 1.2rem; }
.tour-page .tour-hero .btn .arrow { transition: transform 0.2s ease; }
.tour-page .tour-hero .btn:hover .arrow { transform: translateX(4px); }

/* --- TOUR BODY --- */
.tour-page .tour-body { padding: 64px 5vw 72px; background: var(--color-bg-soft); }
.tour-page .tour-body-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-template-areas:
    "intro booking"
    "rest  booking";
  column-gap: 3rem; row-gap: 0;
  align-items: start;
}
.tour-page .tour-intro { grid-area: intro; }
.tour-page .tour-rest { grid-area: rest; }
.tour-page #booking { grid-area: booking; }
.tour-page .tour-section { margin-bottom: 2.8rem; }
.tour-page .tour-section h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--color-navy); margin-bottom: 1.1rem; }
.tour-page .tour-section h3 { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--color-primary); text-transform: uppercase; letter-spacing: 1px; }
.tour-page .tour-section p { color: var(--color-text); line-height: 1.8; margin-bottom: 1rem; font-size: 1rem; }
.tour-page .safety-note { color: var(--color-text-muted); font-size: 0.88rem; margin-top: 0.4rem; }
.tour-page .tour-section iframe { border-radius: var(--radius-md); border: 1px solid var(--color-border); }

/* --- IMAGE ROTOR --- */
.tour-page .tour-rotor-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); background: var(--color-bg-blue); margin: 0.4rem 0 1rem;
}
.tour-page .tour-rotor-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; background-size: cover; background-position: center; }
.tour-page .tour-rotor-slide.is-active { opacity: 1; }
.tour-page .tour-rotor-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--color-border); background: rgba(255,255,255,0.85);
  color: var(--color-primary); font-size: 1.3rem; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s; backdrop-filter: blur(6px); box-shadow: var(--shadow-sm);
}
.tour-page .tour-rotor-btn:hover { background: var(--color-primary); color: #fff; transform: translateY(-50%) scale(1.06); }
.tour-page .tour-rotor-btn.prev { left: 16px; }
.tour-page .tour-rotor-btn.next { right: 16px; }
.tour-page .tour-rotor-dots { display: flex; justify-content: center; gap: 0.55rem; margin: 0 0 1.4rem; flex-wrap: wrap; }
.tour-page .tour-rotor-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(13,42,74,0.22); border: none; cursor: pointer; padding: 0; transition: background 0.25s, transform 0.25s; }
.tour-page .tour-rotor-dot.is-active { background: var(--color-primary); transform: scale(1.3); }

/* --- VIDEO EMBED --- */
.tour-page .tour-video { margin-bottom: 2.8rem; }
.tour-page .tour-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); background: #000; }
.tour-page .tour-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-page .tour-video-caption { color: var(--color-text-muted); font-size: 0.88rem; text-align: center; margin-top: 0.7rem; font-style: italic; }

/* --- HIGHLIGHTS --- */
.tour-page .highlights-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; padding: 0; }
.tour-page .highlights-list li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--color-text); font-size: 0.95rem; }
.tour-page .highlights-list li::before { content: '\2726'; color: var(--color-primary); flex-shrink: 0; font-size: 0.8rem; margin-top: 4px; }

/* --- SCHEDULE --- */
.tour-page .schedule-list { list-style: none; padding: 0; }
.tour-page .schedule-item { display: flex; gap: 1.2rem; padding: 0.9rem 0; border-bottom: 1px solid var(--color-border); }
.tour-page .schedule-time { color: var(--color-primary); font-size: 0.85rem; font-weight: 700; min-width: 112px; padding-top: 2px; }
.tour-page .schedule-event { color: var(--color-text); font-size: 0.95rem; }

/* --- UPGRADES --- */
.tour-page .upgrade-list { display: flex; flex-direction: column; gap: 0.6rem; }
.tour-page .upgrade-row { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.9rem 1.2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-sm); }
.tour-page .upgrade-row .price { color: var(--color-primary); font-weight: 700; }

/* --- WHAT TO BRING --- */
.tour-page .bring-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.8rem; }
.tour-page .bring-item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 0.9rem; text-align: center; font-size: 0.88rem; color: var(--color-text); box-shadow: var(--shadow-sm); }
.tour-page .bring-icon { font-size: 1.6rem; display: block; margin-bottom: 0.4rem; }

/* --- BOOKING SIDEBAR --- */
.tour-page .booking-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  position: sticky; top: 92px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.tour-page .booking-head {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff; padding: 18px 22px;
}
.tour-page .booking-head h3 { font-family: var(--font-display); font-size: 1.45rem; color: #fff; margin-bottom: 0.2rem; }
.tour-page .booking-tour-name { color: rgba(255,255,255,0.88); font-size: 0.85rem; margin: 0; }
.tour-page .booking-body { padding: 20px 22px 22px; }
.tour-page .booking-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.tour-page .booking-price { font-size: 2.3rem; font-family: var(--font-display); font-weight: 700; color: var(--color-primary); line-height: 1; }
.tour-page .booking-price .old-price { font-size: 1.05rem; color: var(--color-text-muted); text-decoration: line-through; margin-right: 0.4rem; }
.tour-page .booking-price .per { font-size: 0.82rem; color: var(--color-text-muted); font-family: var(--font-body); font-weight: 400; }
.tour-page .booking-save { background: #e8f7ee; color: #1f8a4c; border: 1px solid #b6e6c8; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); }
.tour-page .booking-kids { color: var(--color-text-muted); font-size: 0.84rem; margin-top: 0.5rem; margin-bottom: 1rem; }
.tour-page .booking-kids s { opacity: 0.7; }
.tour-page .booking-divider { border: none; border-top: 1px solid var(--color-border); margin: 1.1rem 0; }
.tour-page .booking-details { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 1.1rem; }
.tour-page .booking-detail { display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; color: var(--color-text); padding: 0.4rem 0; }
.tour-page .booking-detail + .booking-detail { border-top: 1px dashed var(--color-border); }
.tour-page .booking-detail-label { color: var(--color-text-muted); }
.tour-page .booking-detail .inc { color: #1f8a4c; font-weight: 600; }
.tour-page .promo-box { background: var(--color-bg-blue); border: 1px solid var(--color-primary-light); border-radius: var(--radius-md); padding: 0.8rem 1rem; margin-bottom: 0.9rem; }
.tour-page .promo-box p { color: var(--color-primary-dark); font-size: 0.88rem; font-weight: 700; margin: 0 0 0.15rem; }
.tour-page .promo-box small { color: var(--color-text-muted); font-size: 0.78rem; }
.tour-page .promo-box.gold { background: #fff8e1; border-color: #f0d27a; }
.tour-page .promo-box.gold p { color: #9a6b16; }
.tour-page .fh-calendar { margin: 1.1rem 0 0.4rem; }
.tour-page .fh-placeholder { background: var(--color-bg-blue); border: 1px dashed var(--color-primary-light); border-radius: var(--radius-md); padding: 16px; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.5; margin: 1.1rem 0 0.4rem; }
.tour-page .booking-card .btn-book {
  display: block; width: 100%; text-align: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff; border: none;
  padding: 1rem; border-radius: var(--radius-pill); font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease; margin-top: 0.4rem; text-decoration: none;
  box-shadow: 0 8px 20px rgba(29,111,224,0.28);
}
.tour-page .booking-card .btn-book:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(29,111,224,0.38); }
.tour-page .booking-guarantee { text-align: center; color: var(--color-text-muted); font-size: 0.82rem; margin-top: 1rem; }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .tour-page .tour-body-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "booking"
      "rest";
  }
  .tour-page #booking { margin-bottom: 2.2rem; }
  .tour-page .booking-card { position: static; }
}
@media (max-width: 768px) {
  .tour-page .highlights-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tour-page .tour-rotor-btn { width: 38px; height: 38px; font-size: 1.1rem; }
  .tour-page .tour-rotor-btn.prev { left: 8px; }
  .tour-page .tour-rotor-btn.next { right: 8px; }
}
/* Hero background crop, tuned per viewport width (desktop-first max-width cascade).
   Keep these ordered widest -> narrowest so the matching rule resolves correctly.
   >=2560px : center -410px (base rule above)
   1790-2559: center bottom
   769-1789 : center -250px
   <=768    : center */
@media (max-width: 2559px) { .tour-page .tour-hero-bg { background-position: center bottom; } }
@media (max-width: 1789px) { .tour-page .tour-hero-bg { background-position: center center; } }
@media (max-width: 768px)  { .tour-page .tour-hero-bg { background-position: center; } }