/* Page Hero. Base ground, scrim, and load-in come from .ltl-hero in the theme. */
.avc-hero {
	display: flex;
	align-items: flex-end;
	min-height: var(--hero-h, clamp(420px, 32vw, 640px));
}
/* Fit to screen: --fit-h is the room left above the fold (set by script.js). Text height still wins. */
.avc-hero.is-fit {
	min-height: max(420px, min(var(--hero-h, clamp(420px, 32vw, 640px)), var(--fit-h, 100svh)));
}

.avc-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	container-type: size;
}

/* Doubled class beats Elementor's img { height: auto } */
.avc-hero .avc-hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* 16:9 iframe that always covers the box, like object-fit: cover. Doubled class beats Elementor's iframe { max-width: 100% }. */
.avc-hero .avc-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(56.25cqw, 100cqh);
	max-width: none;
	max-height: none;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 1s var(--ease-brand);
}
.avc-hero__video.is-ready { opacity: 1; }

.avc-hero__body {
	position: relative;
	width: 100%;
	max-width: calc(1040px + 2 * var(--web-gutter));
	padding: clamp(40px, 6vh, 72px) var(--web-gutter) 80px; /* top: headroom when the text sets the height */
	color: var(--ltl-white);
}

.avc-hero .avc-hero__scrim--bottom { background: var(--ltl-scrim-photo); }

.avc-hero__bar { margin-bottom: 32px; }
.avc-hero .avc-hero__eyebrow { margin-bottom: 18px; color: inherit; }
.avc-hero__title { margin: 0; color: inherit; text-wrap: balance; }
.avc-hero__lead { max-width: 760px; margin: 28px 0 0; color: inherit; text-wrap: pretty; }
.avc-hero__button { margin-top: 36px; }

@media (max-width: 1023px) {
	.avc-hero__body { padding-bottom: 56px; }
}