/* ==========================================================================
   Holiday Vibez — India Pilgrimage Tours (.plg)
   Layers on top of listing.css: two filter axes, state-grouped sections,
   trust strip, emotional block. Mobile-first about vertical space — the
   packages must be reachable without scrolling past a wall of chrome.
   ========================================================================== */

/* ---------- Trust strip: "we never sell darshan" ---------- */
.plg-trust { background: #fffbeb; border-bottom: 1px solid #fde68a; }
.plg-trust-in { max-width: 1180px; margin: 0 auto; padding: 13px 20px; display: flex; align-items: flex-start; gap: 11px; }
.plg-trust i { color: #b45309; font-size: 1.15rem; line-height: 1.4; flex: 0 0 auto; }
.plg-trust p { margin: 0; font-size: 13.2px; line-height: 1.55; color: #78350f; }
.plg-trust strong { color: #7c2d12; }

/* ---------- Filters (two axes) ----------
   The site header is sticky at top:0 with z-index 1030 and never hides (app.js only
   toggles a shadow class on it). A filter bar sticking at top:0 with a lower z-index
   therefore slides UNDER the header and disappears. So: it parks BELOW the header —
   JS sets --plg-top from the header's real height, since that height differs between
   mobile and desktop — and it slides away on scroll-down to hand the screen back to
   the cards, returning the moment the user scrolls up to reach for a filter. */
.plg-filters {
  background: #fff;
  border-bottom: 1px solid var(--hv-line);
  position: sticky;
  top: var(--plg-top, 0px);
  z-index: 25;
  transition: transform .26s ease;
  will-change: transform;
}
.plg-filters.is-away { transform: translateY(-130%); }
@media (prefers-reduced-motion: reduce) { .plg-filters { transition: none; } }
.plg-filter-row { max-width: 1180px; margin: 0 auto; padding: 9px 20px; display: flex; align-items: center; gap: 12px; }
.plg-filter-row + .plg-filter-row { border-top: 1px dashed var(--hv-line); }
.plg-filter-label { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hv-muted); }
.plg-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.plg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: #374151; background: #fff; border: 1.5px solid var(--hv-line); border-radius: 50px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.plg-chip:hover { border-color: var(--hv-primary); color: var(--hv-primary); }
.plg-chip.on { background: var(--hv-primary); border-color: var(--hv-primary); color: #fff; }
.plg-chip .n { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; font-size: 10.5px; font-weight: 700; border-radius: 50px; background: #eef3ff; color: var(--hv-primary); }
.plg-chip.on .n { background: rgba(255,255,255,.25); color: #fff; }
/* A faith we do not cover yet still shows — clicking it offers to plan one. */
.plg-chip[data-empty="1"] { opacity: .62; }
.plg-chip[data-empty="1"] .n { background: #f3f4f6; color: var(--hv-muted); }

/* ---------- State sections ---------- */
.plg-state + .plg-state { margin-top: 34px; }
.plg-state[hidden] { display: none; }
.plg-state-h { display: flex; align-items: center; gap: 10px; font-size: 1.28rem; font-weight: 800; color: var(--hv-ink); margin: 0 0 14px; padding-bottom: 9px; border-bottom: 2px solid var(--hv-line); }
.plg-state-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; font-size: 11.5px; font-weight: 700; border-radius: 50px; background: #eef3ff; color: var(--hv-primary); }
.plg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plg-item[hidden] { display: none; }

/* ---------- Empty state ---------- */
.plg-empty { text-align: center; padding: 44px 20px; border: 2px dashed var(--hv-line); border-radius: 14px; }
.plg-empty i { font-size: 2rem; color: var(--hv-primary); }
.plg-empty h3 { font-size: 1.15rem; font-weight: 800; color: var(--hv-ink); margin: 12px 0 8px; }
.plg-empty p { font-size: 14px; color: var(--hv-body); max-width: 480px; margin: 0 auto 16px; line-height: 1.6; }
.plg-empty-cta { border: none; background: var(--hv-primary); color: #fff; font-weight: 600; font-size: .9rem; border-radius: 9px; padding: .62rem 1.1rem; display: inline-flex; align-items: center; gap: 7px; }
.plg-empty-cta:hover { background: #0033a8; }

/* ---------- Why / emotional block ---------- */
.plg-why { background: #f8faff; border-top: 1px solid var(--hv-line); }
.plg-why-in { max-width: 780px; margin: 0 auto; padding: 44px 20px; text-align: center; }
.plg-why h2 { font-size: clamp(21px, 3vw, 29px); font-weight: 800; color: var(--hv-ink); margin: 0 0 14px; }
.plg-why p { font-size: 15px; line-height: 1.75; color: var(--hv-body); margin: 0 0 12px; }

/* ---------- Related links ---------- */
.plg-related { border-top: 1px solid var(--hv-line); background: #fff; }
.plg-related-in { max-width: 1180px; margin: 0 auto; padding: 30px 20px 42px; }
.plg-related h2 { font-size: 1.05rem; font-weight: 800; color: var(--hv-ink); margin: 0 0 14px; }
.plg-related-links { display: flex; flex-wrap: wrap; gap: 9px; }
.plg-related-links a { font-size: 13px; font-weight: 600; color: var(--hv-primary); background: #eef3ff; border-radius: 50px; padding: 7px 15px; text-decoration: none; transition: background .15s; }
.plg-related-links a:hover { background: #dce6ff; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  /* Same reasoning as listing.css: wrapped chips ate a screen of height. One swipeable
     row per axis keeps both filters usable and the cards near the top. */
  .plg-filter-row { padding: 7px 14px; gap: 9px; }
  .plg-chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .plg-chips::-webkit-scrollbar { display: none; }
  .plg-chip { flex: 0 0 auto; scroll-snap-align: start; }
  .plg-filter-label { font-size: 10px; }
  .plg-trust-in { padding: 11px 14px; gap: 9px; }
  .plg-trust p { font-size: 12.4px; }
  .plg-grid { grid-template-columns: 1fr; }
  .plg-state-h { font-size: 1.12rem; }
  .plg-why-in { padding: 32px 16px; }
  .plg-why p { font-size: 14px; }
}