/* CMS-managed video slots on About and Combine pages.
 * Playback state is owned by managed-page-video.js; poster remains visible
 * until the browser has painted a decoded video frame. */
video[data-media-slot][data-media-kind="video"] {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	opacity: 1;
	transition: opacity 160ms ease;
}

.tt-managed-video-surface {
	background-color: #e8edf4;
	background-image: var(--tt-managed-video-poster, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.tt-managed-video-surface.is-video-poster-fallback > video[data-media-slot],
.tt-managed-video-surface.is-video-poster-fallback > .fill > video[data-media-slot] {
	opacity: 0;
}

body.tt-about-page .banner-bg > video.bg[data-media-slot],
body.tt-about-page .section-bg > video.bg[data-media-slot] {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

body.tt-about-page .about-mosaic__tile > video[data-media-slot],
.hero-slide > video[data-media-slot],
.hero-collage figure > video[data-media-slot-ref],
.mosaic figure > video[data-media-slot] {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.hero-slide > video[data-media-slot] {
	aspect-ratio: 21 / 9;
	object-position: center 62%;
	pointer-events: none;
	user-select: none;
}

.hero-collage figure > video[data-media-slot-ref] {
	aspect-ratio: 1 / 1;
}

@media (max-width: 700px) {
	.hero-slide > video[data-media-slot] {
		aspect-ratio: 4 / 3;
		object-position: center 60%;
	}
}

@media (max-width: 1099px) {
	.hero-slide > video[data-media-slot] {
		height: 100%;
		aspect-ratio: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	video[data-media-slot][data-media-kind="video"] {
		transition: none;
	}
}