/**
 * Shared responsive geometry for verified treatment-page hero media.
 *
 * PHP scopes this file to pages whose first Elementor block is an image,
 * background image or background video. Landscape heroes share the established
 * Dermatology ratio; cover-cropping preserves source proportions without
 * stretching. Purpose-built portrait dental assets retain their mobile ratios.
 */
body.gth-treatment-hero-media
	.elementor[data-elementor-type="wp-page"]
	> .elementor-element:first-child {
	--gth-treatment-hero-overlap: 6vw;
	--margin-top: calc(-1 * var(--gth-treatment-hero-overlap));
	--margin-right: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--min-height: 0px;
	box-sizing: content-box !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: calc(-1 * var(--gth-treatment-hero-overlap)) 0 0 !important;
	padding: var(--gth-treatment-hero-overlap) 0 0 !important;
	overflow: hidden !important;
	aspect-ratio: 192 / 67;
}

/**
 * Elementor paints image backgrounds on the container overlay. Starting the
 * overlay below the transparent overlap keeps the media flush with the bottom
 * of the header title band.
 */
body.gth-treatment-hero-media
	.elementor[data-elementor-type="wp-page"]
	> .elementor-element:first-child::before {
	top: var(--gth-treatment-hero-overlap) !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

/**
 * Native Elementor image widgets share the same box and use an undistorted
 * cover crop regardless of the uploaded image's intrinsic ratio.
 */
body.gth-treatment-hero-media
	.elementor[data-elementor-type="wp-page"]
	> .elementor-element:first-child
	.elementor-widget-image,
body.gth-treatment-hero-media
	.elementor[data-elementor-type="wp-page"]
	> .elementor-element:first-child
	.elementor-widget-image
	> .elementor-widget-container,
body.gth-treatment-hero-media
	.elementor[data-elementor-type="wp-page"]
	> .elementor-element:first-child
	.elementor-widget-image
	img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
}

body.gth-treatment-hero-media
	.elementor[data-elementor-type="wp-page"]
	> .elementor-element:first-child
	.elementor-widget-image
	img {
	object-fit: cover !important;
	object-position: center center !important;
}

/**
 * Elementor's video sizing script writes inline 16:9 cover dimensions. Pinning
 * both the host and video to the shared content box prevents a fixed 640px hero
 * and keeps the five Laser Treatment language variants identical.
 */
body.gth-treatment-hero-media
	.elementor[data-elementor-type="wp-page"]
	> .elementor-element:first-child
	.elementor-background-video-container {
	top: var(--gth-treatment-hero-overlap) !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: auto !important;
	height: auto !important;
	transform: none !important;
}

body.gth-treatment-hero-media
	.elementor[data-elementor-type="wp-page"]
	> .elementor-element:first-child
	.elementor-background-video-container
	video {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	transform: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}

/**
 * Preserve the sharpened Dermatology asset introduced by the previous hero
 * pass. The root-relative URL remains valid across the site's language paths.
 */
body.elementor-page-1114
	.elementor[data-elementor-type="wp-page"]
	> .elementor-element:first-child::before {
	background-image: url("/wp-content/uploads/2026/07/gth-dermatoloji-hero-retina-v2.webp") !important;
}

/**
 * The Hair Transplant source image contains a narrow black strip baked into
 * its rightmost pixels. A tiny symmetric overscan removes that source artifact
 * without changing the shared hero box or its focal point.
 */
:is(
		body.elementor-page-1105,
		body.elementor-page-3173,
		body.elementor-page-3536,
		body.elementor-page-3864,
		body.elementor-page-4101
	)
	.elementor[data-elementor-type="wp-page"]
	> .elementor-element:first-child::before {
	background-size: calc(100% + 24px) auto !important;
}

/**
 * Dental pages use purpose-built portrait mobile assets. Keeping those source
 * ratios below Elementor's 768px breakpoint prevents destructive cover-crops;
 * tablet and desktop return to the shared landscape geometry.
 */
@media (max-width: 767px) {
	:is(
			body.elementor-page-1107,
			body.elementor-page-3148,
			body.elementor-page-3383,
			body.elementor-page-3501,
			body.elementor-page-3814,
			body.elementor-page-4010,
			body.elementor-page-5550,
			body.elementor-page-5558,
			body.elementor-page-5576,
			body.elementor-page-5593
		)
		.elementor[data-elementor-type="wp-page"]
		> .elementor-element:first-child {
		aspect-ratio: 1200 / 1877;
	}

	:is(
			body.elementor-page-1108,
			body.elementor-page-1109,
			body.elementor-page-1110,
			body.elementor-page-1329,
			body.elementor-page-3146,
			body.elementor-page-3156,
			body.elementor-page-3158,
			body.elementor-page-3169,
			body.elementor-page-3496,
			body.elementor-page-3510,
			body.elementor-page-3514,
			body.elementor-page-3529,
			body.elementor-page-3808,
			body.elementor-page-3830,
			body.elementor-page-3834,
			body.elementor-page-3856,
			body.elementor-page-4039,
			body.elementor-page-4052,
			body.elementor-page-4066,
			body.elementor-page-5062
		)
		.elementor[data-elementor-type="wp-page"]
		> .elementor-element:first-child {
		aspect-ratio: 1440 / 1769;
	}
}