/* --------------------------------------------------------------------------
 * Term archive intro (Residential, Commercial, a location)
 * ----------------------------------------------------------------------- */

.wb-listings-intro {
  padding-block: calc(var(--wb-header-h) + var(--wb-space-5)) var(--wb-space-3);
}

/*
 * The search bar clears the fixed header on its own, but on a term archive
 * this intro has already done that — so the bar drops its own top padding
 * rather than adding the header height a second time.
 */
.wb-listings-intro + .wb-searchbar {
  padding-top: 0;
}

.wb-listings-intro__title {
  margin: 0;
  color: var(--wb-primary-dark);
  font-size: var(--wb-fs-advant);
}

.wb-listings-intro__text {
  margin-top: var(--wb-space-3);
  max-width: 46rem;
  color: var(--wb-gray-600);
  font-size: var(--wb-fs-body);
  line-height: 1.7;
}

.wb-listings-intro__text p {
  margin: 0;
}


/**
 * Apartments archive.
 *
 * Desktop values come from the D/Apartments frame (1440px), mobile from
 * M/Apartments (390px). Type sizes are fluid between the two, following the
 * convention in tokens.css (a straight line through the 393px and 1440px
 * values, clamped at both ends).
 *
 * The listing card at the bottom is also used by the detail page's
 * "You might be interested in" row, which loads this file for it.
 */

/* Colours this page draws that the shared palette does not carry. */
:root {
  --wb-apts-ink:     #00001C; /* heading, count, card title and location */
  --wb-apts-muted:   #737B8E; /* field and dropdown text */
  --wb-apts-icon:    #7B8394; /* location pin */
  --wb-apts-caret:   #1A1F36; /* dropdown carets */
  --wb-apts-border:  #8C92A0; /* field outlines */
  --wb-apts-rule:    #E4E4EE; /* hairline under the search bar */
  --wb-apts-shadow:  0 4px 14px rgba(0, 0, 28, 0.08);
  --wb-apts-badge:   #3F7248; /* "Owner Installments" text */
  --wb-apts-badge-icon: #5A8F63;
}

/* ==========================================================================
 * Filter bar
 * Sits under the fixed header and closes with a hairline rule.
 * ======================================================================= */

.wb-searchbar {
  padding-top: var(--wb-header-h);
  background-color: var(--wb-white);
  border-bottom: 1px solid var(--wb-apts-rule);
}

.wb-searchbar__head {
  padding-block: 1.375rem 1.0625rem; /* 22px 17px */
}

@media (min-width: 64rem) {
  .wb-searchbar__head {
    padding-block: 1.125rem 1.5625rem; /* 18px 25px */
  }
}

.wb-searchbar__title {
  margin: 0;
  color: var(--wb-apts-ink);
  font-size: clamp(1.475rem, 1.2545rem + 0.8978vw, 2.0625rem); /* 23.6 → 33 */
  font-weight: var(--wb-fw-bold);
  line-height: 1.36;
}

.wb-searchbar__body {
  padding-bottom: var(--wb-space-5);
}

@media (min-width: 64rem) {
  .wb-searchbar__body {
    padding-bottom: 2.0625rem; /* 33px */
  }
}

/*
 * Stacked on mobile; two columns on a tablet or small laptop, with the
 * location across the top; one row once the four fields and the button fit
 * (1200px viewport and up).
 */
.wb-searchbar__form {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-4);
}

@media (min-width: 48rem) {
  .wb-searchbar__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wb-searchbar__form .wb-field--grow {
    grid-column: 1 / -1;
  }
}

@media (min-width: 75rem) {
  .wb-searchbar__form {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
 * Form fields
 * 55px tall (56px at desktop) with a 1px outline. The mobile frame rounds
 * them by 3px; the desktop frame draws them square.
 * ----------------------------------------------------------------------- */

.wb-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem; /* 20px, pin to text */
  height: 3.4375rem; /* 55px on mobile */
  padding-inline: 2rem; /* 32px */
  background-color: var(--wb-white);
  border: 1px solid var(--wb-apts-border);
  border-radius: 3px;
}

@media (min-width: 64rem) {
  .wb-field {
    height: 3.5rem; /* 56px */
    border-radius: 0;
  }
}

@media (min-width: 75rem) {
  .wb-field {
    width: 12.5rem; /* 200px */
    flex: 0 0 auto;
  }

  /* The location field takes the remaining width (388px in the comp). */
  .wb-field--grow {
    width: auto;
    flex: 1 1 13.75rem;
  }
}

/* The location field's pin sits a little further in than the dropdown text. */
.wb-field--grow {
  padding-inline-start: 2.1875rem; /* 35px */
}

.wb-field__icon {
  flex-shrink: 0;
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  color: var(--wb-apts-icon);
}

/*
 * Scoped to .wb-field so these beat base.css's element selectors
 * (`input[type="text"]`, `select`), which would otherwise re-apply their own
 * border and draw a divider inside the field.
 */
.wb-field .wb-field__control {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--wb-apts-muted);
  font-size: 1.0625rem; /* 17px at both sizes */
  line-height: 1.35;
}

