/* ============================================================
 * MBB LISTING-CARD THUMBNAIL FILL FIX
 * Lane: MBB-THUMBNAIL-SIZING-FIX-2026-07-01 (Claude Opus 4.8, re-run)
 *
 * SYMPTOM: On the /miami-beach/ (and other) listing GRID, the new
 *   mbb-mls-sync CloudFront photos render SHORTER than the card's image
 *   slot -- leaving whitespace below the photo and a ragged, non-uniform
 *   grid. Old MLS-Import-era listings filled the slot perfectly.
 *
 * ROOT CAUSE: Houzez grid cards request the 'houzez-item-image-6' size
 *   (584x438, 4:3). mu-plugin mbb-remote-image-sizes.php already reports
 *   those dims to <img width="584" height="438">, so the 4:3 box is
 *   reserved (good CLS). BUT CloudFront serves ONE un-cropped asset
 *   (e.g. 1600x899, 16:9) as the data-src, and the ONLY CSS on grid-card
 *   images is Bootstrap `.img-fluid{max-width:100%;height:auto}`. With
 *   height:auto the browser repaints the loaded photo at its NATIVE ratio
 *   -> 584x328, i.e. ~110px shorter than the 438 slot. Old MLS-Import
 *   images were physically hard-cropped to real 584x438 files, so
 *   height:auto rendered them at the full slot. Houzez's own
 *   object-fit:cover rule is scoped only to .hs-gallery-v4/v5 (single-
 *   property mosaic) + blog modules, never the .listing-featured-thumb card.
 *
 * FIX: Give the grid-card thumb link the 4:3 reserved box and make the
 *   image fill it with object-fit:cover -- reproducing the old hard-crop
 *   look, uniform across every source aspect ratio (16:9, portrait, square).
 *   Scoped to grid cards (.item-wrap a.listing-featured-thumb). Does NOT
 *   touch the single-property banner (img-crop-fix.css) or the gallery
 *   mosaic (.hs-gallery-v4/v5). Reserved aspect stays 4:3 -> zero CLS.
 *
 * REVERSIBILITY: delete this file + remove its wp_enqueue_style block
 *   (marker CARD THUMB FILL) from child functions.php.
 * ============================================================ */

.item-wrap a.listing-featured-thumb.image-wrap,
.item-wrap a.listing-featured-thumb {
    display: block;
    position: relative;
    aspect-ratio: 584 / 438; /* = houzez-item-image-6 reserved slot */
    overflow: hidden;
}

.item-wrap a.listing-featured-thumb img.wp-post-image,
.item-wrap a.listing-featured-thumb img.houzez-lazyload,
.item-wrap a.listing-featured-thumb img.img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}