/* ================= Tour hero ================= */
/* A Santorini sunset terrace, supplied as our own photo rather than a stock crop.
   This hero deliberately breaks from the shared high-key scrim the other six
   heroes use (see flight-search.css): the brief asked for the photograph to read
   full-strength, with just enough of a gradient for the search pill and the
   feature row beneath it to stay legible. The `section.tour-hero` selector
   outranks the shared `.tour-hero` rule from flight-search.css on specificity
   alone, so this replaces that background outright rather than layering on it. */
.tour-hero {
  --hero-photo: url("/images/tours/tours-hero.jpg");
  --hero-photo-pos: center 38%;
  padding: calc(4.5rem + var(--nav-h)) 0 4rem;
}

section.tour-hero {
  /* This photo runs much brighter than the sunset crop it replaced — mostly open
     sky and white-washed buildings, with no dark patch for the headline to fall
     back on. A radial scrim sits right behind the text block (where the photo is
     brightest) on top of a stronger uniform tint across the whole band. */
  background-image:
    radial-gradient(ellipse 65% 75% at 50% 42%, rgba(5, 11, 22, 0.58) 0%, rgba(5, 11, 22, 0) 100%),
    linear-gradient(180deg,
      rgba(7, 15, 28, 0.46) 0%,
      rgba(7, 15, 28, 0.38) 30%,
      rgba(7, 15, 28, 0.44) 55%,
      rgba(7, 15, 28, 0.7) 100%),
    var(--hero-photo);
  background-position: center center, center center, var(--hero-photo-pos, center center);
  background-size: cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.tour-hero .flight-hero-title {
  color: #fff;
  text-shadow: 0 2px 10px rgba(5, 11, 22, 0.55);
}

.tour-hero .flight-hero-title em {
  text-shadow: 0 2px 10px rgba(5, 11, 22, 0.55);
}

.tour-hero .flight-hero-subtitle {
  color: #fff;
  text-shadow: 0 1px 12px rgba(5, 11, 22, 0.6);
}

@media (max-width: 767.98px) {
  .tour-hero {
    padding-top: calc(3.5rem + var(--nav-h));
    padding-bottom: 3rem;
  }
}

/* ---------- "Premium Travel Experiences" eyebrow ---------- */
.ph-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
  text-shadow: 0 1px 10px rgba(5, 11, 22, 0.55);
}

.ph-label-line {
  width: 44px;
  height: 1px;
  background: var(--brand-gold);
  opacity: 0.75;
}

/* ---------- Search pill ---------- */
.hero-search-pill {
  /* backdrop-filter establishes a new stacking context, which traps the
     destination dropdown's z-index: 40 inside this element — it can then
     only out-rank its own descendants, not the carousel section below it in
     the DOM. position + z-index here promotes the whole pill (dropdown
     included) above that carousel instead of behind it. */
  position: relative;
  z-index: 5;
  max-width: 740px;
  margin: 1.85rem auto 0;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 22px 46px -12px rgba(239, 106, 76, 0.4),
    0 14px 34px rgba(30, 95, 184, 0.2);
  padding: 0.5rem 0.5rem 0.5rem 1.7rem;
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
}

.hero-search-pill form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.hero-search-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--brand-navy);
}

.hero-search-icon svg {
  width: 20px;
  height: 20px;
}

.hero-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--brand-navy);
  padding: 0.95rem 0;
}

.hero-search-field input::placeholder {
  color: #7c8aa0;
  font-weight: 500;
}

.hero-search-btn {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef6a4c;
  color: #fff;
  box-shadow: 0 10px 24px -4px rgba(239, 106, 76, 0.65);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-search-btn svg {
  width: 20px;
  height: 20px;
}

.hero-search-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 30px -4px rgba(239, 106, 76, 0.75);
}

.hero-dest-list {
  text-align: left;
}

/* ---------- Destination carousel ---------- */
.hero-dest-carousel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 820px;
  margin: 1.85rem auto 0;
}

.hero-dest-track {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.2rem 0.1rem 0.3rem;
}

.hero-dest-track::-webkit-scrollbar {
  display: none;
}

.hero-dest-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 1.1rem;
  padding: 0.4rem 0.4rem 0.55rem;
  box-shadow: 0 10px 22px -6px rgba(5, 11, 22, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-dest-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -6px rgba(5, 11, 22, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.hero-dest-card-photo {
  width: 100%;
  height: 86px;
  border-radius: 0.75rem;
  background-size: cover;
  background-position: center;
}

.hero-dest-card-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-navy);
  white-space: nowrap;
}

