/**
 * Hero Search - Video Background Styles
 */

/* Container must be relative for absolute video positioning */
.hero-search--bg-mp4,
.hero-search--bg-youtube {
	position: relative;
	overflow: hidden;
}

/* MP4 video background */
video.hero-search__video-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	z-index: 0;
	object-fit: cover;
}

/* YouTube iframe wrapper */
.hero-search__video-bg--youtube {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* 16:9 aspect ratio */
	min-height: 100%;
	min-width: 177.78vh; /* 16:9 aspect ratio */
	transform: translate(-50%, -50%);
	z-index: 0;
	pointer-events: none;
}

.hero-search__video-bg--youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Ensure content stays above the video */
.hero-search--bg-mp4 > .container,
.hero-search--bg-youtube > .container {
	position: relative;
	z-index: 2;
}

/* Overlay on top of video */
.hero-search--has-overlay.hero-search--bg-mp4::before,
.hero-search--has-overlay.hero-search--bg-youtube::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
}

/* Hide video on small screens, show fallback image instead */
@media (max-width: 768px) {
	video.hero-search__video-bg,
	.hero-search__video-bg--youtube {
		display: none;
	}

	.hero-search--bg-mp4,
	.hero-search--bg-youtube {
		background-size: cover !important;
	}
}