/* ── Override dark-grey Webflow variable for better readability ────── */
:root {
  --color-grey: #b0b3b5;
}

/* ── Property Card Fixes ────────────────────────────────────────────── */

/* Make all cards stretch to fill their grid cell equally */
.property-list {
  place-items: stretch stretch;
}

/* Fixed image container height so all cards match */
.property-image {
  height: 240px;
}

.property-image .reveal-image-trigger {
  height: 100%;
}

/* Ensure images fill the container and crop to fit */
.reveal-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Give the card body some breathing room */
.property-card-body {
  padding-top: 4px;
}

/* Smaller title and price — truncate long names */
.property-name {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.property-price {
  font-size: 18px;
}

/* Better spacing in top row (title + price) */
.property-card-body-top-row {
  align-items: baseline;
  margin-bottom: 12px;
  overflow: hidden;
}

/* Smaller bottom row text */
.property-card-body-bottom-row {
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}

/* Don't clip location text so aggressively */
.property-location {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

/* Size wrapper: keep items from cramming together */
.property-size-wrapper {
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Remove the extra inline margin-left on size items — gap handles it */
.property-size-wrapper .property-size + .property-size {
  margin-left: 0 !important;
}

/* Price should never wrap */
.property-price {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Fix listing images staying white until scroll (Webflow reveal animation) ── */
.reveal-image-cover {
  opacity: 0 !important;
}

/* ── Property details page: fix dark text on dark background ── */
.property-info-accordion-label-text,
.property-details-info-heading,
.property-info-specification-title,
.property-info-specification-text {
  color: #fff !important;
}

/* ── Ensure Save/Share buttons are always visible (Webflow animation fallback) ── */
.property-hero-buy-button-wrapper,
.products-hero-button {
  opacity: 1 !important;
  transform: none !important;
}

/* Save button on property page */
.fav-btn {
  position: relative;
  z-index: 2;
}

/* ── Prevent cards from overflowing their container on mobile ── */
.property-card {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.w-dyn-item {
  max-width: 100%;
  overflow: hidden;
}

.carousel-card {
  max-width: 100%;
  overflow: hidden;
}


/* ── Responsive tweaks ─────────────────────────────────────────────── */

/* Tablet */
@media screen and (max-width: 991px) {
  .property-image {
    height: 200px;
  }
}

/* Large mobile */
@media screen and (max-width: 767px) {
  /* Reduce section padding */
  .section-padding.padding-150x150 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .section-padding.padding-120x120 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Prevent horizontal overflow on sections */
  .section-home-new-listing,
  .section-properties-hero,
  .home-new-listing-inner,
  .container {
    overflow-x: hidden;
  }

  /* Property cards: single column on mobile */
  .property-list {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .property-image {
    height: 220px;
  }

  /* Carousel cards — fit within viewport */
  .carousel-card {
    min-width: min(260px, calc(100vw - 3rem)) !important;
  }

  /* Property detail hero */
  .property-hero-title {
    font-size: 1.5rem !important;
  }
  .property-hero-price {
    font-size: 1.75rem !important;
  }
  .property-hero-price-details-text {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Property info accordion */
  .property-info-accordion-label-text {
    font-size: 1rem !important;
  }
  .property-details-feature-content {
    grid-template-columns: 1fr !important;
  }

  /* Contact hero image hidden on small screens */
  .section-contact-hero .container > div:last-child img {
    height: 180px !important;
  }

  /* Testimonial cards */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Small mobile */
@media screen and (max-width: 479px) {
  .property-location {
    max-width: 100%;
    white-space: normal;
  }
  .property-card-body-bottom-row {
    gap: 6px;
  }
  .property-image {
    height: 200px;
  }
  .property-name {
    font-size: 15px;
  }
  .property-price {
    font-size: 15px;
  }

  /* Carousel cards: nearly full width on small screens */
  .carousel-card {
    min-width: calc(100vw - 3rem) !important;
  }

  /* Hero heading */
  .home-hero-heading {
    font-size: 1.75rem !important;
  }

  /* Carousel arrows */
  .carousel-arrows button {
    width: 36px !important;
    height: 36px !important;
  }

  /* Property hero */
  .property-hero-title {
    font-size: 1.25rem !important;
  }

  /* Share buttons row wrap */
  .products-hero-button + div {
    flex-wrap: wrap;
  }

  /* Webflow section padding tighten */
  .section-padding.padding-150x150 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .section-padding.padding-148x60 {
    padding-top: 80px !important;
    padding-bottom: 30px !important;
  }
}