.hero-dest-card-label svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #ef6a4c;
}

.hero-dest-nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  color: var(--brand-navy);
  box-shadow: 0 8px 18px rgba(5, 11, 22, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: transform 0.15s ease, background 0.15s ease;
}

.hero-dest-nav svg {
  width: 18px;
  height: 18px;
}

.hero-dest-nav:hover {
  background: #fff;
  transform: scale(1.06);
}

@media (max-width: 575.98px) {
  .hero-dest-carousel {
    gap: 0.4rem;
  }

  .hero-dest-card {
    width: 92px;
  }

  .hero-dest-card-photo {
    height: 68px;
  }

  .hero-dest-nav {
    width: 34px;
    height: 34px;
  }

  .hero-dest-nav svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 575.98px) {
  .hero-search-pill {
    padding-left: 1.1rem;
  }
}

/* ================= Result card ================= */
.tour-result-section {
  margin-bottom: 1rem;
}

.tour-result-card {
  display: flex;
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(30, 95, 184, 0.1);
  border: 1px solid #e3e8ef;
}

.tour-result-image {
  flex: 0 0 300px;
  background-size: cover;
  background-position: center;
}

.tour-result-body {
  flex: 1;
  padding: 2rem 2.25rem;
  min-width: 0;
}

.tour-result-body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-navy);
  margin: 0.35rem 0 0.25rem;
}

.tour-result-tagline {
  color: #566273;
  margin-bottom: 1.25rem;
}

.tour-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  border-top: 1px dashed #d4dbe5;
  border-bottom: 1px dashed #d4dbe5;
}

.tour-result-grid .lbl {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a96a6;
  margin-bottom: 0.2rem;
}

.tour-result-grid .val {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: #1b2430;
}

.tour-result-note {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  color: #8a96a6;
}

/* ================= Process steps ================= */
.tour-process-section {
  padding: 3rem 0;
}

/* ================= Consultation form ================= */
.tour-consultation-section {
  padding: 1rem 0 4rem;
}

.tour-consultation-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.5rem;
  background: var(--brand-navy);
  border-radius: 1.5rem;
  padding: 3rem;
  color: #fff;
}

.tour-consultation-intro h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin: 0.4rem 0 0.75rem;
}

.tour-consultation-intro p {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1.5rem;
}

.tour-consultation-intro .section-eyebrow {
  color: var(--brand-gold);
}

.tour-consultation-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tour-consultation-points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
}

.tour-consultation-points .icon {
  width: 18px;
  height: 18px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .tour-result-card {
    flex-direction: column;
  }

  .tour-result-image {
    flex-basis: 180px;
  }

  .tour-result-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tour-consultation-card {
    grid-template-columns: 1fr;
  }
}

/* hero photo: phone-sized variant. The hero is this page's Largest Contentful Paint element, and the
   1800px crop is ~450 KB for a viewport a fifth as wide. Phones get a 760px
   version instead.

   This repeats the hero's own selector rather than overriding :root: the base
   rule sets --hero-photo on the hero element itself, and a property set on the
   element always beats one inherited from an ancestor, whatever the source
   order. */
@media (max-width: 767.98px) {
  .tour-hero {
    --hero-photo: url("/images/tours/tours-hero-sm.jpg");
  }
}

/* ================= "Where to" typeahead =================
   Packages and itinerary cities share one list, so each row carries an icon
   that says which kind it is. Matches the visa country typeahead's shape so the
   two search bars behave and read the same way. */
.tour-dest-field {
  position: relative;
}

.tour-dest-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e6ebf3;
  border-radius: 0.9rem;
  box-shadow: 0 20px 44px rgba(30, 95, 184, 0.16);
  padding: 0.4rem;
}

.tour-dest-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0.55rem;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
}

.tour-dest-option:hover,
.tour-dest-option.is-active {
  background: var(--brand-navy-soft, #eaf3ff);
}

.tour-dest-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-navy-soft, #eaf3ff);
  color: var(--brand-navy, #1e5fb8);
}

.tour-dest-icon .icon {
  width: 15px;
  height: 15px;
}

/* min-width:0 lets the long "cities" meta line ellipsis instead of stretching
   the dropdown wider than the field it hangs off. */
.tour-dest-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tour-dest-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-navy, #1e5fb8);
}

.tour-dest-meta {
  font-size: 0.76rem;
  color: #6b7385;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-dest-empty {
  padding: 0.8rem 0.7rem;
  font-size: 0.85rem;
  color: #6b7385;
}