/* ============================================================
  tour-detail.css
  Styles for all tour detail pages (tmt_template8.asp and beyond).
  Requires :root variables defined in the page <style> block:
    --navy, --navy2, --gold, --gold2, --cream, --white, --text, --wa, --radius
============================================================ */

/* -- PAGE WRAP -- */
.page-wrap{max-width:900px;margin:0 auto;padding:48px 24px 64px;}

/* ============================================================
  TOUR DETAIL PAGE STYLES
  Use the :root variables for colour consistency.
============================================================ */

/* -- OVERVIEW -- */
.tour-overview{margin-bottom:48px;}
.tour-overview h2{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;color:var(--gold2);margin-bottom:16px;}
.tour-overview h2 em{font-style:italic;color:var(--white);}
.tour-overview p{font-size:1rem;line-height:1.8;color:var(--cream);margin-bottom:14px;}

/* -- OPTIONS GRID
   1 card  ? full width
   2 cards ? side by side, equal width
   3 cards ? 2 top, 1 bottom-left
   4 cards ? 2×2
   All automatic — just add or remove .tour-option cards.
-- */
.tour-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}

/* -- OPTION CARD : equal prominence base style -- */
.tour-option{position:relative;background:var(--navy2);border:1px solid rgba(200,135,42,0.28);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;}

/* -- BADGE : standalone centred oval, inside .tour-option
   Usage: <span class="option-badge">&#9733; FULL - immersive experience &#9733;</span>
          <span class="option-badge">&#9733; EXPRESS - when time is limited &#9733;</span>
   Omit entirely on cards that need no badge.
-- */
.option-badge{display:table;margin:0 auto 20px;background:var(--gold2);color:var(--navy);font-size:0.75rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;padding:6px 20px;border-radius:50px;box-shadow:0 2px 12px rgba(240,176,74,0.4);}

/* -- CARD INNER ELEMENTS -- */
.tour-option-title{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--gold2);margin-bottom:6px;}
.tour-option-meta{font-size:0.8rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--white);margin-bottom:18px;}
.tour-option > p{font-size:0.95rem;line-height:1.75;color:var(--gold2);opacity:0.85;margin-bottom:18px;}
.tour-option p.tour-option-meta{color:var(--white);}

/* -- PHOTO : one image per option card, full width -- */
.option-photo{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:calc(var(--radius) - 4px);margin-bottom:18px;display:block;}

/* -- OPTION PHOTO SLIDER : cycles 3-5 photos, crossfade, loops -- */
.option-photo-slider{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);margin-bottom:16px;}

.option-photo-slider .option-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease-in-out;}
.option-photo-slider .option-photo.is-active{opacity:1;}
@media (prefers-reduced-motion:reduce){.option-photo-slider .option-photo{transition:none}}

/* -- HIGHLIGHTS LIST -- */
.option-highlights{list-style:none;display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:24px;flex:1;}
.option-highlights li{display:flex;align-items:flex-start;gap:10px;font-size:0.9rem;color:var(--cream);line-height:1.5;}
.option-highlights li::before{content:'\2714';color:var(--gold2);font-size:0.78rem;font-weight:700;margin-top:2px;flex-shrink:0;}

/* -- ROUTE PICKER : Table Mountain half day only
   Remove this block on all other pages.
-- */
.route-picker{margin-bottom:0px;}
.route-picker-label{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:block;}
.route-picker-options{display:flex;flex-direction:column;gap:8px;}
.route-picker-options label{display:flex;align-items:center;gap:8px;font-size:0.88rem;color:var(--cream);cursor:pointer;background:rgba(200,135,42,0.07);border:1px solid rgba(200,135,42,0.18);border-radius:6px;padding:7px 12px;}
.route-picker-options label:hover{border-color:rgba(200,135,42,0.45);background:rgba(200,135,42,0.13);}
.route-picker-options input[type="radio"]{accent-color:var(--gold2);}

.route-desc{font-size:0.82rem;color:var(--gold2);font-style:italic;margin-top:8px;margin-bottom:8px;min-height:1.2em;}

/* -- OPTION CTA : Price + booking button, pinned to card base -- */
.option-cta{display:flex;align-items:center;gap:100px;border-top:1px solid rgba(200,135,42,0.15);padding-top:8px;margin-top:auto;}

.option-price{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;color:var(--white);}
.option-price span{font-family:'Lato',sans-serif;font-size:0.78rem;font-weight:400;color:var(--text);display:block;margin-top:1px;}
.option-book{display:inline-block;text-decoration:none;flex-shrink:0;transition:transform 0.15s,opacity 0.15s;}
.option-book:hover{transform:translateY(-2px);opacity:0.88;}

/* -- WHATSAPP CTA : Overnight Trails only — replaces .option-cta -- */
.option-wa-cta{border-top:1px solid rgba(200,135,42,0.15);padding-top:18px;margin-top:auto;}
.option-wa-cta p{font-size:0.88rem;color:var(--text);line-height:1.6;margin-bottom:12px;}
.option-wa-btn{display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:var(--white);font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;padding:10px 20px;border-radius:50px;transition:opacity 0.2s,transform 0.15s;}
.option-wa-btn:hover{opacity:0.88;transform:translateY(-1px);}

/* -- PRACTICAL INFO : Adventure tours only
   Keep on: Table Mountain, Lions Head, Caving, Hike & Abseil
   Remove on: Peninsula, Winelands, Historic City, Overnight Trails
-- */
.practical-info{margin-top:40px;background:rgba(200,135,42,0.06);border:1px solid rgba(200,135,42,0.18);border-radius:var(--radius);padding:28px 32px;}
.practical-info h3{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;color:var(--gold2);margin-bottom:16px;}
.practical-info ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;}
.practical-info ul li{display:flex;align-items:flex-start;gap:10px;font-size:0.88rem;color:var(--cream);line-height:1.55;}
.practical-info ul li::before{content:'›';color:var(--gold2);font-weight:700;flex-shrink:0;}

/* -- PAGE FOOTER -- */
.page-footer{text-align:center;font-size:0.75rem;color:var(--cream);opacity:0.55;padding:16px 0 8px;}
.page-footer a{color:inherit;}

/* -- RESPONSIVE -- */
@media(max-width:900px){
  nav{padding:0 24px;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .hero-content{padding:60px 24px;}
}
@media(max-width:600px){
  nav{padding:0 16px;}
  .hero-content{padding:0 20px 30px;}
  .hero{height:100vw;}
  .hero-bg{background-size:260%;background-position:center top;background-repeat:no-repeat;}
  .page-wrap{padding:28px 16px 48px;}
  footer{flex-direction:column;justify-content:center;align-items:center;text-align:center;}
  .tour-options{grid-template-columns:1fr;}
  .practical-info ul{grid-template-columns:1fr;}
  .option-cta{flex-wrap:wrap;}
  .tour-option{padding:22px 18px 18px;}
  .practical-info{padding:22px 18px;}
}