/* ================= Sightseeing hero ================= */
/* The Colosseum at blue hour. Shell, veil and grain come from the shared hero
   rule in flight-search.css; the crop is pulled up so the lit arches and open
   sky sit in the band where the veil is thinnest. */
.sightseeing-hero {
  --hero-photo: url("https://images.unsplash.com/photo-1552832230-c0197dd311b5?fm=jpg&q=72&w=1800&auto=format&fit=crop&ixlib=rb-4.1.0");
  --hero-photo-pos: center 52%;
  padding: 3.5rem 0 calc(var(--hero-card-overlap, 220px) + 2.5rem);
}

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

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

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

/* ================= Result card (reuses .visa-result-* shell dimensions, own colors not needed) ================= */
.sightseeing-result-section {
  margin-bottom: 1rem;
}

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

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

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

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

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

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

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

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

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

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

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

  .sightseeing-result-grid {
    grid-template-columns: repeat(2, 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) {
  .sightseeing-hero {
    --hero-photo: url("https://images.unsplash.com/photo-1552832230-c0197dd311b5?fm=jpg&q=68&w=760&auto=format&fit=crop&ixlib=rb-4.1.0");
  }
}

/* ================= "Where to" typeahead =================
   Destinations and activities share one list, so each row carries an icon that
   says which kind it is. Matches the tours search bar's shape so the two behave
   and read the same way. */
.ss-dest-field {
  position: relative;
}

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

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

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

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

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

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

.ss-dest-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-navy, #0b1f3a);
}

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

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