/* ============================================================
   Reuses styles.css/script.js (real site chrome, plus the shared
   .hm-slider hero-slideshow component) with scoped styles here for
   just the properties grid below the hero. The hero slideshow's own
   CSS/JS now live in styles.css/script.js since index.html reuses the
   same component - see the "Properties showcase" comment there.
   ============================================================ */

/* -------------------- Filters: tenure + completion --------------------
   Two independent single-select groups (AND logic). District used to be
   the filter, but 4 of the 6 districts held exactly one property, so a
   pill returned a single card. District now lives on each card's fact
   line instead. */
.property-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2.75rem;
  margin-bottom: 0.9rem;
}

.property-filter__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Location has seven pills, so it takes its own row; Tenure and Completes
   sit side by side beneath it. */
.property-filter__group--wide {
  flex-basis: 100%;
}

.property-filter__label {
  color: var(--gray-400);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "Showing N of 8" plus, when a filter is on, a one-tap way to ask Kay about
   the pricing of exactly what is on screen. */
.property-filter__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.property-filter__count {
  margin: 0;
  color: var(--gray-400);
  font-size: 0.9rem;
}

.property-filter__ask {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gray-500);
  text-underline-offset: 0.15em;
  transition: text-decoration-color var(--duration-base) var(--ease-out-quart);
}

.property-filter__ask:hover,
.property-filter__ask:focus-visible {
  text-decoration-color: currentColor;
}

.property-filter__ask[hidden] {
  display: none;
}

.section-heading p a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gray-500);
  text-underline-offset: 0.15em;
  transition: text-decoration-color var(--duration-base) var(--ease-out-quart);
}

.section-heading p a:hover,
.section-heading p a:focus-visible {
  text-decoration-color: currentColor;
}

.property-filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.property-filter__btn {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--gray-500);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.property-filter__btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* An option that would return nothing with the current other choices gets a
   dashed border and a slightly lighter (still >= 4.5:1) label. It is not
   disabled: it stays clickable so a visitor can change course, and JS adds
   a spoken note to its label. Opacity is deliberately not used, since a
   faded clickable control fails text contrast. */
.property-filter__btn.is-unavailable:not([aria-pressed='true']) {
  border-style: dashed;
  color: var(--gray-400);
}

.property-filter__btn[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* -------------------- Every-property grid --------------------
   A fixed 3-column track (not auto-fit/minmax) so a card's width
   never depends on how many cards the current filter leaves visible
   - auto-fit recalculates its column count from the visible item
   count and stretches survivors to fill the row, which is exactly
   the "filtered result looks broken/blown-up" grid gotcha. Fixed
   columns mean a filtered-down row just leaves empty cells instead. */
/* 24px in the source (--_sizes---gaps--gap-07), constant across every
   breakpoint it defines - not fluid, so fixed here too. */
.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .property-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .property-grid {
    grid-template-columns: 1fr;
  }
}

/* Full-bleed photo card, single clickable unit (an <a>, not a nested
   button) - name and district float in a dark overlay bar at the
   bottom rather than living in a separate body section below.
   Layout values (radii, padding, gaps, colors, type scale) pulled
   directly from noteen.webflow.io's own compiled CSS
   (.single-character/.character-inner/.character-price-wrapper),
   not estimated from the reference screenshot. Font-family is left
   unset deliberately, so it inherits the site's own General Sans;
   weight/letter-spacing on the uppercase text below are this site's
   own convention (positive tracking, 600/700 weight, matching
   .properties-label elsewhere), not the source's negative-tracking
   numbers, which were tuned for a different typeface. */
.property-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 3.75rem;
  overflow: clip;
  background: var(--ink);
  box-shadow: 0 20px 40px rgba(10, 10, 10, 0.12);
}

/* The class's own `display: block` above beats the browser's default
   `[hidden] { display: none }` at equal specificity (author CSS wins
   over the UA stylesheet) - without this, the filter's `hidden`
   attribute would still be set correctly but do nothing visually. */
.property-card[hidden] {
  display: none;
}

.property-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.property-card:hover .property-card__photo {
  transform: scale(1.04);
}

/* Outer bar: 12px/12px top corners, 36px/36px bottom corners (source
   var(--radius-02)/var(--radius-05)) - a real asymmetric radius, not
   a uniform one, so the bottom corners echo the card's own big
   radius while the top stays tight against the photo. */
