/* ============================================
   PACKAGE DETAIL PAGE
   ============================================ */
.pkg-hero{
  background: var(--navy);
  color: var(--cream);
  padding: 200px 0 80px;
  position: relative;
  overflow: hidden;
}
.pkg-hero-meta{
  display:flex;
  gap: 36px;
  flex-wrap:wrap;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line-light);
}
.pkg-hero-meta div{
  font-family: var(--mono);
  font-size: 12.5px;
  color: rgba(247,243,234,0.7);
  display:flex;
  align-items:center;
  gap:8px;
}
.pkg-hero-meta strong{
  color: var(--cream);
  font-family: var(--sans);
  font-weight:700;
}
.pkg-hero h1{
  font-size: clamp(38px, 5.5vw, 62px);
  margin-top: 16px;
}
.pkg-hero-cities{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--coral);
  margin-top: 14px;
}

.pkg-included{
  background: var(--cream-deep);
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.included-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.included-grid h4{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--teal-deep);
}
.included-grid ul li{
  font-size: 14px;
  color: var(--ink-soft);
  padding: 7px 0 7px 20px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.included-grid ul li::before{
  content:'+';
  position:absolute; left:0; top:7px;
  color: var(--coral-deep);
  font-family: var(--mono);
}
@media (max-width: 760px){
  .included-grid{ grid-template-columns: 1fr; }
}

/* Day-by-day timeline */
.itinerary{
  padding: 100px 0;
}
.itinerary-intro{
  max-width: 600px;
  margin-bottom: 64px;
}
.day-block{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
}
.day-block:last-child{ border-bottom: 1px solid var(--line); }
.day-marker{
  position: sticky;
  top: 100px;
  align-self: start;
}
.day-marker .day-badge{
  display:inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--coral);
  color: var(--cream);
  padding: 7px 14px;
  margin-bottom: 10px;
}
.day-marker .day-date{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}
.day-body h3{
  font-size: 28px;
  margin-bottom: 18px;
  max-width: 90%;
}
.day-body .day-text{
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 680px;
  margin-bottom: 24px;
}
.day-highlights{
  margin-bottom: 24px;
}
.day-highlights li{
  font-size: 14px;
  color: var(--ink);
  padding: 8px 0 8px 22px;
  position:relative;
  border-bottom: 1px dashed var(--line);
  max-width: 600px;
}
.day-highlights li::before{
  content:'→';
  position:absolute; left:0;
  color: var(--teal-deep);
}
.day-hotel{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  background: var(--cream-deep);
  border-left: 3px solid var(--coral);
  padding: 14px 20px;
  font-size: 13.5px;
  margin-top: 8px;
}
.day-hotel .stars{ color: var(--coral-deep); letter-spacing:1px; font-size:12px;}

@media (max-width: 760px){
  .day-block{ grid-template-columns: 1fr; gap: 18px; }
  .day-marker{ position:static; display:flex; align-items:center; gap:14px; }
}

/* Package switcher tabs (on packages listing) */
.pkg-filter{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 56px;
}
.pkg-filter button{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 20px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: all .2s ease;
}
.pkg-filter button.active, .pkg-filter button:hover{
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}

/* CTA band */
.cta-band{
  background: var(--coral);
  color: var(--cream);
  padding: 90px 0;
  text-align:center;
}
.cta-band h2{
  font-size: clamp(30px, 4.5vw, 48px);
  margin: 18px 0 30px;
  max-width: 640px;
  margin-left:auto; margin-right:auto;
}
.cta-band .eyebrow{ color: var(--navy); justify-content:center; }
.cta-band .eyebrow::before{ background: var(--navy); }
.cta-band-actions{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}
.cta-band .btn-coral{
  background: var(--navy);
  border-color: var(--navy);
}
.cta-band .btn-coral:hover{ background: var(--ink); border-color:var(--ink); }