/* ============================================================
   CLS FIX — albertatownandcountry.com
   Add this entire block to:
   myRealPage → Settings → Site Custom CSS
   
   What this fixes:
   1. Hero images jumping as they load (no reserved height)
   2. MLS listings widget pushing content down on load
   3. Google Fonts causing text reflow on swap
   4. Diane's photo and CTA images
   5. Regional Explorer / card section images
   ============================================================ */


/* ============================================================
   FIX 1 — HERO IMAGES (inside <figure> elements)
   
   These are the large floated right images on every page.
   Targets only images inside <figure> tags so Diane's 
   portrait photo (which is NOT in a figure) is NOT affected.
   
   4:3 ratio — a 400px wide hero reserves 300px of height
   before the image arrives. Nothing below it shifts.
   ============================================================ */

figure img.fr-fic {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  display: block;
}

figure {
  min-height: 0;
}


/* ============================================================
   FIX 2 — FULL-WIDTH BLOCK IMAGES (fr-dib class)
   
   These are centered images that span the content column.
   16:9 is the most common ratio for landscape page images.
   ============================================================ */

img.fr-fic.fr-dib {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   FIX 3 — DIANE'S PORTRAIT PHOTO in CTA sections
   
   Diane's photo uses inline style="width: 160px; height: auto;"
   and class="fr-fic fr-dii" — we target it specifically using
   its fixed width so the aspect-ratio from Fix 1 does NOT
   apply to it. Diane's photo is roughly 1:1 square.
   
   The [style*="width: 160px"] attribute selector catches the
   inline style without touching any other image.
   ============================================================ */

img.fr-fic[style*="width: 160px"] {
  aspect-ratio: 1 / 1;
  height: auto;
}

img.fr-fic[style*="width: 150px"] {
  aspect-ratio: 1 / 1;
  height: auto;
}


/* ============================================================
   FIX 4 — MLS LISTINGS WIDGET
   
   The myRealPage listings widget loads asynchronously.
   Without a reserved height, when it injects the listings
   block it pushes all content below it down the page — 
   that is the single largest CLS source on the site.
   
   We reserve 800px minimum height on the widget container.
   On mobile this reduces to 600px. The actual rendered
   widget will fill this space; on pages with fewer listings
   there may be a small gap but no layout shift.
   ============================================================ */

.predef-search-container,
.mrp-weblet-listings,
div[data-slot="listings"] {
  min-height: 800px;
  contain: layout;
}

@media (max-width: 768px) {
  .predef-search-container,
  .mrp-weblet-listings,
  div[data-slot="listings"] {
    min-height: 600px;
  }

/* ============================================================
   FIX 6 — HEADER BANNER / LOGO AREA
   
   The site banner uses a CSS background image. The logo
   uses loading="lazy" already. We stabilise the banner
   height so navigation doesn't jump as the background loads.
   
   16rem is the existing --menu-height CSS variable value
   used by the header template.
   ============================================================ */

#mrp-header .banner-images {
  min-height: 16rem;
  contain: layout style;
}

.with-smart-bg-outer {
  contain: layout;
}


/* ============================================================
   FIX 7 — REGIONAL EXPLORER / CARD SECTION IMAGES
   
   Any images inside the card sections (Heritage Pointe,
   Millarville etc.) that are NOT using fr-fic classes.
   These use inline width/height but are covered as a safety
   catch for any images added to card sections in future.
   ============================================================ */

.block-layout img:not(.fr-fic):not(.custom-logo) {
  height: auto;
}


/* ============================================================
   FIX 8 — PREVENT CUMULATIVE LAYOUT SHIFT FROM
   LATE-LOADING JAVASCRIPT BLOCKS
   
   The search omnibox and map widget can cause small shifts
   as they initialise. This reserves stable space for them.
   ============================================================ */

.omnibox-v2-container {
  min-height: 2.5rem;
  contain: layout;
}

.mrp-weblet-featured-listings-map {
  min-height: 400px;
  contain: layout;
}


/* ============================================================
   FIX 9 — PRICE SILO AND DISCOVERY HUB GRIDS
   
   These CSS Grid sections can cause minor shifts as card
   content loads. contain: layout prevents child content
   from triggering ancestor layout recalculations.
   ============================================================ */

#foothills-price-silo-hub,
#foothills-discovery-hub,
#foothills-county-regional-explorer,
#foothills-equestrian-explorer,
#foothills-luxury-explorer,
#foothills-county-acreage-regional-explorer,
#foothills-horse-discovery-hub {
  contain: layout;
}


/* ============================================================
   SAFETY — PREVENT OVERFLOW ISSUES FROM ABOVE FIXES
   
   Ensures none of the above changes cause horizontal 
   overflow or unexpected scroll on narrow screens.
   ============================================================ */

figure,
.block-layout img {
  max-width: 100%;
}

@media (max-width: 600px) {
  figure {
    float: none !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  figure img.fr-fic {
    aspect-ratio: 16 / 9;
  }
}