/* ================================================================
   GhanaTRVL — Tours Listing Page Addon
   File: tours-listing-addon-v4.css
   Depends on: custom-v4.css (tokens, .rp-hero, .rp-breadcrumb, .h-eyebrow, .hero-h1,
               .rp-statsbar), result-pages-addon-v4.css (.rp-wrap, .fpill)

   Tours reuses --mv (mid violet) as its brand accent — sample design's --tours:#592d8c
   is the exact same value already in custom-v4.css §01, so no new token needed.

   Structure:
   01. Hero Stat Boxes (.tr-hero-stat*)
   02. Category Tab Strip (.tr-cat-tab*)
   03. Section Divider (.tr-section-divider*)
   04. Featured Tour Card (.tr-feat-*)
   05. Grid Tour Card (.tr-card-*)
   06. Submit CTA (.tr-submit-cta)

   Last updated: 2026-07-17
================================================================ */


/* ================================================================
   01. HERO STAT BOXES
   ---------------------------------------------------------------
   Sits inline beside the H1 in .hero-row, not a separate strip —
   different placement from .rp-statsbar (used by §02 instead).
   DUMMY DATA as of 2026-07-17 — Marcel to provide real counts;
   see __tours_section_hero.php for the marked placeholder values.
================================================================ */

.hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 32px;
}

.tr-hero-stats {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}

.tr-hero-stat {
  text-align: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  padding: 14px 22px;
}
.tr-hero-stat-num {
  font-family: var(--ff-h);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ye);
  letter-spacing: -.04em;
  line-height: 1;
}
.tr-hero-stat-label {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-top: 2px;
}

@media (max-width: 767px) {
  .tr-hero-stats { display: none; }
}


/* ================================================================
   02. CATEGORY TAB STRIP
   ---------------------------------------------------------------
   Reuses .rp-statsbar (result-pages-addon-v4.css §03) for the dark
   blurred strip anchored to the hero base; these are the tab items
   inside it. PLACEHOLDER as of 2026-07-17 — no itrvl_tours_categories
   SP exists yet; __tours_section_hero.php renders a fixed placeholder
   list pending that SP.
================================================================ */

.tr-cat-tabs {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  gap: 0;
  scrollbar-width: none;
}
.tr-cat-tabs::-webkit-scrollbar { display: none; }

.tr-cat-tab {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  padding: 13px 18px;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  cursor: pointer;
  transition: all .18s;
}
.tr-cat-tab:hover { color: rgba(255,255,255,.75); }
.tr-cat-tab.active { color: var(--ye); border-bottom-color: var(--ye); }
.tr-cat-tab:disabled { opacity: .5; cursor: default; }
.tr-cat-tab-count {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  margin-left: 4px;
}
.tr-cat-tab.active .tr-cat-tab-count { color: rgba(246,238,39,.6); }


/* ================================================================
   03. SECTION DIVIDER
================================================================ */

.tr-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 18px;
}
.tr-section-divider-label {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mu);
  white-space: nowrap;
}
.tr-section-divider-line { flex: 1; height: 1px; background: var(--rule); }
.tr-section-divider-count {
  font-family: var(--ff-h);
  font-size: 11px;
  font-weight: 600;
  color: var(--mu);
  white-space: nowrap;
}


/* ================================================================
   04. FEATURED TOUR CARD
   ---------------------------------------------------------------
   First row of the load-all result set — sortorder/tour_random_number
   in itrvl_tours_results_v4 already gives a reasonable "random within
   priority tier" pick, so PHP just takes index 0 rather than needing
   a dedicated "featured" flag/SP.
================================================================ */

.tr-feat-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .22s, box-shadow .22s;
}
.tr-feat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(35,15,66,.12);
}

.tr-feat-img { flex: 0 0 45%; position: relative; min-height: 320px; }
.tr-feat-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.tr-feat-card:hover .tr-feat-img img { transform: scale(1.04); }

.tr-feat-badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--mv);
  color: #fff;
  font-family: var(--ff-h);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  z-index: 2;
}

