/* =========================================================
   Bon Voyage — TOUR DETAIL PAGE (public website) — LIGHT
   /assets/css/tours.css
   Uses tokens from website.css:
   --brand  --brand-2  --logo-accent  --logo-h  --text  --muted
   --card  --bg  --line  --shadow
   ========================================================= */

/* ---------- NAV / HEADER under top bar ---------- */
/* Let header.css control the look; we only position it slightly
   lower so it sits nicely under the black top bar. */
body.tour-page .nav-glass{
  position: relative;              /* no overlay, just a normal block */
  top: auto;
  left: auto;
  transform: none;
  width: min(1180px, calc(100% - 24px));
  margin: 3rem auto 0;          /* space under top bar */
}

/* IMPORTANT:
   We do NOT override nav-logo, nav-links, nav-contact here.
   That way they look EXACTLY like on the index page (same pill,
   same colours, same Contact hover behaviour). */

/* ---------- Light subhead band under the nav ---------- */
body.tour-page .subhead{
  margin-top: .75rem;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:1.25rem 0 1rem;
}
body.tour-page .subhead h1{
  margin:0;
  color:var(--brand);
  font-family:'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  letter-spacing:.2px;
}

/* ---------- Layout ---------- */
body.tour-page .container{
  width:min(1200px,92%);
  margin-inline:auto;
}
body.tour-page .section{
  padding:1.25rem 0 2.25rem;
}
body.tour-page .grid-two{
  display:grid;
  gap:1.25rem;
  grid-template-columns:1.45fr .85fr;
}
@media (max-width:1000px){
  body.tour-page .grid-two{
    grid-template-columns:1fr;
  }
}

/* ---------- LIGHT SURFACES (replace dark cards) ---------- */
body.tour-page .card{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem;
  box-shadow:var(--shadow);
}
body.tour-page .card + .card{
  margin-top:1rem;
}
body.tour-page .muted{
  color:var(--muted);
}

/* Gallery */
body.tour-page .gallery{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:.7rem;
}
body.tour-page .gallery .hero{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
}
body.tour-page .thumbs{
  display:flex;
  gap:.55rem;
  margin-top:.6rem;
  overflow:auto;
}
body.tour-page .thumbs img{
  width:110px;
  height:78px;
  object-fit:cover;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  flex:0 0 auto;
}
body.tour-page .thumbs img.active{
  border-color: var(--brand);
}

/* Pills under summary — soft chips */
body.tour-page .pillrow{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin:.7rem 0 0;
}
body.tour-page .pill{
  background: color-mix(in srgb, var(--brand) 6%, #fff 94%);
  border:1px solid color-mix(in srgb, var(--brand) 18%, var(--line) 82%);
  color: var(--text);
  border-radius:999px;
  padding:.35rem .7rem;
}

/* Right column */
body.tour-page .aside .price{
  font-weight:800;
  font-size:1.35rem;
  color:var(--brand);
}
body.tour-page .aside .box{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1rem;
  margin-top:1rem;
}
body.tour-page .aside .list{
  margin:.55rem 0 0 1.1rem;
}

/* CTAs */
body.tour-page .cta-bar{
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  margin-top:.9rem;
}
body.tour-page .btn.btn-primary{
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff;
  border:0;
  box-shadow:0 8px 18px rgba(57,97,17,.25);
}
body.tour-page .btn.btn-secondary{
  background:#e9eef4;
  color:#0e151c;
  border:1px solid #253040;
}

/* Itinerary */
body.tour-page .itinerary{
  display:grid;
  gap:.85rem;
  padding-left:1.1rem;
}
body.tour-page .itxt{
  margin-top:.35rem;
}

/* Related cards — light */
body.tour-page .grid-cards{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:900px){
  body.tour-page .grid-cards{
    grid-template-columns:1fr;
  }
}
body.tour-page .tour{
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:transform .18s ease, box-shadow .18s ease;
}
body.tour-page .tour__media img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
}
body.tour-page .tour__body{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:.9rem;
  min-height:170px;
}
body.tour-page .tour__body p{
  margin:0;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
body.tour-page .tour__row{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-top:auto;
}
body.tour-page .tour__price{
  font-weight:700;
  color:var(--brand);
}

/* Breadcrumb chips — light */
body.tour-page .crumbs{
  margin-top:.55rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
}
body.tour-page .crumb{
  font-size:.86rem;
  padding:.14rem .55rem;
  border-radius:10px;
  background:#f3f6f2;
  border:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
  font-family:'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body.tour-page .crumb.current{
  opacity:.85;
  border-style:dashed;
  background:transparent;
  color:var(--muted);
}
body.tour-page .sep{
  opacity:.55;
}

/* Footer spacing on this page */
body.tour-page .footer-modal{
  margin-top:1.25rem;
}