/* ============================================================
   Search / results page header: plays the hero's role on a page
   with no dedicated hero section, so it reuses the dark-overlay
   treatment as .hero (cover4.avif + --ink at 0.5) and the same
   --nav-text tokens, rather than inventing a new look.
   The search module mounted inside is the exact same component as
   the hero's, and, like hero__body, is NOT capped to the
   narrower text-reading width: that cap is what caused the filter
   bar's content to overflow its own pill when badges (nights,
   pet friendly, etc.) are showing.
   ============================================================ */
.search-header {
  position: relative;
  padding: 100px 100px 72px;
  background: url(../cover4.avif) center/cover no-repeat;
  text-align: center;
  overflow: hidden;
}

.search-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.6);
}

.search-header__inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.search-header__eyebrow {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-text-soft);
}

.search-header__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.08;
  color: var(--nav-text);
  text-wrap: balance;
}

.search-header__subtitle {
  max-width: 52ch;
  margin: 6px 0 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--nav-text-soft);
  text-wrap: balance;
}

@media (max-width: 640px) {
  .search-header {
    padding: 140px 24px 48px;
  }
}

/* ============================================================
   Results toolbar: sort control
   ============================================================ */
.results-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 28px;
}

.results-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.results-sort__label {
  /* FIX 8 (design audit): at narrow widths this two-word label was
     wrapping onto its own two lines next to the select, and centering
     on the cross axis then symmetrically overhung the select's top and
     bottom edges: not a misalignment so much as there being no reason
     for "Sort by" to wrap at all. */
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* FIX 6 (design audit): this was the one native, unstyled browser form
   control on the whole guest-facing site; every other interactive
   control (guest stepper, date picker, property search) is fully
   custom-built, so the plain OS select arrow stood out. appearance: none
   drops the native arrow/chrome; the chevron is redrawn as a background
   SVG using the same stroke-based glyph style as the rest of the site
   (round caps/joins, --ink-soft) since a data-URI background-image can't
   reference currentColor or CSS custom properties directly. */
.results-sort__select {
  appearance: none;
  padding: 9px 40px 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--paper-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f5c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}

.results-sort__select:hover {
  border-color: var(--ink-soft);
}

@media (max-width: 560px) {
  .results-toolbar {
    justify-content: center;
  }
}

/* ============================================================
   Results empty state
   ============================================================ */
.results-empty {
  max-width: 520px;
  margin: 0 auto;
  padding: 56px 40px;
  text-align: center;
  background: var(--paper-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.results-empty__title {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--ink);
}

.results-empty__desc {
  margin: 0 0 22px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .results-empty {
    padding: 40px 24px;
  }
}