.wb-field .wb-field__control::placeholder {
  color: var(--wb-placeholder);
  opacity: 1;
}

.wb-field .wb-field__control:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

/* The whole field shows the focus ring, rather than the bare control. */
.wb-field:focus-within {
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 3px rgba(43, 118, 160, 0.15);
}

/*
 * Native select arrow removed in favour of the design's caret. The select
 * runs on under the caret to the field's right edge, so the whole field is
 * clickable and short fields such as "Sort by" keep room for their text; its
 * right padding is the caret's inset plus the caret itself.
 */
.wb-field select.wb-field__control {
  appearance: none;
  -webkit-appearance: none;
  margin-inline-end: -2rem;
  padding-inline-end: 3.25rem; /* 52px */
  cursor: pointer;
}

@media (min-width: 64rem) {
  .wb-field select.wb-field__control {
    padding-inline-end: 2.75rem; /* 44px */
  }
}

.wb-field__chevron {
  position: absolute;
  inset-inline-end: 2.125rem; /* 34px */
  width: 1rem; /* 16px */
  height: 1rem;
  color: var(--wb-apts-caret);
  pointer-events: none;
}

@media (min-width: 64rem) {
  .wb-field__chevron {
    inset-inline-end: 1.5rem; /* 24px */
  }
}

.wb-searchbar__submit {
  height: 3.75rem; /* 60px */
  padding: 0.875rem var(--wb-space-4);
  gap: var(--wb-space-4);
  border-radius: 3px;
  font-size: 1.0625rem; /* 17px */
}

@media (min-width: 64rem) {
  .wb-searchbar__submit {
    height: 3.5rem; /* 56px, level with the fields */
    border-radius: 0;
  }
}

@media (min-width: 75rem) {
  .wb-searchbar__submit {
    width: 9.25rem; /* 148px */
    flex: 0 0 auto;
  }
}

.wb-searchbar__arrow {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
}

@media (min-width: 64rem) {
  .wb-searchbar__arrow {
    width: 1.125rem; /* 18px */
    height: 1.125rem;
  }
}

/* ==========================================================================
 * Results
 * ======================================================================= */

.wb-listings {
  padding-block: var(--wb-space-5) var(--wb-space-10);
}

/*
 * The listing pages keep the design's 1200px of content at any desktop
 * width, so each card is the drawn 384×411 from 1440px up (the search bar
 * and the count row share the column). Narrower screens scale down.
 */
@media (min-width: 64rem) {
  .wb-listings-intro > .wb-container,
  .wb-searchbar > .wb-container,
  .wb-listings > .wb-container {
    max-width: calc(75rem + (var(--wb-gutter-lg) * 2)); /* 1200px + gutters */
  }
}

@media (min-width: 64rem) {
  .wb-listings {
    padding-block: 1.9375rem 8.75rem; /* 31px 140px */
  }
}

.wb-listings__head {
  display: flex;
  align-items: center;
  gap: var(--wb-space-4);
  margin-bottom: var(--wb-space-4);
}

@media (min-width: 64rem) {
  .wb-listings__head {
    gap: var(--wb-space-5);
    margin-bottom: var(--wb-space-5);
  }
}

.wb-listings__count {
  flex: 1 1 auto;
  margin: 0;
  color: var(--wb-apts-ink);
  font-size: clamp(1.1063rem, 1.0406rem + 0.2674vw, 1.2813rem); /* 17.7 → 20.5 */
  letter-spacing: 0.01em;
  line-height: 1.36;
}

.wb-listings__sort {
  width: 9.1875rem; /* 147px */
  flex: 0 0 auto;
}

