/* =============================================================================
   PAGE: FOR SALE (Listing)
   Figma ref: node 108:73 "OURhaus - For Sale" (1440×3303)
   ============================================================================= */

/* ---- PROPERTY LISTINGS ---- */
/* Figma ref: node 108:247 — 3-col grid; same horizontal bounds as .site-nav__inner */
.for-sale-listings {
  margin-left: auto;
  margin-right: auto;
  padding: var(--section-padding-y) var(--container-padding);
  box-sizing: border-box;
}

.for-sale-listings__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  width: 100%;
  margin-top: 60px;
}

/* ---- BREAK BANNER ---- */
/* Figma ref: node 108:497 (1240×400 with right overlay card) */
.for-sale-break {
  padding: 0 var(--container-padding);
  margin-bottom: var(--section-padding-y);
}

/* Tablet/small desktop: keep card internals vertically balanced across 3 columns */
@media (max-width: 1410px) and (min-width: 769px) {
  .for-sale-listings__grid {
    align-items: stretch;
  }

  .for-sale-listings__grid .property-card {
    height: 100%;
  }

  .for-sale-listings__grid .property-card__body {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .for-sale-listings__grid .property-card__desc {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 16px;
  }

  .for-sale-listings__grid .property-card__pricing {
    min-height: 90px;
  }

  .property-card__divider--cta {
    margin: 10px 0 30px 0;
  }
}

/* ============================================================================
   MOBILE — max-width: 768px
   Figma ref: node 115:2018
   ============================================================================ */
@media (max-width: 768px) {

  /* Page hero: shorter on mobile */
  .page-hero {
    height: 250px;
  }

  /* Listings section */
  .for-sale-listings {
    padding: 60px 20px;
  }

  .for-sale-listings .section-header {
    margin-bottom: 40px;
  }

  /* 1-column card grid */
  .for-sale-listings__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 0;
  }

  /* Property card: full-width on mobile */
  .property-card {
    width: 100%;
  }

  .property-card__image {
    height: 260px;
  }

  .property-card__body {
    padding: 24px 20px;
  }

  /* Break banner wrapper */
  .for-sale-break {
    padding: 0 20px;
    margin-bottom: 60px;
  }
}