/**
 * Performant container backgrounds.
 *
 * Pairs with includes/performant-bg.php: when a container opts in to rendering
 * its background as a real <img>, we suppress the duplicate CSS background and
 * lay the <img> behind the container's content.
 */

/* Drop the CSS background-image Elementor emits in the per-post CSS so the
   image is fetched once (via the injected <img>), not twice. */
.elementor-element.js-has-perf-bg {
	background-image: none !important;
	position: relative;
}

/* The injected background — an <img> (plain) or a <picture> (art-directed) —
   fills the container and sits behind everything. */
.js-has-perf-bg > .js-bg-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	pointer-events: none;
	margin: 0;
}

/* When the positioned element is a <picture>, object-fit lives on its <img>. */
.js-has-perf-bg > picture.js-bg-img > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Keep real content (inner wrapper / widgets) above the image, while leaving
   Elementor's own background overlay free to tint the image. */
.js-has-perf-bg > :not(.js-bg-img):not(.elementor-background-overlay) {
	position: relative;
	z-index: 1;
}