/* ════════════════════════════════════════════════════════════
   BluCruise Design System — excursions.css
   Excursions Hub + Excursion Detail pages.
   All design tokens from variables.css.
════════════════════════════════════════════════════════════ */

/* ── Hub Hero ──────────────────────────────────────────────── */
.exc-hero {
  background: var(--ink);
  padding: 120px var(--sp-4) var(--sp-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.exc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(196,154,42,.14), transparent 65%);
  pointer-events: none;
}

.exc-hero__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}

.exc-hero__title {
  font-family: var(--font-s);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 300;
  color: var(--white);
  letter-spacing: -.04em;
  line-height: 1.02;
  margin-bottom: var(--sp-1);
}

.exc-hero__title em { font-style: italic; color: var(--gold); }

.exc-hero__sub {
  font-size: 15px;
  color: rgba(255,255,255,.45);
  max-width: 520px;
  margin: 0 auto var(--sp-4);
  line-height: 1.6;
}

/* Search bar */
.exc-search {
  max-width: 580px;
  margin: 0 auto;
  position: relative;
}

.exc-search__inp {
  width: 100%;
  padding: 14px 52px 14px 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px;
  background: rgba(255,255,255,.07);
  color: var(--white);
  font-family: var(--font-n);
  font-size: 15px;
  outline: none;
  transition: border-color var(--trans), background var(--trans);
  box-sizing: border-box;
}

.exc-search__inp::placeholder { color: rgba(255,255,255,.3); }

.exc-search__inp:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.1);
}

.exc-search__ico {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.4);
  font-size: 18px;
  pointer-events: none;
}

/* ── Filter bar ──────────────────────────────────────────── */
.exc-filters {
  background: var(--white);
  border-bottom: 1px solid var(--br);
  padding: var(--sp-2) var(--sp-4);
  position: sticky;
  top: 64px;
  z-index: 90;
}

.exc-filters__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.exc-filters__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.exc-filter-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tx3);
  white-space: nowrap;
  flex-shrink: 0;
}

.exc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border: 1.5px solid var(--br);
  border-radius: 50px;
  font-family: var(--font-n);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tx2);
  background: var(--white);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}

.exc-pill:hover { border-color: var(--navy); color: var(--navy); }

.exc-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.exc-pill.active--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

.exc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1.5px solid var(--br);
  border-radius: 50px;
  font-family: var(--font-n);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tx2);
  background: var(--white);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  user-select: none;
}
.exc-toggle:hover { border-color: var(--navy); }
.exc-toggle.on { background: rgba(22,163,74,.08); border-color: #16A34A; color: #16A34A; }

.exc-filter-sep {
  width: 1px;
  height: 20px;
  background: var(--br);
  flex-shrink: 0;
}

/* Active filter chips */
.exc-active-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.exc-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(27,45,79,.07);
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.exc-active-chip i { font-size: 12px; color: var(--tx3); }
.exc-active-chip:hover i { color: var(--coral); }

/* ── Results bar ─────────────────────────────────────────── */
.exc-results-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.exc-results-count {
  font-size: 13px;
  color: var(--tx3);
  flex: 1;
}

.exc-results-count strong { color: var(--navy); }

.exc-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tx3);
}

.exc-sort select {
  border: 1px solid var(--br);
  border-radius: var(--rad-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-n);
  color: var(--navy);
  background: var(--white);
  cursor: pointer;
  outline: none;
}

/* ── Excursion card grid ─────────────────────────────────── */
.exc-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-8);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}

