/* ================= Cruise hero ================= */
/* Liners berthed in a turquoise Caribbean port, shot from the air. Shell, veil
   and grain come from the shared hero rule in flight-search.css. */
.cruise-hero {
  --hero-photo: url("https://images.unsplash.com/photo-1548574505-5e239809ee19?fm=jpg&q=72&w=1800&auto=format&fit=crop&ixlib=rb-4.1.0");
  --hero-photo-pos: center 46%;
  padding: 3.5rem 0 calc(var(--hero-card-overlap, 220px) + 2.5rem);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cruise-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) {
  .cruise-hero {
    --hero-photo: url("https://images.unsplash.com/photo-1548574505-5e239809ee19?fm=jpg&q=68&w=760&auto=format&fit=crop&ixlib=rb-4.1.0");
  }
}

/* ================= "Where to" typeahead =================
   Ports, cruise lines and named cruises share one list, so each row carries an
   icon that says which kind it is. Matches the visa, tour and sightseeing
   search bars so all four behave and read the same way. */
.cs-dest-field {
  position: relative;
}

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

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

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

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

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

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

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

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

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