/**
 * Video Hero block styles.
 * Plain CSS — not part of the SCSS/webpack bundle, loaded standalone.
 */

.video-hero-section {
	margin-top: 60px;
}

@media (min-width: 992px) {
	.video-hero-section {
		margin-top: 120px;
	}
}

.video-hero-heading {
	margin-bottom: 30px;
}

@media (min-width: 992px) {
	.video-hero-heading {
		margin-bottom: 50px;
	}
}

.video-hero-heading h1 {
	font-size: 1.8rem;
	line-height: 1.2;
}

@media (min-width: 992px) {
	.video-hero-heading h1 {
		font-size: 3.1rem;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.89);
		line-height: 1.4;
		padding-bottom: 0.2em;
	}
}

@media (min-width: 992px) {
	.video-hero-heading p.date {
		font-size: 48px;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.89);
	}
}

.video-hero-heading .btn-plain {
	margin-top: 15px;
}

.video-hero-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

@media (max-width: 768px) {
	.video-hero-media {
		aspect-ratio: 4 / 5;
	}
}

.video-hero-media--triple {
	aspect-ratio: unset;
	overflow: visible;
	background: none;
}

.video-hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.video-hero-animation {
	position: relative;
	width: 100%;
	height: 100%;
}

.video-hero-animation--triple {
	display: flex;
	gap: 16px;
}

@media (max-width: 768px) {
	.video-hero-animation--triple {
		flex-direction: column;
	}
}

.hero-anim-track {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* Shows through as the outgoing image fades out, before the incoming
	   one fades in — a soft dissolve through white, not a hard cut. */
	background: #fff;
}

.video-hero-animation--triple .hero-anim-track {
	flex: 1 1 0;
	width: auto;
	height: auto;
	aspect-ratio: 3 / 4;
}

@media (max-width: 768px) {
	/* In row direction (desktop) flex-basis: 0 sets the width, and height
	   follows from the track's aspect-ratio. In column direction that same
	   flex-basis: 0 would apply to height instead, collapsing every track
	   to 0 before its aspect-ratio ever gets a chance to size it. This has
	   to come after the rule above — same selector, same specificity, so
	   without a later position in the file the media query wouldn't win. */
	.video-hero-animation--triple .hero-anim-track {
		flex: 0 1 auto;
	}
}

.hero-anim-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hero-anim-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* One-directional: zooms in once per reveal and holds at the end scale,
	   rather than pulsing in and out for as long as the slide is shown. */
	animation: hero-ken-burns var(--hero-anim-duration, 4s) ease-in-out 1 forwards;
	/* Paused while hidden so it can't silently drift through its zoom cycle
	   in the background — it's restarted from scratch (see video-hero.js)
	   at the exact moment a slide becomes active, so every reveal looks
	   the same instead of some catching it mid-zoom. */
	animation-play-state: paused;
}

.video-hero-animation--triple .hero-anim-slide img {
	/* Just the crossfade for this layout — the zoom read as too busy across
	   three simultaneously-animating images. */
	animation: none;
}

.hero-anim-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.hero-anim-slide.is-active img {
	animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
	.hero-anim-slide img {
		animation: none;
	}
}

@keyframes hero-ken-burns {
	from {
		transform: scale(1);
	}

	to {
		/* Kept subtle so the zoom stays gentle rather than heavy/distracting. */
		transform: scale(1.04);
	}
}