/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Version:      1.0.0
*/

/* Your custom CSS goes below */
/* ===========================
   Real Estate Manager (REM)
   Search Results – 4 columns + hide heading
   =========================== */

/* Hide the "Search Results (x)" heading (cover common cases) */
.rem-search-results .rem-search-heading,
.rem-search-results h2.rem-search-heading,
.rem-search-results h2.rem-results-title,
.rem-search-results .rem-results-title,
.rem-search-results h1,
.rem-search-results h2 {
  display: none !important;
}

/* Use flex on rows so we can control widths reliably */
.rem-search-results .row,
.rem-search-results .rem-row {
  display: flex;
  flex-wrap: wrap;
}

/* Force each property card to 25% on desktop.
   We target common wrappers REM uses. Increase specificity + !important to beat theme/REM CSS. */
.rem-search-results .rem-property-box,
.rem-search-results [class*="col-"],
.rem-search-results .col-md-6,
.rem-search-results .col-sm-6,
.rem-search-results .col-lg-6 {
  box-sizing: border-box;
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
  float: none !important;      /* cancel legacy floats if present */
  clear: none !important;
  padding-left: 12px;          /* keep gutters */
  padding-right: 12px;
}

/* Grid gap fallback (if you see cards too cramped, tweak paddings above) */
.rem-search-results .row,
.rem-search-results .rem-row {
  margin-left: -12px;
  margin-right: -12px;
}

/* Tablet: 2 per row */
@media (max-width: 991.98px) {
  .rem-search-results .rem-property-box,
  .rem-search-results [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* Mobile: 1 per row */
@media (max-width: 575.98px) {
  .rem-search-results .rem-property-box,
  .rem-search-results [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Style REM "Details" button */
.rem-property-box .rem-details-button,
.rem-property-box a.btn.rem-details-button {
  background-color: #1C3E94 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
}