.property-card__overlay {
  position: absolute;
  z-index: 1;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.875rem 1.25rem 1rem;
  border-radius: 0.75rem 0.75rem 2.25rem 2.25rem;
  background: rgb(38, 38, 38);
}

/* Row 1: name + tenure pill. Row 2 (.property-card__facts) spans the full
   bar width, so it isn't squeezed into the name column. */
.property-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.property-card__name {
  flex: 1;
  min-width: 0;
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.18;
  text-transform: uppercase;
}

/* Tenure pill: a real uniform 8px radius (not asymmetric) and a frosted
   glass panel (10%-white + blur), not a flat gray fill - the source's
   actual CSS is glass over whatever sits behind it. It replaced the old
   "District" chip: tenure is the fact a buyer needs first, and it is one
   short word, so it always fits. */
.property-card__tenure {
  flex: none;
  padding: 0.45rem 0.8rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* District · completion · size range, one quiet line. White at 72% on
   rgb(38,38,38) is about 8.5:1 contrast. Price is never shown. */
.property-card__facts {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* Each fact stays whole: on a very narrow phone the line may wrap, but only
   at a "·" separator, never inside "504–1,272 sq ft". */
.property-card__facts span {
  white-space: nowrap;
}

/* Touch-sized pills on phones (44px). */
@media (max-width: 720px) {
  .property-filter__btn {
    min-height: 2.75rem;
  }
}

/* -------------------- Empty filter state --------------------
   A dead end becomes a conversation: no combination of filters is left
   without a next step. (Every component below that sets `display` also
   restates [hidden], since a class-level display beats the UA's
   [hidden] rule at equal specificity.) */
.property-empty {
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
}

.property-empty[hidden] {
  display: none;
}

.property-empty .property-empty__title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
}

.property-empty p {
  max-width: 34rem;
  color: var(--gray-500);
}

/* -------------------- Lead-magnet colour theme --------------------
   One place to change the colour of the "Wondering about the price?" card. Currently SAGE (light). Dark alternatives, all contrast-checked
   (text >= 4.5:1), are set by swapping these eight values and using
   white-ish fg at reduced opacity for muted/line:
     Deep Forest    bg #1f2e27  fg #f2efe9  accent #c9d6ba  accent-ink #1f2e27
     Forest & Brass bg #1f2e27  fg #f2efe9  accent #c9a45c  accent-ink #1f2e27
     Lagoon         bg #17393a  fg #f2efe9  accent #e2c58e  accent-ink #17393a
     Clay           bg #6b3626  fg #f7eee4  accent #edcdb5  accent-ink #4a2317
   This is a deliberate, single-component exception to the site's grayscale
   rule, so the colour itself marks "this is how you talk to Kay". */
.property-quiz__panel {
  --lead-bg: #cbd5c0;
  --lead-fg: #1c2a22;
  --lead-muted: #3b4a40;
  --lead-line: rgba(28, 42, 34, 0.28);
  --lead-line-strong: #5f6f64;
  --lead-hover: rgba(28, 42, 34, 0.07);
  --lead-accent: #1c2a22;
  --lead-accent-ink: #f2efe9;
}

/* Sweep-fill buttons inside the band take the theme, not the dark-page default. */
.property-quiz__panel .btn {
  --btn-ink: var(--lead-accent);
  --btn-contrast: var(--lead-accent-ink);
}

/* The one action this band exists for ("Get the pricing from Kay") is solid at
   rest and inverts on hover; Next stays a quieter outline. */
.property-quiz__actions .btn,
.property-quiz__cta .btn {
  background: var(--lead-accent);
  --btn-ink: var(--lead-accent-ink);
  --btn-contrast: var(--lead-accent);
}

/* While the card is open its own button steps back to an outline, so the one
   solid button is the action inside ("Get the pricing from Kay"). */
.property-quiz__panel[data-open='true'] .property-quiz__toggle {
  background: transparent;
  --btn-ink: var(--lead-accent);
  --btn-contrast: var(--lead-accent-ink);
}

/* -------------------- "Wondering about the price?" card --------------------
   Sits under the intro, above the filters, as a compact invitation (Kay's photo,
   one line, one button) that opens in place into the three questions, then what
   fits, then Kay. No modal and no jump to the bottom of the page. Without JS it
   is a plain WhatsApp link (properties.js swaps in the toggle button). */
.property-quiz {
  margin-block: 0.5rem 2.25rem;
  scroll-margin-top: 6.5rem;
}

.property-quiz__panel {
  padding: 1.5rem;
  border-radius: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--lead-bg);
  color: var(--lead-fg);
}

