/*** Module: Hero — Style: video_bg ***/

.module.hero.style-video-bg {
	align-items: center;
	color: var(--white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Fill the viewport so the video never leaves a gap on a tall browser; the
	   900px floor keeps content from cramping on short viewports. */
	min-height: max(900px, 100vh);
	min-height: max(900px, 100dvh);
	overflow: hidden;
	padding-block: calc(var(--header-clearance) + var(--module-spacing-large)) var(--module-spacing-large);
	position: relative;
}

/* Overrides the .media aspect-ratio global so the video fills the section. */

.module.hero.style-video-bg .media {
	aspect-ratio: auto;
	inset: 0;
	position: absolute;
	z-index: 0;
}

/* Scrim sits below .container (z-index 2) so the video darkens but the content stays clear. */
.module.hero.style-video-bg .media::after {
	background: color-mix(in srgb, var(--black) 35%, transparent);
	content: '';
	inset: 0;
	position: absolute;
	z-index: 1;
}

.module.hero.style-video-bg::before {
	background: linear-gradient(to bottom, var(--hero-overlay), transparent);
	content: '';
	height: 240px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.module.hero.style-video-bg .container {
	align-content: center;
	row-gap: var(--text-spacing-xsmall);
	z-index: 2;
}

.module.hero.style-video-bg .container > * {
	grid-column: 1 / span 8;
}

.module.hero.style-video-bg .heading-2,
.module.hero.style-video-bg .xlarge-text {
	text-shadow: var(--text-shadow-dim);
}

/* Brand-orange .highlight is illegible over the video — white over it. */
.module.hero.style-video-bg .highlight {
	color: var(--white);
}

.module.hero.style-video-bg .xlarge-text {
	grid-column: 1 / span 7;
}

.module.hero.style-video-bg .buttons {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-medium);
	margin-top: var(--text-spacing-small);
}

.module.hero.style-video-bg .awards {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-large);
	list-style: none;
	margin: var(--text-spacing-large) 0 0;
	padding: 0;
}

.module.hero.style-video-bg .awards img {
	display: block;
	height: auto;
	max-height: 56px;
	width: auto;
}

/* WordPress emits SVGs at 0×0 (no intrinsic dimensions), and max-height can't
   give them a size — so pin SVG award logos to a definite height to match. */
.module.hero.style-video-bg .awards img[src*=".svg"] {
	height: 56px;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1200rem / 16)) {

	.module.hero.style-video-bg .container > * {
		grid-column: 1 / span 10;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.hero.style-video-bg {
		min-height: 720px;
	}

	.module.hero.style-video-bg .container > * {
		grid-column: 1 / -1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.hero.style-video-bg {
		min-height: 100svh;
	}

	.module.hero.style-video-bg .buttons {
		margin-top: var(--text-spacing-xsmall);
	}

	.module.hero.style-video-bg .awards {
		gap: var(--text-spacing-medium);
		margin-top: var(--text-spacing-medium);
	}

}