/* ── Enhanced excursion card ─────────────────────────────── */
.exc-card {
  background: var(--white);
  border: 1px solid var(--br);
  border-radius: var(--rad-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.exc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.exc-card__img {
  height: 175px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.exc-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.exc-card:hover .exc-card__img img { transform: scale(1.07); }

.exc-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.exc-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.exc-badge--wf    { background: rgba(22,163,74,.9); color: #fff; }
.exc-badge--fc    { background: rgba(27,45,79,.8);  color: #fff; }
.exc-badge--fam   { background: rgba(196,154,42,.9);color: #fff; }
.exc-badge--easy  { background: rgba(22,163,74,.8); color: #fff; }
.exc-badge--mod   { background: rgba(217,119,6,.85);color: #fff; }
.exc-badge--str   { background: rgba(232,80,58,.85);color: #fff; }

.exc-card__save {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(6,15,28,.65);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  transition: background var(--trans);
  backdrop-filter: blur(4px);
}

.exc-card__save:hover  { background: var(--coral); }
.exc-card__save.saved  { background: var(--gold); }

.exc-card__body {
  padding: var(--sp-2);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.exc-card__dest {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.exc-card__title {
  font-family: var(--font-s);
  font-size: 16.5px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: var(--sp-1);
}

.exc-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  color: var(--tx3);
  margin-bottom: 6px;
}

.exc-card__meta i { color: var(--gold); font-size: 13px; }

.exc-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--tx3);
  margin-top: auto;
  padding-top: var(--sp-1);
  border-top: 1px solid var(--br);
}

.exc-card__stars { color: var(--gold); font-size: 11px; }
.exc-card__reviews { font-size: 11px; color: var(--tx4); }
.exc-card__price {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.exc-card__footer {
  padding: 10px var(--sp-2) var(--sp-2);
  display: flex;
  gap: 6px;
}

/* ── Empty / no results ──────────────────────────────────── */
.exc-empty {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}

.exc-empty i { font-size: 48px; color: var(--br); margin-bottom: var(--sp-2); display: block; }
.exc-empty p { color: var(--tx3); font-size: 15px; margin-bottom: var(--sp-2); }

/* ════════════════════════════════════════════════════════════
   EXCURSION DETAIL PAGE
════════════════════════════════════════════════════════════ */

/* ── Detail Hero ─────────────────────────────────────────── */
.excd-hero {
  position: relative;
  height: clamp(380px, 55vh, 580px);
  overflow: hidden;
  background: var(--ink);
}

.excd-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease;
}

.excd-hero:hover .excd-hero__img { transform: scale(1.03); }

.excd-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6,15,28,.1) 0%,
    rgba(6,15,28,.45) 40%,
    rgba(6,15,28,.85) 100%
  );
}

.excd-hero__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--sp-5) var(--sp-4);
  max-width: 1200px;
  margin: 0 auto;
}

.excd-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: rgba(255,255,255,.78);
  margin-bottom: var(--sp-1);
}
.excd-hero__breadcrumb a { color: rgba(255,255,255,.45); transition: color var(--trans); }
.excd-hero__breadcrumb a:hover { color: var(--gold); }
.excd-hero__breadcrumb i { font-size: 10px; }

.excd-hero__tags {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.excd-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.excd-tag--dest { background: var(--gold); color: var(--ink); }
.excd-tag--cat  { background: rgba(255,255,255,.15); color: var(--white); }

.excd-hero__title {
  font-family: var(--font-s);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 300;
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1.06;
  margin-bottom: var(--sp-2);
}

.excd-hero__facts {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.excd-hero__fact {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: rgba(255,255,255,.9);
}
.excd-hero__fact i { color: var(--gold); font-size: 14px; }
.excd-hero__fact strong { color: var(--white); }

/* ── Detail layout ───────────────────────────────────────── */
.excd-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp-5);
  align-items: start;
}

.excd-section {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--br);
}
.excd-section:last-child { border-bottom: none; }

.excd-section__title {
  font-family: var(--font-s);
  font-size: 26px;
  font-weight: 300;
  color: var(--navy);
  letter-spacing: -.01em;
  margin-bottom: var(--sp-2);
}

.excd-section__title em { font-style: italic; color: var(--gold); }

.excd-highlight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--br);
  font-size: 13.5px;
  color: var(--tx2);
}
.excd-highlight:last-child { border-bottom: none; }
.excd-highlight i { color: var(--gold); font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* Included grid */
.excd-inc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-4);
}

.excd-inc-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--br);
  font-size: 13px;
  color: var(--tx2);
}
.excd-inc-item:last-child { border-bottom: none; }
.excd-inc-item--ok i { color: #16A34A; }
.excd-inc-item--no i { color: var(--coral); }

/* Map */
.excd-map {
  border-radius: var(--rad-lg);
  overflow: hidden;
  border: 1px solid var(--br);
}

.excd-map__inner { height: 220px; }

/* Meeting point */
.excd-meeting {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--sp-2);
  background: rgba(196,154,42,.06);
  border: 1px solid rgba(196,154,42,.25);
  border-radius: var(--rad);
  font-size: 13.5px;
  color: var(--tx2);
  margin-bottom: var(--sp-3);
}
.excd-meeting i { color: var(--gold); font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* ── Sticky booking panel ─────────────────────────────────── */
.excd-panel {
  background: var(--white);
  border: 1px solid var(--br);
  border-radius: var(--rad-xl);
  padding: var(--sp-3);
  position: sticky;
  top: 88px;
  box-shadow: var(--shadow);
}

.excd-panel__price-label {
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 2px;
}

.excd-panel__price {
  font-family: var(--font-s);
  font-size: 44px;
  font-weight: 300;
  color: var(--navy);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 4px;
}

.excd-panel__basis { font-size: 12px; color: var(--tx3); margin-bottom: var(--sp-2); }

.excd-panel__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-1) 0;
  margin-bottom: var(--sp-2);
  border-top: 1px solid var(--br);
  border-bottom: 1px solid var(--br);
}

.excd-panel__stars { color: var(--gold); font-size: 14px; }
.excd-panel__score { font-size: 15px; font-weight: 700; color: var(--navy); }
.excd-panel__reviews { font-size: 12px; color: var(--tx3); }

