/* The Home hero (includes/home-hero.php).
   --qr-top-h is the height of everything above the hero (announcement bar + header, and the admin bar for signed-in
   editors). assets/js/home-hero.js measures it; the fallback is the usual size (46px bar + 91px header), so the first
   paint is already right. */
:root { --qr-top-h: 137px; }

/* QRS-394: the hero section of the theme, directly under the header. Phones: 300px high. Tablets and desktops: the
   rest of the first screen. The poster shows until the video has its first frame (.is-waiting, removed by the script). */
.qr-home-hero {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
	background: #1b1916;
}
@media (min-width: 681px) {
	.qr-home-hero {
		height: calc(100vh - var(--qr-top-h));
		height: calc(100svh - var(--qr-top-h));
	}
}
.qr-home-hero__poster,
.qr-home-hero__poster img,
.qr-home-hero__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	object-fit: cover;
}
.qr-home-hero__video { transition: opacity .4s ease; }
.qr-home-hero.is-waiting .qr-home-hero__video { opacity: 0; }

/* QRS-393: without the hero section, the first Builder row (the old hero) starts directly under the announcement bar
   and the header: "top: 0" cancels the Builder setting "Position: top -135px", which pulled the video up under them. */
body.home .themify_builder_content > .module_row.tb_first { top: 0; }

/* Desktop and tablets: the background video fills the rest of the first screen. Phones keep the Builder height (300px). */
@media (min-width: 681px) {
	body.home .themify_builder_content > .module_row.tb_first[data-tbfullwidthvideo] {
		min-height: calc(100vh - var(--qr-top-h));
		min-height: calc(100svh - var(--qr-top-h));
	}
}
@media (prefers-reduced-motion: reduce) {
	.qr-home-hero__video { transition: none; }
}