/* ================= Tour hero ================= */
/* A walker on a mountain ridge above the cloud line. Shell, scrim and grain come
   from the shared hero rule in flight-search.css.

   This replaced a lake-and-boat shot that measured badly here: in a band this
   wide and short the crop landed on bare grey rock and dark pine, and under the
   scrim it went to mush (colourfulness 3.3 against 24.9 for this one). The
   34% crop puts open sky behind the headline and the walker just under the
   stats strip, where the frosted panel reads against a figure rather than fog. */
.tour-hero {
  --hero-photo: url("https://images.unsplash.com/photo-1526772662000-3f88f10405ff?fm=jpg&q=72&w=1800&auto=format&fit=crop&ixlib=rb-4.1.0");
  --hero-photo-pos: center 34%;
  padding: 3.5rem 0 calc(var(--hero-card-overlap, 220px) + 2.5rem);
}

@media (max-width: 767.98px) {
  .tour-hero {
    padding-top: 3rem;
  }
}

.tour-search-wrapper {
  margin-top: calc(-1 * var(--hero-card-overlap, 220px));
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 5;
}

.tour-search-card {
  padding-bottom: 1.5rem;
}

/* ================= 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(11, 31, 58, 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 ================= */
/* No padding-block override here: this section also carries
   .visa-process-section, whose own padding-block: var(--pt-section-y)
   (sections.css) is exactly what theme.css's adjacent-section collapsing
   margin (section:not(.pt-hero) + section:not(.pt-hero)) assumes every
   section uses. Overriding it to a fixed, smaller 3rem here meant the next
   section's negative top margin pulled up further than this one's own
   bottom padding reserved, clipping the step cards' text underneath it.

   The extra side/inner padding and the map backdrop below are scoped to
   .tour-process-section specifically (not .visa-process-section) — that
   class is shared with the Visas, Cruise and Sightseeing "how it works"
   sections, which this must not touch. */
.tour-process-section {
    position: relative;
    overflow: hidden;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* A faint dot grid standing in for a world map — evokes "routes and
   destinations" without needing an actual illustrated map asset, and fades
   out toward the edges so it never competes with the step cards on top of
   it. */
.tour-process-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(var(--pt-blue-200) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: .6;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 35%, transparent 85%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 35%, transparent 85%);
}

.tour-process-section > .container { position: relative; z-index: 1; }

/* ================= 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("https://images.unsplash.com/photo-1526772662000-3f88f10405ff?fm=jpg&q=68&w=760&auto=format&fit=crop&ixlib=rb-4.1.0");
  }
}

/* ================= "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(11, 31, 58, 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, #eef1f6);
}

.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, #eef1f6);
  color: var(--brand-navy, #0b1f3a);
}

.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, #0b1f3a);
}

.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;
}