.excd-panel__features {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: var(--sp-2);
}

.excd-panel__feat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--tx2);
}
.excd-panel__feat i { font-size: 14px; }
.excd-panel__feat--ok i { color: #16A34A; }
.excd-panel__feat--info i { color: var(--gold); }

.excd-panel__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.excd-panel__note {
  font-size: 11px;
  color: var(--tx3);
  text-align: center;
  line-height: 1.4;
}

/* ── Related excursion strip ─────────────────────────────── */
.excd-related {
  max-width: 1200px;
  margin: 0 auto var(--sp-8);
  padding: 0 var(--sp-4);
}

.excd-related__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--br);
}

.excd-related__title {
  font-family: var(--font-s);
  font-size: 28px;
  font-weight: 300;
  color: var(--navy);
  letter-spacing: -.02em;
}
.excd-related__title em { font-style: italic; color: var(--gold); }

.excd-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-2);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .excd-body { grid-template-columns: 1fr; }
  .excd-panel { position: static; }
}

@media (max-width: 768px) {
  /* ALPHA-1.1 HOTFIX — filter panel consumed 50-90% of the mobile viewport.
     Root cause: overflow-x:auto was on .exc-filters (the sticky container)
     while .exc-filters__row kept flex-wrap:wrap, so nothing ever overflowed
     horizontally — 20 destination pills wrapped into ~500px of pinned height.
     Fix: move the scroll to the ROW and stop it wrapping. ~160px instead. */
  .exc-filters { top: 56px; }

  .exc-filters__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .exc-filters__row::-webkit-scrollbar { display: none; }

  /* Pills must not shrink or they compress instead of scrolling */
  .exc-filters__row > * { flex: 0 0 auto; }
  .exc-pill, .exc-toggle { flex: 0 0 auto; scroll-snap-align: start; }

  /* Row label stays visible while the pills scroll under it */
  .exc-filters__row .exc-filter-label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--white);
    padding-right: 8px;
  }
  .exc-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: var(--sp-2) var(--sp-3) var(--sp-6); }
  .excd-hero { height: 60vmin; min-height: 320px; }
  .excd-inc-grid { grid-template-columns: 1fr; }
  .exc-hero { padding-top: 100px; }
}

@media (max-width: 480px) {
  .exc-grid { grid-template-columns: 1fr; }
  .excd-related__grid { grid-template-columns: 1fr 1fr; }
}

/* ── Shared page hero (BluCruise Design System) ──────────────
   One treatment for every main page: photographic background at
   42% over the ink gradient, top-down scrim for legibility, and
   the header nested inside as its first child (homepage pattern).
   Set the image per page with .bc-hero--<page>. */
.bc-hero-img{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.bc-hero-img img{ width:100%; height:100%; object-fit:cover; opacity:.42; }
.bc-hero-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,15,28,.62) 0%,rgba(6,15,28,.34) 40%,rgba(6,15,28,.90) 100%);
}

/* The header now contains the nav and a photographic background,
   so it becomes a positioned column. */
.exc-hero{ position:relative; overflow:hidden; }
.exc-hero > *:not(.bc-hero-img):not(.bc-nav){ position:relative; z-index:2; }
/* The header floats over the hero rather than joining its flow, so
   the hero keeps its own padding and the nav keeps the homepage
   32px/52px inset. The hero's existing top padding already reserves
   the space the header occupies. */
.exc-hero .bc-nav--in-hero{
  position:absolute; top:0; left:0; right:0; width:100%; z-index:30;
}
/* Reserve the header's height so hero copy never sits under it.
   Header = 32px top padding + ~52px content on desktop, 24px + ~46px
   on mobile. Measured, not estimated. */
.exc-hero{ padding-top:132px !important; }
@media (max-width:960px){ .exc-hero{ padding-top:96px !important; } }

/* ── Card link overlay ───────────────────────────────────────
   The card is an <article>; this invisible anchor covers it so the
   whole card is clickable without nesting anchors. Footer buttons
   and the save control sit above it via z-index. */
.exc-card { position: relative; }
.exc-card__link {
  position: absolute; inset: 0; z-index: 1;
  text-indent: -9999px; overflow: hidden;
}
.exc-card__link:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.exc-card__footer,
.exc-card__save { position: relative; z-index: 2; }

/* Family layer badges. Render only when the record carries the field. */
.exc-badge--age {
  background: rgba(6,15,28,.82); color: var(--white);
  font-weight: 700; letter-spacing: .04em;
}
.exc-badge--fam2 {
  background: rgba(255,255,255,.92); color: var(--navy);
  padding: 3px 6px; display: inline-flex; align-items: center;
}
.exc-badge--fam2 i { font-size: 12px; }

/* The header is nested inside the detail hero, matching every other
   page. The hero content is bottom anchored so the header simply
   floats at the top above the image and overlay. */
.excd-hero .bc-nav--in-hero {
  position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 30;
}