@charset "utf-8";

/* =================================================================
   PROPERTIES FOR SALE — page-specific stylesheet
   Load this AFTER css/styles.css. It reuses the shared design tokens
   (colors, type, spacing, radius, shadow) defined in that file's
   :root block and does not redeclare them.
   Contents:
   1. Breadcrumb
   2. Page banner
   3. Search & filter panel
   4. Results count / empty state
   Breakpoints match the rest of the site: 480 / 768 / 1024 / 1280
   ================================================================= */

/* ---------- 1. Breadcrumb ---------- */
.breadcrumb { margin-bottom: var(--space-md); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.breadcrumb a { color: rgba(255, 255, 255, 0.7); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--color-gold-500); }
.breadcrumb li[aria-current] { color: var(--color-white); font-weight: var(--fw-semibold); }
.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-3xs);
  color: rgba(255, 255, 255, 0.35);
}

/* ---------- 2. Page banner ---------- */
.page-banner {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-2xl);
}

/* Scrolling photo backdrop - every active listing's main photo (see
   $banner_slides in properties-for-sale.php), blurred and left to
   drift right-to-left forever. .page-banner__media keeps the original
   gradient as a fallback fill, so the section looks unchanged on the
   rare page load with zero eligible photos. */
.page-banner__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-navy-900) 0%, var(--color-navy-800) 55%, #0F2657 100%);
}
.page-banner__track {
  position: absolute;
  top: -20px;
  left: 0;
  height: calc(100% + 40px);
  width: max-content;
  display: flex;
  filter: blur(2px);
  will-change: transform;
  animation: page-banner-scroll 100s linear infinite;
}
.page-banner__slide {
  flex: none;
  width: 14rem;
  height: 100%;
  object-fit: cover;
}
@keyframes page-banner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-banner__track { animation: none; }
}

/* Same navy gradient as the fallback above, layered on top of the
   photos at reduced opacity so they read through while the section
   keeps its brand colour and the heading stays legible. */
.page-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--color-navy-900) 0%, var(--color-navy-800) 55%, #0F2657 100%);
  opacity: 0.85;
}

.page-banner__inner { position: relative; max-width: 46rem; }
.page-banner h1 {
  color: var(--color-white);
  font-size: var(--fs-2xl);
  letter-spacing: -0.01em;
}
.page-banner__lead {
  margin-top: var(--space-sm);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
}

/* ---------- 3. Search & filter panel ---------- */
.property-finder { padding-top: var(--space-xl); }

.property-finder__panel {
  position: relative;
  z-index: 2;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
}

/* Search field */
.property-finder__search { position: relative; margin-bottom: var(--space-md); }
.property-finder__search-icon {
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
}
.property-finder__search input {
  width: 100%;
  padding: 0.9em 1em 0.9em 2.75em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-navy-900);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.property-finder__search input::placeholder { color: var(--color-muted); }
.property-finder__search input:focus { border-color: var(--color-navy-700); background: var(--color-white); }
.property-finder__search input[type="search"]::-webkit-search-decoration,
.property-finder__search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.property-finder__divider { height: 1px; background: var(--color-border); margin-block: var(--space-md); }

/* Area pills — visually consistent with .filter-btn on the homepage, kept as a
   distinct class/attribute set so this page's JS never double-binds with any
   shared site script that may already target .filter-btn / [data-filter]. */
.property-finder__areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}
.area-pill {
  padding: 0.55em 1.2em;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy-900);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.area-pill:hover { border-color: var(--color-navy-900); }
.area-pill.is-active { background: var(--color-navy-900); border-color: var(--color-navy-900); color: var(--color-white); }

/* Type / Bedrooms / Max Price row */
.property-finder__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.select-field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.select-field label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-navy-900); }
.select-field__control { position: relative; }
.select-field select {
  width: 100%;
  appearance: none;
  padding: 0.75em 2.5em 0.75em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-navy-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: border-color var(--t-fast);
}
.select-field select:focus { border-color: var(--color-navy-700); }
.select-field__chevron {
  position: absolute;
  right: 0.85em;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  color: var(--color-muted);
  pointer-events: none;
}

.property-finder__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  padding: 0.75em 1em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-navy-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.property-finder__reset .icon { width: 0.9em; height: 0.9em; }
.property-finder__reset:hover { background: var(--color-surface); color: var(--color-error); }

/* ---------- 4. Results count ---------- */
.properties__count { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-muted); }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .page-banner__slide { width: 20rem; }
  .property-finder__row { grid-template-columns: repeat(3, 1fr); align-items: end; }
  .property-finder__reset { grid-column: 1 / -1; justify-self: end; }
}

@media (min-width: 1024px) {
  .page-banner { padding-bottom: 10rem; }
  .page-banner__slide { width: 26rem; }
  .property-finder { padding-top: 0; }
  .property-finder__panel { margin-top: -6rem; padding: var(--space-xl); box-shadow: var(--shadow-lg); }
  .property-finder__row { grid-template-columns: repeat(3, 1fr) auto; }
  .property-finder__reset { grid-column: auto; justify-self: stretch; }
}