.tr-feat-dur-block {
  position: absolute; bottom: 0; left: 0;
  background: rgba(35,15,66,.95);
  padding: 12px 16px;
  z-index: 2;
}
.tr-feat-dur-num {
  font-family: var(--ff-h);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ye);
  line-height: 1;
  letter-spacing: -.04em;
}
.tr-feat-dur-unit {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.tr-feat-body {
  flex: 1;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tr-feat-cat {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mv);
  background: rgba(89,45,140,.08);
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 10px;
  align-self: flex-start;
}
.tr-feat-title {
  font-family: var(--ff-h);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--dv);
  letter-spacing: -.02em;
  margin-bottom: 6px;
  line-height: 1.15;
}
.tr-feat-operator {
  font-size: 12px;
  color: var(--mu);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 14px;
}
.tr-feat-operator i { font-size: 10px; color: var(--mv); }
.tr-feat-desc {
  font-family: var(--ff-s);
  font-size: .9rem;
  color: var(--mu);
  line-height: 1.7;
  margin-bottom: 18px;
}

.tr-feat-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.tr-chip {
  font-family: var(--ff-h);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mu);
  background: var(--wh2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tr-chip i { font-size: 9px; color: var(--mv); }

.tr-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--dv);
  color: #fff;
  font-family: var(--ff-h);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  align-self: flex-start;
}
.tr-feat-cta:hover { background: var(--mv); color: #fff; }
.tr-feat-cta i { transition: transform .15s; }
.tr-feat-card:hover .tr-feat-cta i { transform: translateX(3px); }

@media (max-width: 991px) { .tr-feat-img { flex: 0 0 40%; } }
@media (max-width: 767px) {
  .tr-feat-card { flex-direction: column; }
  .tr-feat-img { flex: 0 0 auto; min-height: 200px; }
}


/* ================================================================
   05. GRID TOUR CARD
================================================================ */

.tr-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .22s, box-shadow .22s;
  height: 100%;
}
.tr-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(35,15,66,.1);
}

.tr-card-img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/16; background: var(--wh2); }
.tr-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.tr-card:hover .tr-card-img-wrap img { transform: scale(1.06); }

.tr-card-cat-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--mv);
  color: #fff;
  font-family: var(--ff-h);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
}

.tr-card-dur-badge {
  position: absolute; bottom: 0; left: 0;
  background: rgba(35,15,66,.9);
  color: var(--ye);
  font-family: var(--ff-h);
  padding: 5px 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.tr-card-body { flex: 1; padding: 12px; display: flex; flex-direction: column; }
.tr-card-title {
  font-family: var(--ff-h);
  font-size: .83rem;
  font-weight: 700;
  color: var(--dv);
  line-height: 1.2;
  margin-bottom: 4px;
}
.tr-card-operator {
  font-size: 10.5px;
  color: var(--mu);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.tr-card-operator i { font-size: 9px; color: var(--mv); }

.tr-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tr-card-chip {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--mu);
  background: var(--wh2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tr-card-chip i { font-size: 8.5px; color: var(--mv); }

.tr-card-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: flex-end;
}
.tr-card-cta {
  font-family: var(--ff-h);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mv);
  display: flex;
  align-items: center;
  gap: 5px;
}
.tr-card-cta i { font-size: 9px; transition: transform .15s; }
.tr-card:hover .tr-card-cta i { transform: translateX(3px); }

/* Cancelled — stays visible and clickable, just visually deprioritised (same principle
   as events, memory: feedback_cancelled_content_stays_visible). Not filtered out at the
   SP level — see itrvl_tours_results_v4 / TOUR_CANCELLED_BLN. */
.tr-card--cancelled,
.tr-feat-card.tr-card--cancelled {
  opacity: .6;
  filter: grayscale(.5);
}
.tr-card--cancelled:hover { opacity: .8; }
.tr-feat-card.tr-card--cancelled .tr-feat-badge { background: red; }
.tr-card--cancelled .tr-card-dur-badge { background: rgba(163,0,0,.9); }


/* ================================================================
   06a. MAP POPUP — TOUR COUNT LINE
   ---------------------------------------------------------------
   Sits between .rp-map-popup-title and .rp-map-popup-link (both defined
   generically in result-pages-addon-v4.css §06) inside the places-to-see
   marker popup built by __DEFAULTS/js/__tours_map_v4_script.js.
================================================================ */

.tr-map-popup-count {
  font-family: var(--ff-h);
  font-size: .7rem;
  color: var(--mu);
  margin-bottom: 6px;
}


/* ================================================================
   06b. SIDEBAR FILTERS (.tr-sidebar / .tr-sidebar-panel)
   ---------------------------------------------------------------
   Filter by Departure panel — same chrome as events' .evt-sidebar-panel
   (events-css-additions.css §23), renamed to the tr- namespace. Reuses
   .fpill verbatim (result-pages-addon-v4.css §05) for the pills themselves.

   top:84px matches the sticky offset already established for
   .tsp-map-panel / .evt-sidebar — clears .gt-nav height.
================================================================ */

.tr-sidebar {
  position: sticky;
  top: 84px;
}

.tr-sidebar-panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
}

