/**
 * Homepage Block 4 — photo strip only.
 *
 * Design size: 1592×748 @ 1920 viewport.
 * Other widths: same aspect ratio (1592 / 748).
 */

.tf-photo-strip.e-con,
.tf-photo-strip {
	--padding-top: 0 !important;
	--padding-bottom: 0 !important;
	--padding-left: 0 !important;
	--padding-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	/* Bottom matches space above (from .tf-cases padding-bottom: 200px) */
	padding: 0 0 200px !important;
	background: #fff !important;
	overflow: hidden;
	line-height: 0;
}

.tf-photo-strip-img.elementor-widget-image,
.tf-photo-strip-img {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
}

.tf-photo-strip-img::before{
	background: #000;
	bottom: 0;
	content: "";
	left: 0;
	mix-blend-mode: multiply;
	opacity: .2;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
}

.tf-photo-strip-img .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}

.tf-photo-strip-img img {
	display: block !important;
	width: 100% !important;
	/* 1592 / 1920 ≈ 82.9167% of viewport; height from aspect ratio */
	max-width: min(100%, 1592px) !important;
	height: auto !important;
	aspect-ratio: 1592 / 748;
	object-fit: cover;
	margin: 0 auto !important;
}

/* Full-bleed on large screens: photo spans viewport width proportionally */
@media (min-width: 1920px) {
	.tf-photo-strip-img img {
		width: 1592px !important;
		max-width: 1592px !important;
		height: 748px !important;
	}

	.tf-photo-strip-img::before{
		width: 1592px !important;
		left: 50%;
		transform: translateX(-50%);
	}

}

@media (max-width: 1919px) {
	.tf-photo-strip-img img {
		/* Scale with viewport: at 1920 → 1592 wide; keep ratio */
		width: calc(100vw * 1592 / 1920) !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.tf-photo-strip-img::before{
		width: calc(100vw * 1592 / 1920) !important;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media (max-width: 1024px) {
	.tf-photo-strip.e-con,
	.tf-photo-strip {
		/* Matches .tf-cases mobile bottom padding */
		padding: 0 var(--tf-page-x) 64px !important;
	}

	.tf-photo-strip-img img {
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 0;
	}

	.tf-photo-strip-img::before{
		width: 100% !important;
		left: 0%;
		transform: translateX(0%);
	}

}

@media (max-width: 767px) {
	.tf-photo-strip.e-con,
	.tf-photo-strip {
		padding: 0 var(--tf-page-x) 48px !important;
	}
}