/**
 * CLS stability overrides (aqar-turkey)
 * Load after akkus / mobile-hero. Scope selectors to real homepage/listing widgets.
 */

/* --- Images: preserve intrinsic ratio from width/height attributes --- */
img[width][height] {
  height: auto;
  max-width: 100%;
}

/* --- Property card image wells (4:3 matches PHP width="400" height="300") --- */
.property-listing .property-featured-image,
#featured-properties .property-featured-image,
.ep-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.property-listing .property-featured-image img,
.property-listing .property-featured-image .offers-img,
.property-listing .property-featured-image .newImg,
#featured-properties .property-featured-image img,
#featured-properties .property-featured-image .offers-img,
#featured-properties .property-featured-image .newImg,
.ep-image-wrapper .ep-image-img,
.ep-image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Great Offers: reserve space & clip pre-Owl vertical stack (major CLS source) --- */
#featured-properties .great-offers-wrapper {
  position: relative;
  min-height: 31rem;
}

@media (min-width: 992px) {
  #featured-properties .great-offers-wrapper {
    min-height: 29rem;
  }
}

/*
 * Before Owl mounts, 12 <li> items can stack to thousands of px tall.
 * Temporarily clip so <main> does not jump when Owl initializes.
 */
#featured-properties ul.great-offers-carousel:not(.owl-loaded) {
  min-height: 31rem;
  max-height: 34rem;
  overflow: hidden;
}

@media (min-width: 992px) {
  #featured-properties ul.great-offers-carousel:not(.owl-loaded) {
    min-height: 28rem;
    max-height: 30rem;
  }
}

#featured-properties ul.great-offers-carousel.owl-loaded {
  max-height: none;
  min-height: 0;
}

/* Owl outer viewport: avoid zero-height gap while stage measures */
#featured-properties .owl-carousel.owl-loaded .owl-stage-outer {
  min-height: 22rem;
}

@media (min-width: 992px) {
  #featured-properties .owl-carousel.owl-loaded .owl-stage-outer {
    min-height: 24rem;
  }
}

/* --- Editor's picks grid row stability --- */
.editor-4-grid {
  align-items: stretch;
}

.ep-card {
  min-height: 0;
}

/* --- Mobile homepage: reduce main CLS from hero finalize + H1 font metrics --- */
@media (max-width: 991px) {
  body.home .featured-blocks .homepage-intro-container {
    min-height: 11rem;
  }

  body.home .featured-blocks .homepage-h1 {
    line-height: 1.25;
    min-height: 2.5em;
  }

  body.home .editors-picks-wrapper {
    min-height: 12rem;
  }
}