.tr-sidebar-head {
  background: var(--dv);
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-h);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.tr-sidebar-head i { color: var(--ye); }

.tr-sidebar-body {
  padding: 14px;
}

.tr-sidebar-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.tr-sidebar-pills .fpill {
  width: 100%;
  justify-content: space-between;
  border-radius: 4px;
}

.tr-sidebar-count {
  font-size: 10px;
  font-weight: 800;
  background: rgba(89,45,140,.1);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--mv);
}
.tr-sidebar-pills .fpill:hover .tr-sidebar-count,
.tr-sidebar-pills .fpill.active .tr-sidebar-count {
  background: rgba(255,255,255,.2);
  color: #fff;
}

@media (max-width: 991px) {
  .tr-sidebar { position: static; margin-bottom: 24px; }
}

/* City pills nest visually under their state — indent + slightly smaller,
   no accordion/collapse (current volume doesn't need it).
   Selector matches .tr-sidebar-pills .fpill's specificity (two classes) so the
   narrower width here actually wins instead of being silently overridden by
   that rule's width:100% — a single-class .tr-sidebar-pill--city selector
   loses that fight regardless of the value or file order. */
.tr-sidebar-pills .fpill.tr-sidebar-pill--city {
  margin-left: 14px;
  width: calc(100% - 50px);
  font-size: 9.5px;
  padding: 4px 11px;
  color: var(--mu);
  border-color: transparent;
  background: var(--wh2);
}
.tr-sidebar-pill--city:hover,
.tr-sidebar-pill--city.active {
  background: var(--mv);
  color: #fff;
}

/* Places to See — native <select>, not a pill list (that list grows unbounded,
   unlike departure's naturally small state/city set). Kept in sync with the
   map's pins via window.setPlaceToSeeFilter — see _tours_results.php. */
.tr-sidebar-select {
  width: 100%;
  font-family: var(--ff-h);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dv);
  background: var(--wh2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 11px;
  cursor: pointer;
}
.tr-sidebar-select:hover,
.tr-sidebar-select:focus {
  border-color: var(--mv);
  outline: none;
}


/* ================================================================
   06. SUBMIT CTA (sidebar)
================================================================ */

.tr-submit-cta {
  background: var(--dv);
  border-radius: 4px;
  padding: 18px 16px;
  position: relative;
  overflow: hidden;
}
.tr-submit-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(89,45,140,.5) 0%, transparent 60%);
  pointer-events: none;
}
.tr-submit-eyebrow {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ye);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.tr-submit-eyebrow::before { content: ''; width: 12px; height: 2px; background: var(--ye); flex-shrink: 0; }
.tr-submit-cta h3 {
  font-family: var(--ff-h);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.tr-submit-cta p {
  font-family: var(--ff-s);
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.btn-ye {
  background: var(--ye);
  color: var(--dv);
  font-family: var(--ff-h);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 24px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.btn-ye:hover { background: var(--gr); color: var(--dv); }