/**
 * Home hero -- responsive background image (s142).
 *
 * Elementor's Container background control has NO per-breakpoint IMAGE override in this
 * version. Verified against the live widget: background_position_mobile,
 * background_size_mobile, background_repeat_mobile, background_bg_width_mobile and
 * background_overlay_opacity_mobile all exist and are independently responsive, but there
 * is no `background_image_mobile` key -- not on this widget, and not anywhere in any
 * template in the repo. So native settings are genuinely exhausted here and a scoped CSS
 * override is the sanctioned path (.claude/rules/elementor-patterns.md Rule 5), not a
 * workaround.
 *
 * The hero shipped the 2560px original (IMG_4262-scaled.jpeg, 565 KB) to every breakpoint.
 * WordPress had already generated the smaller sizes and they were sitting unused:
 *
 *     IMG_4262-768x353.jpeg    71 KB   (medium_large)  <- <=767px
 *     IMG_4262-1024x471.jpeg  117 KB   (large)         <- 768-1024px
 *     IMG_4262-scaled.jpeg    565 KB   (full)          <- untouched above 1024px
 *
 * Desktop is deliberately left alone: the hero is full-bleed there and a 1024px source
 * would visibly soften it. Only the breakpoints where the slot is genuinely smaller than
 * the asset are overridden.
 *
 * The selector is copied verbatim from Elementor's own generated CSS for page 4225
 * (both halves of it, including the motion-effects variant), so specificity matches and
 * neither rule wins by accident.
 */

@media (max-width: 767px) {
	.elementor-4225 .elementor-element.elementor-element-34a22bd:not(.elementor-motion-effects-element-type-background),
	.elementor-4225 .elementor-element.elementor-element-34a22bd > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-image: url("/wp-content/uploads/2026/07/IMG_4262-768x353.jpeg");
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-4225 .elementor-element.elementor-element-34a22bd:not(.elementor-motion-effects-element-type-background),
	.elementor-4225 .elementor-element.elementor-element-34a22bd > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-image: url("/wp-content/uploads/2026/07/IMG_4262-1024x471.jpeg");
	}
}