/* Results-only styling. Everything reusable (property-card, badges,
   buttons, search-form, trust-badges) lives in base.css. */

/* Compact hero band — a fixed site photo (never a property image),
   short on purpose (220–250px): gives Results photographic presence
   without turning it into an emotional landing page like Home's hero.
   The search panel is a NORMAL FLOW element right after this section
   (never position:absolute) — its real rendered height pushes the
   breadcrumb down automatically, on every viewport, with no manual
   compensation anywhere. A negative margin-top on the search box
   itself is the only "trick": it only pulls the box up into the
   hero's own empty lower portion, it never has to predict the search
   box's height (that risk lived on the OTHER side before, guessing
   the breadcrumb's offset — removed entirely now). */
.results-hero {
  position: relative;
  height: 220px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .results-hero { height: 250px; }
}
.results-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.results-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 42, 73, 0.32) 0%, rgba(8, 42, 73, 0.48) 100%);
  z-index: 1;
}
.results-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) 0;
  color: #fff;
}
.results-hero__title { color: #fff; font-size: 1.5rem; margin-bottom: var(--space-2); }
@media (min-width: 768px) {
  .results-hero__title { font-size: 1.8rem; }
}
.results-hero__subtitle { color: rgba(255, 255, 255, 0.92); margin: 0; font-size: 0.95rem; }

.results-hero__search {
  position: relative;
  z-index: 3;
  max-width: var(--container-max);
  margin: -48px auto var(--space-5);
  padding: 0 var(--space-4);
}

/* Light-blue band above the results heading, holding just the
   breadcrumb — same treatment as Property Detail's .property-topbar,
   so the two pages read as the same system. */
.results-breadcrumb {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  color: var(--color-primary);
  display: flex;
  gap: var(--space-2);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
.results-breadcrumb a { text-decoration: none; color: var(--color-primary); opacity: 0.75; }
.results-breadcrumb a:hover { opacity: 1; }
.results-breadcrumb [aria-current] { color: var(--color-primary-dark); font-weight: 600; }

.results-header {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4) var(--space-4);
}
.results-header__title {
  font-size: 1.9rem;
  margin-bottom: var(--space-2);
  color: var(--color-primary-dark);
  font-weight: 700;
}
@media (min-width: 768px) {
  .results-header__title { font-size: 2.3rem; }
}
.results-header__dates {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-bottom: 0;
}

/* Filters toolbar — its own card now that the search form lives in
   the hero instead of a shared box above it. */
.results-toolbar {
  max-width: var(--container-max);
  margin: 0 auto var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.results-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Only two secondary filter groups — a single flex-wrap row, not a
   collapsed "more filters" disclosure and never a sidebar. Shares one
   line with sort on a wide desktop when there's room; wraps to its
   own line on narrower viewports; each group stacks on mobile. */
.results-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  flex: 1 1 auto;
}
.results-filters-bar__group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: none;
  padding: 0;
  margin: 0;
}
.results-filters-bar__group legend {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-primary);
  padding: 0;
  float: left; /* keeps legend inline with the fieldset's flex children across browsers */
}
.results-filters-bar__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.results-filters-bar__pill { position: relative; }
.results-filters-bar__pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.results-filters-bar__pill span {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.results-filters-bar__pill input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.results-filters-bar__pill input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.results-filters-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 767px) {
  .results-filters-bar { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .results-filters-bar__group { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .results-filters-bar__actions { justify-content: flex-end; }
}

.results-toolbar__sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.results-toolbar__sort label { font-size: 0.85rem; color: var(--color-muted); }
.results-toolbar__sort select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.results-chips {
  max-width: var(--container-max);
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.results-grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--space-4) var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-5);
  scroll-margin-top: var(--space-5);
}
@media (min-width: 768px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .results-grid { grid-template-columns: repeat(3, 1fr); }
}
/* The "load more" anchor (#result-N) targets a card directly — give
   every card the same scroll offset so it doesn't land flush against
   the viewport edge. */
.property-card { scroll-margin-top: var(--space-5); }

/* Discreet hover — a small image scale only, nothing else moves. */
.property-card__media { overflow: hidden; }
.property-card__image { transition: transform 0.2s ease; }
.property-card:hover .property-card__image { transform: scale(1.03); }

/* Differentiator pills (up to 3 real amenities/views worth
   highlighting) — light-blue tint, distinct from the neutral
   location .chip, so the two kinds of tag read differently at a
   glance. */
.property-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  list-style: none;
}
.property-card__features li {
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary-dark);
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
}

.results-load-more {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--space-4) var(--space-7);
  text-align: center;
}

.empty-state {
  max-width: 40rem;
  margin: var(--space-7) auto;
  padding: 0 var(--space-4);
  text-align: center;
}
.empty-state__title { font-size: 1.2rem; margin-bottom: var(--space-2); color: var(--color-primary); }
.empty-state__body { color: var(--color-muted); margin-bottom: var(--space-4); }
.empty-state__help { margin-top: var(--space-4); font-size: 0.9rem; color: var(--color-muted); }

/* Trust bar — light-blue band, dark-blue text/icons, reusing the same
   partials/trust-badges.php content as Home but re-tinted for this
   page's spot at the bottom (matches the wireframe's placement). */
.results-trust {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-4);
  margin-top: var(--space-4);
}
.results-trust .trust-badges { max-width: var(--container-max); margin-inline: auto; }
.results-trust .trust-badges__icon { background: rgba(var(--color-primary-rgb), 0.12); color: var(--color-primary-dark); }
.results-trust .trust-badges__title { color: var(--color-primary-dark); }

/* Same gradient token as the Home hero — one consistent "this matters"
   surface across the site, not a new colour invented for this block. */
.results-cta {
  max-width: var(--container-max);
  margin: 0 auto var(--space-7);
  padding: var(--space-7) var(--space-5);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  text-align: center;
  color: #fff;
}
.results-cta h2 { font-size: 1.5rem; margin-bottom: var(--space-2); color: #fff; }
.results-cta p { color: rgba(255, 255, 255, 0.85); max-width: 40rem; margin: 0 auto var(--space-5); }

.is-inert { opacity: 0.7; cursor: default; pointer-events: none; }

@media (max-width: 767px) {
  .results-toolbar__row { flex-direction: column; align-items: stretch; }
  .property-card__cta { display: block; text-align: center; }
}