/**
 * RIVIERA MAYA ELITE - listing listing + cards
 * Place in: themes/custom/bootstrap_business/css/bfr-listing.css
 * (See the tutorial for how to load it as a library.)
 */

/* ============ LISTING GRID (the View) ============ */
/* The View has the CSS class "bfr-listing" (set in Advanced > CSS class). */
.bfr-listing .view-content {
  display: grid;
  grid-template-columns: 1fr;     /* mobile: 1 column */
  gap: 1.5rem;
}

@media (min-width: 576px) {
  .bfr-listing .view-content {
    grid-template-columns: repeat(2, 1fr);  /* tablet: 2 columns */
  }
}

@media (min-width: 992px) {
  .bfr-listing .view-content {
    grid-template-columns: repeat(3, 1fr);  /* desktop: 3 columns */
  }
}

/* Reset the default row margins so the grid gap controls spacing. */
.bfr-listing .views-row {
  margin: 0;
}

/* ============ PROPERTY CARD (teaser) ============ */
.bfr-card {
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.bfr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12) !important;
}

.bfr-card-img {
  position: relative;
  overflow: hidden;
}

.bfr-card-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;   /* keeps every image the same height, no distortion */
  display: block;
  transition: transform .3s ease;
}

.bfr-card:hover .bfr-card-img img {
  transform: scale(1.04);
}

.bfr-card-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
}

.bfr-card-stats i {
  font-size: 1rem;
}

.bfr-card .bfr-price-now {
  font-size: 1.25rem;
  line-height: 1.2;
}

.bfr-card .bfr-price-old {
  text-decoration: line-through;
}