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