/* ─────────────────────────────────────────────────────────────
   package-detail-v2.css — compact, content-first package detail
   Scoped to body.pd2 so no other page is affected.
   Brand: saffron #E8832A · deep #1A2A3A · cream #FDF6EE · border #F0DCC0
   ───────────────────────────────────────────────────────────── */

/* ── Hero: slimmer, matches blog-detail dark hero ── */
.pd2 .detail-hero { height: 320px; min-height: 0; background: #1A2A3A; }
/* keep the banner photo, but with a cleaner navy tint instead of heavy black */
.pd2 .detail-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd2 .detail-hero > img,
.pd2 .detail-hero .detail-hero-img img { filter: saturate(1.05); }
.pd2 .detail-hero .detail-hero-overlay {
  background: linear-gradient(to top, rgba(26,42,58,.88) 0%, rgba(26,42,58,.35) 55%, rgba(26,42,58,.15) 100%);
}
/* pages whose hero has no overlay div (inline img + text) get the same tint via ::after */
.pd2 .detail-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,42,58,.88) 0%, rgba(26,42,58,.35) 55%, rgba(26,42,58,.15) 100%);
  pointer-events: none;
}
.pd2 .detail-hero .detail-hero-overlay { display: none; } /* avoid double-tint where overlay div exists */
.pd2 .detail-hero .detail-hero-text,
.pd2 .detail-hero .detail-hero-content { z-index: 2; }
.pd2 .detail-hero h1 { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.2; margin-top: 10px !important; }
.pd2 .detail-hero .meta { margin-top: 10px; font-size: 13px; gap: 14px; }
.pd2 .detail-hero .breadcrumb { font-size: 12px; }

/* ── Layout: tighter gutter, white article card left ── */
.pd2 .section-light { padding: 10px 0 40px !important; }
.pd2 .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; align-items: start; }
.pd2 .detail-main {
  background: #fff;
  border: 1px solid #F0DCC0;
  border-radius: 14px;
  padding: 18px 26px 24px;
  box-shadow: 0 2px 14px rgba(26, 42, 58, .05);
  font-size: 14px;
}

/* ── Compact typography scale ── */
.pd2 .detail-main h3 {
  font-size: 17px; color: #1A2A3A; margin: 0 0 14px !important;
  padding-left: 12px; border-left: 3px solid #E8832A; line-height: 1.3;
}
.pd2 .detail-main h4 { font-size: 14px; }
.pd2 .detail-main p { font-size: 14px; line-height: 1.7; }

/* ── Sticky pill section nav (replaces tab bar) ── */
.pd2 .pd2-nav {
  position: sticky; top: 68px; z-index: 40;
  display: flex; gap: 6px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  padding: 8px 0 10px; margin: -6px 0 4px;
  border-bottom: 1px solid #F0DCC0;
}
.pd2 .pd2-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 30px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: #5b6b7a; background: #FDF6EE; border: 1px solid #F0DCC0;
  transition: all .15s ease;
}
.pd2 .pd2-nav a i { font-size: 11px; color: #E8832A; }
.pd2 .pd2-nav a:hover { color: #E8832A; border-color: #E8832A; }
.pd2 .pd2-nav a.active { background: #E8832A; border-color: #E8832A; color: #fff; }
.pd2 .pd2-nav a.active i { color: #fff; }

/* ── Tabs become stacked sections ── */
.pd2 .tab-panel { display: block !important; padding: 14px 0 4px; scroll-margin-top: 128px; }
.pd2 .tab-panel + .tab-panel { border-top: 1px dashed #F0DCC0; }

/* ── Highlights: compact stat chips ── */
.pd2 .highlights-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.pd2 .highlight-box { padding: 10px 8px; border-radius: 10px; }
.pd2 .highlight-box i { font-size: 16px; margin-bottom: 4px; }
.pd2 .highlight-box strong { font-size: 12px; }
.pd2 .highlight-box span { font-size: 11px; }

/* ── Dham pills: smaller ── */
.pd2 .dham-strip { gap: 8px; margin: 0 0 14px !important; }
.pd2 .dham-pill { padding: 5px 13px; font-size: 12px; border-radius: 30px; }

/* ── Itinerary: compact timeline ── */
.pd2 .itinerary { position: relative; }
.pd2 .itinerary-day { display: flex; gap: 14px; padding: 0 0 18px; position: relative; margin: 0; border: none; }
.pd2 .itinerary-day::before {
  content: ""; position: absolute; left: 16px; top: 34px; bottom: 0;
  width: 2px; background: #F0DCC0;
}
.pd2 .itinerary-day:last-child::before { display: none; }
.pd2 .itinerary-day .day-num {
  flex: 0 0 33px; width: 33px; height: 33px; border-radius: 50%;
  background: #FDF6EE; border: 2px solid #E8832A; color: #E8832A;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; margin: 0;
}
.pd2 .itinerary-day .day-content { padding: 0 0 4px; }
.pd2 .itinerary-day .day-content h4 { font-size: 14px; color: #1A2A3A; margin: 6px 0 4px; }
.pd2 .itinerary-day .day-content p { font-size: 13.5px; line-height: 1.65; color: #5b6b7a; margin: 0; }

/* ── Inclusions / exclusions checklists ── */
.pd2 .include-item { font-size: 13px; line-height: 1.5; display: flex; gap: 8px; align-items: baseline; }
.pd2 .include-item i.fa-check { color: #2E8B6E; }
.pd2 .include-item.no { color: #8a8f98; }

/* ── Price rows, gallery, FAQ compaction ── */
.pd2 .price-row { padding: 9px 14px; font-size: 13px; }
.pd2 .gallery-grid { gap: 8px; }
.pd2 .gallery-grid img { height: 120px; border-radius: 8px; }
.pd2 .faq-item .faq-q { font-size: 13.5px; padding: 12px 14px; }
.pd2 .faq-item .faq-a { font-size: 13px; line-height: 1.65; }

/* ── Right rail: sticky booking card (functionality untouched) ── */
.pd2 .detail-sidebar { position: sticky; top: 84px; }

/* ── Responsive ── */
@media (max-width: 991px) {
  .pd2 .detail-layout { grid-template-columns: 1fr; }
  .pd2 .detail-sidebar { position: static; }
  .pd2 .detail-hero { height: 260px; }
  .pd2 .pd2-nav { top: 58px; }
}
@media (max-width: 600px) {
  .pd2 .detail-main { padding: 16px 14px 20px; border-radius: 10px; }
  .pd2 .highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .pd2 .tab-panel > div[style*="grid-template-columns:1fr 1fr"],
  .pd2 .tab-panel > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}