@media (min-width: 600px) {
  .property-quiz__panel {
    padding: 1.75rem 2rem;
  }
}

@media (min-width: 900px) {
  .property-quiz__panel {
    padding: 2rem 2.5rem;
  }
}

.property-quiz__head {
  display: grid;
  gap: 1.25rem 2.5rem;
}

@media (min-width: 900px) {
  .property-quiz__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.property-quiz__intro h2 {
  color: var(--lead-fg);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
}

.property-quiz__intro p {
  max-width: 38rem;
  margin-top: 0.6rem;
  color: var(--lead-muted);
  font-size: 1rem;
}

.property-quiz__cta {
  display: grid;
  gap: 0.6rem;
  justify-items: stretch;
}

/* The fallback link and the toggle are never both shown. */
.property-quiz__cta [hidden] {
  display: none;
}

@media (min-width: 900px) {
  .property-quiz__cta {
    justify-items: center;
  }
}

.property-quiz__micro {
  margin: 0;
  color: var(--lead-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* Opens by growing in place. Collapsed content is visibility:hidden (with the
   change delayed until the collapse finishes) so it leaves the tab order and is
   hidden from screen readers. Under reduced motion the global rule makes it instant. */
.property-quiz__reveal {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 500ms var(--ease-out-quart), visibility 0s linear 500ms;
}

.property-quiz__panel[data-open='true'] .property-quiz__reveal {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 500ms var(--ease-out-quart), visibility 0s linear 0s;
}

/* Small inset so focus rings on the answer pills are not clipped by overflow. */
.property-quiz__reveal-inner {
  min-height: 0;
  margin: -0.25rem;
  padding: 0.25rem;
  overflow: hidden;
}

.property-quiz__body {
  max-width: 60rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--lead-line);
}

.property-quiz__progress {
  margin-bottom: 1.25rem;
  color: var(--lead-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.property-quiz__step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.property-quiz__step[hidden] {
  display: none;
}

.property-quiz__step legend {
  margin-bottom: 1.25rem;
  padding: 0;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
}

/* Legends and the result heading take programmatic focus on step change
   (for screen readers); they are not interactive, so no ring. */
.property-quiz__step legend:focus,
.property-quiz__result h3:focus {
  outline: none;
}

/* Why we are asking: sits directly under the question. */
.property-quiz__hint {
  max-width: 30rem;
  margin: -0.6rem 0 1.25rem;
  color: var(--lead-muted);
  font-size: 0.9rem;
}

.property-quiz__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.property-quiz__option label {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--lead-line-strong);
  border-radius: var(--radius-full);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.property-quiz__option label:hover {
  border-color: var(--lead-fg);
}

.property-quiz__option input:checked + label {
  background: var(--lead-accent);
  border-color: var(--lead-accent);
  color: var(--lead-accent-ink);
}

.property-quiz__option input:focus-visible + label {
  outline: 2px solid var(--lead-fg);
  outline-offset: 3px;
}

.property-quiz__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.property-quiz__back,
.property-quiz__restart {
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--lead-fg);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.property-quiz__back:hover,
.property-quiz__restart:hover {
  color: var(--lead-fg);
}

.property-quiz__back[hidden] {
  display: none;
}

.property-quiz .btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.property-quiz__result[hidden] {
  display: none;
}

.property-quiz__result h3 {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  line-height: 1.15;
}

.property-quiz__summary {
  margin-top: 0.6rem;
  color: var(--lead-muted);
  font-size: 0.95rem;
}

.property-quiz__matches {
  display: grid;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.property-quiz__match {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem;
  border: 1px solid var(--lead-line);
  border-radius: var(--radius-md);
  color: var(--lead-fg);
  transition: border-color 200ms ease, background 200ms ease;
}

.property-quiz__match:hover,
.property-quiz__match:focus-visible {
  border-color: var(--lead-fg);
  background: var(--lead-hover);
}

.property-quiz__match img {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 0.6rem;
  object-fit: cover;
}

.property-quiz__match-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.property-quiz__match-facts {
  margin-top: 0.2rem;
  color: var(--lead-muted);
  font-size: 0.8rem;
}

/* Keep each fact whole when the line wraps (same rule as the card bar). */
.property-quiz__match-facts span {
  white-space: nowrap;
}

.property-quiz__match-go {
  font-size: 0.85rem;
  font-weight: 600;
}

@media (max-width: 480px) {
  .property-quiz__match {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .property-quiz__match img {
    width: 3.5rem;
    height: 3.5rem;
  }

  .property-quiz__match-go {
    display: none;
  }
}

.property-quiz__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
  margin-top: 1.75rem;
}

.property-quiz__note {
  max-width: 30rem;
  margin-top: 1rem;
  color: var(--lead-muted);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: no-preference) {
  .property-quiz__step:not([hidden]),
  .property-quiz__result:not([hidden]) {
    animation: quiz-in 400ms var(--ease-out-quart);
  }

  @keyframes quiz-in {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* -------------------- Kay: the person behind the offer --------------------
   The lead magnet is a conversation, so it carries a real face and name
   (same photo and title as the homepage's "A Note From Kay"). */
.property-quiz__kay {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 0.9rem;
}

.property-quiz__kay img,
.property-quiz__ask img {
  flex: none;
  border: 2px solid var(--lead-line-strong);
  border-radius: 50%;
  object-fit: cover;
}

.property-quiz__kay img {
  width: 3rem;
  height: 3rem;
}

.property-quiz__kay p {
  display: grid;
  gap: 0.15rem;
  margin: 0;
}

.property-quiz__kay strong {
  color: var(--lead-fg);
  font-weight: 600;
}

.property-quiz__kay span {
  color: var(--lead-muted);
  font-size: 0.85rem;
}

.property-quiz__ask {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--lead-line);
  border-radius: var(--radius-md);
}

.property-quiz__ask img {
  width: 3rem;
  height: 3rem;
}

.property-quiz__ask-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}

.property-quiz__ask-text {
  margin: 0.3rem 0 0;
  color: var(--lead-muted);
  font-size: 0.9rem;
}

/* -------------------- Location + size accent (Clay) --------------------
   "Where" and "how big" are what buyers ask first, so they share one accent
   colour and Tenure stays neutral. Same hue, three shades, each tuned to its
   own background (all >= 4.5:1 for text):
     --pair-cream  deep clay   pill fill and group labels on the cream page
     --pair-bar    light clay  text on the dark card bar
     --pair-sage   clay        pill fill and text on the sage band
   Alternatives tried: Ochre #7c5c16 / #e0be72 / #6b4e12, Moss #3f5b43 /
   #afcda2 / #2f4d36, Lagoon #1f6a66 / #86d3cb / #175653. */
:root {
  --pair-cream: #9a4a2f;
  --pair-bar: #edab8c;
  --pair-sage: #8a3f27;
  --pair-on-fill: #f2efe9;
}

/* Filters on the cream page: Location and Bedrooms only. */
.property-filter__btn[data-filter-key='district'][aria-pressed='true'],
.property-filter__btn[data-filter-key='size'][aria-pressed='true'] {
  background: var(--pair-cream);
  border-color: var(--pair-cream);
  color: var(--pair-on-fill);
}

.property-filter__btn[data-filter-key='district']:not([aria-pressed='true']):hover,
.property-filter__btn[data-filter-key='size']:not([aria-pressed='true']):hover {
  border-color: var(--pair-cream);
  color: var(--pair-cream);
}

#filter-location-label,
#filter-size-label {
  color: var(--pair-cream);
}

/* Card fact line: the district (1st fact) and size range (3rd), not the date. */
.property-card__facts span:nth-child(1),
.property-card__facts span:nth-child(3) {
  color: var(--pair-bar);
  font-weight: 600;
}

/* Sage band: the Area and Size answers; Question 3 keeps the neutral green. */
.property-quiz__option input[name='area']:checked + label,
.property-quiz__option input[name='size']:checked + label {
  background: var(--pair-sage);
  border-color: var(--pair-sage);
  color: var(--pair-on-fill);
}

/* Result rows: tenure is the 1st span, then district (2nd), date (3rd), size (4th). */
.property-quiz__match-facts span:nth-child(2),
.property-quiz__match-facts span:nth-child(4) {
  color: var(--pair-sage);
  font-weight: 600;
}