/* L'Artista — sitewide cosmetic overrides for Elementor sections that
 * can't easily be edited inside the page builder (or that need a more
 * coherent treatment than the builder offers). Loaded everywhere via
 * class-footer.php.
 *
 * Scope rule: every override here MUST be tightly scoped (image filename,
 * widget id, etc.) so it never bleeds into unrelated layouts.
 */

/* --------------------------------------------------------------------
 * "Продаваш имот?" (Selling a property?) CTA section
 * --------------------------------------------------------------------
 * Treats the model photo as a free-floating cutout that overlaps the
 * gray card on the right edge, matching the brand language used in the
 * Win-Win Event landing (cutouts breaking out of rounded containers).
 * Targeted by image filename so it works on every page that ships this
 * section (Home, Real Estate, Win Win, etc.).
 */
.lalp-questions-img,
img[src*="questions-2"] {
	height: auto !important;
	max-width: none !important;
	width: clamp(360px, 38vw, 620px);
	object-fit: contain !important;
	object-position: bottom right !important;
	margin: 0 -3vw -1px auto !important;
	display: block;
	transform: translateY(2vw);
	pointer-events: none;
	filter: drop-shadow(0 18px 40px rgba(20, 18, 16, 0.18));
}

/* The image's Elementor widget container often has overflow:hidden
 * or sets its own margin/width — neutralize so the cutout can spill
 * out of the card. */
.elementor-widget-image:has(> .elementor-widget-container > img[src*="questions-2"]),
.elementor-widget-image:has(> .elementor-widget-container > a > img[src*="questions-2"]) {
	overflow: visible !important;
	z-index: 5 !important;
	position: relative;
	align-self: flex-end !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

.elementor-widget-image:has(> .elementor-widget-container > img[src*="questions-2"]) > .elementor-widget-container,
.elementor-widget-image:has(> .elementor-widget-container > a > img[src*="questions-2"]) > .elementor-widget-container {
	overflow: visible !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Let the parent container (the gray card row) overflow so the cutout
 * can spill out. Scoped via :has() to the container that actually holds
 * the questions image, so we don't touch unrelated Elementor containers. */
.elementor-element.e-con:has(img[src*="questions-2"]) {
	overflow: visible !important;
}

/* Tablet / mobile: shrink the cutout and pull it slightly inward so the
 * card layout still works on narrower screens. */
@media (max-width: 900px) {
	.lalp-questions-img,
	img[src*="questions-2"] {
		width: clamp(220px, 50vw, 360px);
		margin: 0 -2vw -1px auto !important;
		transform: translateY(1vw);
	}
}

@media (max-width: 600px) {
	.lalp-questions-img,
	img[src*="questions-2"] {
		width: clamp(200px, 60vw, 300px);
		margin: 0 -1vw -1px auto !important;
		transform: translateY(0);
	}
}