/* =========================================================================
   RESURE LUX — search results
   Loaded after main.css. A reading/scanning page: no scroll snap, no full-height
   sections. The results are rendered as static HTML for all four residences and
   filtered by hiding, so the page still answers without JavaScript.
   ========================================================================= */

.sr-page { padding-top: calc(var(--masthead-h, 5.75rem) + clamp(1.5rem, 4vw, 3rem)); }

/* ------------------------------- header ------------------------------- */

.sr-head { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.sr-head h1 {
  margin-top: .5rem;
  font-size: clamp(1.6rem, 4vw, 3.25rem);
  font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
}
.sr-head h1 em { font-style: normal; color: var(--on-bg-muted); }
.sr-count {
  margin-top: .9rem;
  font-size: var(--ms-small);
  color: var(--on-bg-faint);
}

/* ------------------------------- filters ------------------------------- */

.sr-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding-block: clamp(1rem, 2.4vw, 1.5rem);
  border-top: 1px solid var(--outline);
  border-bottom: 1px solid var(--outline);
}
.sr-filters__label {
  font-family: var(--font-display);
  font-size: var(--ms-caption); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--on-bg-muted);
  margin-right: .5rem;
}
.sr-chip {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 1.1rem;
  border: 1px solid var(--outline);
  font-size: var(--ms-caption);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-bg-muted);
  background: none; cursor: pointer;
  transition: color var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out),
              background var(--dur-sm) var(--ease-out);
}
.sr-chip:hover { color: var(--on-bg); border-color: var(--outline-strong); }
.sr-chip[aria-pressed='true'] {
  color: var(--ci-paper);
  border-color: var(--accent);
  background: rgba(168, 85, 247, .16);
  box-shadow: var(--glow-accent);
}

/* ------------------------------- results ------------------------------- */

.sr-results { display: grid; gap: clamp(.75rem, 1.8vw, 1.25rem);
  padding-block: clamp(1.5rem, 4vw, 3rem); }

/* A horizontal card, not the home page's full-bleed slide: results are scanned
   against each other, so the facts have to line up column-wise down the page. */
/* Results get a hover lift but no entrance reveal: animating search results in
   makes the answer feel slower than it is. */
.sr-card {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--outline);
  background: var(--surface);
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--lift-1);
  transition: border-color var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out),
              transform var(--dur-md) var(--ease-out);
}
@media (min-width: 720px) { .sr-card { grid-template-columns: 20rem 1fr; } }
@media (min-width: 1100px) { .sr-card { grid-template-columns: 26rem 1fr; } }
.sr-card:hover, .sr-card:focus-visible {
  border-color: var(--outline-strong);
  box-shadow: var(--lift-2);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .sr-card:hover, .sr-card:focus-visible { transform: none; }
}

.sr-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.sr-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.03);
  transition: transform 900ms var(--ease-out);
}
.sr-card:hover .sr-card__media img,
.sr-card:focus-visible .sr-card__media img { transform: scale(1.08); }
.sr-card__wm {
  position: absolute; z-index: 2;
  top: .75rem; right: .75rem;
  height: 22px; aspect-ratio: 500 / 840;
  background: var(--ci-paper); opacity: .55;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .75));
}

/* After the base on purpose: at equal specificity the later rule wins. The
   media cell stretches to the card's height in grid, so a fixed ratio here
   just leaves a gap under the picture. */
@media (min-width: 720px) { .sr-card__media { aspect-ratio: auto; } }

.sr-card__body {
  padding: clamp(1.25rem, 2.6vw, 2rem);
  display: flex; flex-direction: column; gap: .55rem;
}
.sr-card__index {
  font-family: var(--font-display);
  font-size: var(--ms-caption); font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--on-bg-muted);
}
.sr-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
}
.sr-card__tagline {
  max-width: 60ch;
  font-size: var(--ms-small); color: var(--on-bg-muted);
}
.sr-card__facts {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  margin-top: .35rem;
  font-size: var(--ms-small); color: var(--on-bg-muted);
}
.sr-card__sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.sr-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  margin-top: auto; padding-top: 1rem;
}
.sr-card__price { font-size: 1.0625rem; }

/* --------------------------- the empty state --------------------------- */

.sr-empty {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-top: 1px solid var(--outline);
}
.sr-empty h2 {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
}
.sr-empty p { margin-top: .9rem; max-width: 52ch; color: var(--on-bg-muted); font-size: var(--ms-small); }
.sr-empty__try {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1.5rem;
}
.sr-empty__try span {
  font-family: var(--font-display);
  font-size: var(--ms-caption); letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-bg-faint); margin-right: .35rem;
}

[hidden] { display: none !important; }

/* ---------------------- the way out of a dead end ----------------------
   Shown only when a query returns nothing. Smaller than a result card on
   purpose: these are a suggestion, not the answer, and should not read as
   though the search succeeded. */

.sr-recs { padding-bottom: clamp(3rem, 7vw, 6rem); }
.sr-recs__head {
  margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
  font-family: var(--font-display);
  font-size: var(--ms-caption); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--on-bg-faint);
}
.sr-recs__grid {
  display: grid; gap: clamp(1rem, 2.4vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .sr-recs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .sr-recs__grid { grid-template-columns: repeat(3, 1fr); } }

.sr-rec {
  display: flex; flex-direction: column;
  border: 1px solid var(--outline);
  text-decoration: none; color: inherit;
  overflow: hidden;
}
.sr-rec__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.sr-rec__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-lg) var(--ease-out);
}
.sr-rec:hover .sr-rec__media img { transform: scale(1.04); }

.sr-rec__body {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: clamp(0.9rem, 2vw, 1.15rem);
}
.sr-rec__index {
  font-family: var(--font-display);
  font-size: var(--ms-caption); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-bg-faint);
}
.sr-rec__name {
  font-family: var(--font-display);
  font-size: var(--ms-body); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-bg);
}
.sr-rec__meta { font-size: var(--ms-caption); color: var(--on-bg-muted); letter-spacing: 0.06em; }

@media (prefers-reduced-motion: reduce) {
  .sr-rec:hover .sr-rec__media img { transform: none; }
}