.wb-listings__sort .wb-field__chevron {
  inset-inline-end: 1.75rem; /* 28px */
}

.wb-listings__sort select.wb-field__control {
  padding-inline-end: 2.875rem; /* 46px */
}

@media (min-width: 64rem) {
  .wb-listings__sort {
    width: 11.8125rem; /* 189px */
  }

  .wb-listings__sort .wb-field__chevron {
    inset-inline-end: 2.25rem; /* 36px */
  }

  .wb-listings__sort select.wb-field__control {
    padding-inline-end: 3.375rem; /* 54px */
  }
}

/* --------------------------------------------------------------------------
 * Grid
 * One column on mobile, three at desktop, 24px apart.
 * ----------------------------------------------------------------------- */

.wb-listings__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wb-space-5);
}

@media (min-width: 48rem) {
  .wb-listings__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .wb-listings__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
 * Listing card
 * Square-cornered, white, on a soft shadow. The text block has a minimum
 * height so a two-line title does not make its card taller than its row.
 * ----------------------------------------------------------------------- */

.wb-listing {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--wb-white);
  box-shadow: var(--wb-apts-shadow);
  overflow: hidden;
  transition: transform var(--wb-transition), box-shadow var(--wb-transition);
}

.wb-listing:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 28, 0.12);
}

.wb-listing__media {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--wb-surface);
}

.wb-listing__img {
  display: block;
  width: 100%;
  height: 16.8125rem; /* 269px */
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wb-listing:hover .wb-listing__img {
  transform: scale(1.04);
}

/* "Owner Installments": a frosted white tag in the photo's top-left corner. */
.wb-listing__badge {
  position: absolute;
  z-index: 2;
  inset-block-start: 0.875rem; /* 14px */
  inset-inline-start: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  height: 1.625rem; /* 26px */
  padding-inline: 0.625rem; /* 10px */
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: var(--wb-radius-sm);
  color: var(--wb-apts-badge);
  font-size: var(--wb-fs-micro); /* 12px */
  font-weight: var(--wb-fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

.wb-listing__badge-icon {
  flex-shrink: 0;
  width: 0.8125rem; /* 13px */
  height: 0.8125rem;
  color: var(--wb-apts-badge-icon);
}

.wb-listing__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 8.0625rem; /* 129px: a 396px card less its 267px photo */
  padding: 0.8125rem var(--wb-space-4) var(--wb-space-4); /* 13px 16px 16px */
}

@media (min-width: 64rem) {
  .wb-listing__body {
    min-height: 8.875rem; /* 142px: a 411px card less its 269px photo */
    padding-top: var(--wb-space-3);
  }
}

.wb-listing__title {
  margin: 0;
  color: var(--wb-apts-ink);
  font-size: clamp(1.1188rem, 1.046rem + 0.2961vw, 1.3125rem); /* 17.9 → 21 */
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.005em;
  line-height: 1.34;
}

.wb-listing__link {
  color: inherit;
}

.wb-listing__link:hover,
.wb-listing__link:focus {
  color: var(--wb-primary);
}

/* "273 m² · 3 bedrooms" */
.wb-listing__facts {
  margin: 0.25rem 0 0;
  color: var(--wb-primary);
  font-size: clamp(0.9938rem, 0.9679rem + 0.1051vw, 1.0625rem); /* 15.9 → 17 */
  font-weight: var(--wb-fw-bold);
  letter-spacing: 0.005em;
  line-height: 1.36;
}

.wb-listing__address {
  margin: 0.375rem 0 0;
  color: var(--wb-apts-ink);
  font-size: clamp(0.9938rem, 0.9679rem + 0.1051vw, 1.0625rem); /* 15.8 → 17 */
  letter-spacing: 0.005em;
  line-height: 1.36;
}

/* --------------------------------------------------------------------------
 * Show more / empty state
 * Only drawn when there is a next page; the design's seven results fit one.
 * ----------------------------------------------------------------------- */

.wb-listings__more {
  display: flex;
  justify-content: center;
  margin-top: var(--wb-space-7);
}

/* The outline button is 184px wide with a 2px border. */
.wb-btn--wide {
  width: 11.5rem;
  border-width: 2px;
}

.wb-listings__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wb-space-5);
  padding-block: var(--wb-space-11);
  text-align: center;
}

.wb-listings__empty-text {
  margin: 0;
  color: var(--wb-gray-500);
  font-size: var(--wb-fs-lead);
}