/*
 * Click-to-play video facades (see Site_Core\Content\Video).
 * Customisable through CSS variables on .sc-video or any ancestor:
 *   --sc-video-radius, --sc-video-bg, --sc-video-vertical-max,
 *   --sc-video-play-size, --sc-video-play-bg, --sc-video-play-color.
 */

.sc-video {
	position: relative;
	width: 100%;
	aspect-ratio: var( --sc-video-ratio, 16 / 9 );
	overflow: hidden;
	border-radius: var( --sc-video-radius, 12px );
	background: var( --sc-video-bg, #111 );
}

.sc-video--vertical {
	max-width: var( --sc-video-vertical-max, 420px );
	margin-inline: auto;
}

/* Reset Astra/global button styles (they win on specificity otherwise). */
.sc-video .sc-video__facade {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.sc-video .sc-video__facade:focus {
	outline: none;
}

.sc-video .sc-video__facade:focus-visible {
	outline: 3px solid var( --sc-video-play-bg, #fff ) !important;
	outline-offset: -3px;
}

.sc-video__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease, filter 0.4s ease;
}

.sc-video__facade:hover .sc-video__poster {
	transform: scale( 1.03 );
	filter: brightness( 0.85 );
}

.sc-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --sc-video-play-size, 72px );
	height: var( --sc-video-play-size, 72px );
	border-radius: 50%;
	background: var( --sc-video-play-bg, rgba( 0, 0, 0, 0.6 ) );
	color: var( --sc-video-play-color, #fff );
	transform: translate( -50%, -50% );
	transition: transform 0.2s ease, background-color 0.2s ease;
	backdrop-filter: blur( 4px );
}

.sc-video__play svg {
	width: 42%;
	height: 42%;
	margin-left: 6%;
	fill: currentColor;
}

.sc-video__facade:hover .sc-video__play {
	transform: translate( -50%, -50% ) scale( 1.08 );
}

.sc-video__player {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

video.sc-video__player {
	object-fit: contain;
}