/**
 * Architerra Customizations — Property Card Styles
 *
 * Enforces a uniform 3:2 aspect ratio on property card images in the
 * RealHomes Elementor properties widget. The site mixes WP-hosted
 * thumbnails (which already have generated 3:2 sizes) with external
 * MLS images at varying native dimensions; CSS normalizes them all
 * to the same box with a center crop, so that custom-image-size
 * limitations on external images don't matter.
 *
 * Scoped to .elementor-widget-rhea-properties-widget to avoid
 * affecting other property card layouts on the site.
 */

.elementor-widget-rhea-properties-widget .rhea_figure_property_one {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

/* The anchor inside the figure wraps the <img>; make it fill the
 * aspect-ratio box so the image inside renders at the right size. */
.elementor-widget-rhea-properties-widget .rhea_figure_property_one > a {
	display: block;
	width: 100%;
	height: 100%;
}

/* Crop the image to cover the 3:2 box from the center. The width
 * and height are already 100% via the parent theme's main.min.css
 * (.rh_prop_card .rh_prop_card__thumbnail img); we re-state them
 * defensively and add object-fit / object-position. */
.elementor-widget-rhea-properties-widget .rhea_figure_property_one img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ==========================================================================
   Card-as-link
   --------------------------------------------------------------------------
   Make the entire property card clickable to the property's permalink, not
   just the image and title. Implemented by expanding the existing title-link
   <a> via a ::before pseudo-element to cover the whole card; other
   interactive (or visually layered) elements are lifted above the overlay
   so they keep working with their own destinations.
   ========================================================================== */

/* Establish the card wrap as the positioning context for the overlay. */
.elementor-widget-rhea-properties-widget .rh_prop_card__wrap {
	position: relative;
}

/* The overlay itself: title-link's ::before covers the entire wrap. The
 * link's accessible name still reads as the property title, so screen
 * readers and keyboard users see it as a single coherent link — they
 * don't perceive the overlay as a separate element. */
.elementor-widget-rhea-properties-widget .rh_prop_card__details_elementor h3 a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Lift every other interactive (or visually layered) element above the
 * overlay. Without these:
 *   - The favorite / compare icons would silently navigate to the
 *     property home instead of toggling state.
 *   - The floor plan link would navigate to the property instead of the
 *     floor plan PDF.
 *   - The address would navigate to the property instead of opening
 *     the map lightbox.
 *   - The CTA buttons (See Home Details, Contact Us, Schedule a Tour)
 *     would all navigate to the property home regardless of which one
 *     was clicked.
 *   - The image hover overlay (rh_overlay + "View Property") would be
 *     hidden behind the click overlay. */
.elementor-widget-rhea-properties-widget .rhea_figure_property_one > a,
.elementor-widget-rhea-properties-widget .rhea_top_tags_box,
.elementor-widget-rhea-properties-widget .property-fp,
.elementor-widget-rhea-properties-widget .rhea_address_sty,
.elementor-widget-rhea-properties-widget .tour-home {
	position: relative;
	z-index: 1;
}

/* These are already absolutely positioned by the theme; only bump z-index. */
.elementor-widget-rhea-properties-widget .rh_overlay,
.elementor-widget-rhea-properties-widget .rh_overlay__contents,
.elementor-widget-rhea-properties-widget .rh_prop_card__btns {
	z-index: 1;
}