/*
 * CTSFW 1.15 - the control tokens live HERE, on the player, not on the button.
 *
 * 1.7 declared them on .ctsfw-video-player__play and left a note saying to
 * override them on .ctsfw-video-player. That did not work: a declaration on the
 * button shadows anything inherited from the player, so setting
 * --ctsfw-play-size on a block did nothing. Moving them up makes that note true
 * and lets the vertical player's own controls read the same values.
 *
 * Two families, because the two roles have different jobs:
 *
 *   --ctsfw-play-*   the large pre-playback button. Kaltura playkit parity, and
 *                    deliberately quiet - it sits on a poster at 108px and is
 *                    impossible to miss.
 *   --ctsfw-chip-*   the small mute and restart controls on a hosted vertical
 *                    clip, 44px in the corners. Same family, more contrast: at
 *                    the play button's 50% fill and 20% ring they all but
 *                    vanish against dark footage, and these are hit targets a
 *                    visitor has to find.
 */
.ctsfw-video-player {
	--ctsfw-play-size: 6.75rem; /* 108px */
	--ctsfw-play-bg: rgb(0 0 0 / 50%);
	--ctsfw-play-bg-hover: rgb(0 0 0 / 65%);
	--ctsfw-play-border: rgb(255 255 255 / 20%);
	--ctsfw-play-border-hover: rgb(255 255 255 / 45%);
	--ctsfw-chip-bg: rgb(0 0 0 / 62%);
	--ctsfw-chip-bg-hover: rgb(0 0 0 / 80%);
	--ctsfw-chip-border: rgb(255 255 255 / 70%);
	--ctsfw-chip-border-hover: #fff;
	--ctsfw-video-aspect: 16 / 9;
	position: relative;
	width: 100%;
	aspect-ratio: var(--ctsfw-video-aspect);
	overflow: hidden;
	background: #000;
	color: #fff;
	isolation: isolate;
}

.ctsfw-video-player__facade,
.ctsfw-video-player__poster,
.ctsfw-video-player__poster-fallback,
.ctsfw-video-player__native-media,
.ctsfw-video-player__vertical-media,
.ctsfw-video-player__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ctsfw-video-player__facade {
	z-index: 3;
	display: block;
	min-width: 0;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	color: #fff;
	background: #000;
	border: 0;
	border-radius: 0;
	appearance: none;
	box-shadow: none;
	font: inherit;
	line-height: 1;
	text-align: inherit;
}

.ctsfw-video-player__facade:disabled {
	cursor: default;
}

.ctsfw-video-player__poster {
	z-index: 1;
	display: block;
}

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

.ctsfw-video-player__poster-fallback {
	display: block;
	background:
		linear-gradient(135deg, rgb(0 24 70 / 35%), rgb(123 24 36 / 45%)),
		#cbb284;
}

/*
 * Play button - Kaltura playkit parity (CTSFW 1.7)
 *
 * The facade is what a visitor clicks BEFORE the Kaltura player loads. Once
 * playkit takes over it draws its own .playkit-pre-playback-play-button in the
 * same spot, so matching playkit's resting geometry makes the handoff invisible
 * instead of a visible restyle. Numbers lifted from playkit's computed style:
 *
 *   108px square, border-radius 50%, padding 20px,
 *   border 2px solid rgb(255 255 255 / 20%),
 *   background rgb(0 0 0 / 50%), no shadow.
 *
 * Two deliberate departures:
 *
 *   1. playkit is a hard 108px. That swamps the narrow 9:16 cards in the
 *      interactive-vertical-videos block, so min() caps at 108px and lets the
 *      button shrink with the player instead.
 *   2. playkit has no hover state at all. A silent button is a poor affordance
 *      on a facade, so hover/focus deepens the fill and brightens the ring -
 *      no colour shift, no scale, nothing playkit would not plausibly do.
 *
 * The --ctsfw-play-* properties are the tuning surface. They are declared on
 * .ctsfw-video-player (see the top of this file) so that overriding them per
 * block actually takes effect - see 1.15.
 */
.ctsfw-video-player__play {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	display: grid;
	width: min(var(--ctsfw-play-size), 42%);
	aspect-ratio: 1;
	place-items: center;
	color: #fff;
	background: var(--ctsfw-play-bg);
	border: 2px solid var(--ctsfw-play-border);
	border-radius: 50%;
	box-shadow: none;
	transform: translate(-50%, -50%);
	transition:
		background-color 160ms ease,
		border-color 160ms ease;
}

.ctsfw-video-player__facade:hover .ctsfw-video-player__play,
.ctsfw-video-player__facade:focus-visible .ctsfw-video-player__play {
	background: var(--ctsfw-play-bg-hover);
	border-color: var(--ctsfw-play-border-hover);
}

.ctsfw-video-player__facade:focus-visible,
.ctsfw-vertical-video__play-toggle:focus-visible,
.ctsfw-vertical-video__audio-toggle:focus-visible,
.ctsfw-vertical-video__restart:focus-visible {
	outline: 3px solid #f6f4ee;
	outline-offset: -5px;
}

/*
 * 66% of a 108px button puts the drawn triangle at roughly 26 x 32px, which is
 * where playkit's icon-font glyph lands inside its 64px content box.
 *
 * The translate is a centring correction, not a nudge: in the 64-unit viewBox
 * the triangle spans x 24 -> 47, so its bounding-box centre is 35.5 against a
 * box centre of 32 - already 5.5% right of true centre. The old rule added a
 * further +4%, leaving the glyph visibly off-axis in a circle. -5.5% cancels
 * the viewBox offset exactly, matching playkit's centred glyph.
 */
.ctsfw-video-player__play-icon {
	width: 66%;
	height: auto;
	transform: translateX(-5.5%);
}

.ctsfw-video-player__native-media,
.ctsfw-video-player__vertical-media,
.ctsfw-video-player__iframe {
	z-index: 2;
	display: block;
	object-fit: cover;
	border: 0;
}

.ctsfw-video-player__noscript-media {
	position: absolute;
	z-index: 20;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

.ctsfw-video-player--native:not([data-activated]) .ctsfw-video-player__native-media {
	pointer-events: none;
}

.ctsfw-video-player[data-loading]::after {
	position: absolute;
	z-index: 5;
	top: 1rem;
	right: 1rem;
	width: 1.5rem;
	aspect-ratio: 1;
	content: "";
	border: 2px solid rgb(255 255 255 / 45%);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ctsfw-video-spinner 800ms linear infinite;
}

.ctsfw-video-player__fallback-link {
	position: relative;
	z-index: 6;
	display: block;
	padding: 1rem;
	color: #fff;
	text-align: center;
}

.ctsfw-video-player--kaltura > .ctsfw-kaltura-wrap {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: var(--ctsfw-video-aspect) !important;
}

.ctsfw-video-player--kaltura .ctsfw-kaltura-target {
	width: 100%;
	height: 100%;
}

.ctsfw-video-player--vertical-native {
	height: 100%;
}

.ctsfw-video-player--vertical-native [data-ctsfw-vertical-poster] {
	z-index: 3;
	opacity: 1;
	transition: opacity 180ms ease;
}

.ctsfw-video-player--vertical-native[data-playing] [data-ctsfw-vertical-poster] {
	opacity: 0;
	pointer-events: none;
}

.ctsfw-vertical-video__play-toggle,
.ctsfw-vertical-video__audio-toggle,
.ctsfw-vertical-video__restart {
	position: absolute;
	z-index: 8;
	display: grid;
	min-width: 0;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	place-items: center;
	cursor: pointer;
	color: #fff;
	background: var(--ctsfw-chip-bg);
	border: 1px solid var(--ctsfw-chip-border);
	border-radius: 50%;
	appearance: none;
	box-shadow: none;
	line-height: 1;
	transition:
		opacity 160ms ease,
		background-color 160ms ease,
		transform 160ms ease;
}

.ctsfw-vertical-video__audio-toggle:hover,
.ctsfw-vertical-video__restart:hover,
.ctsfw-vertical-video__audio-toggle:focus-visible,
.ctsfw-vertical-video__restart:focus-visible {
	background: var(--ctsfw-chip-bg-hover);
	border-color: var(--ctsfw-chip-border-hover);
}

/*
 * CTSFW 1.15 - the hosted vertical clip's play control now matches the facade.
 *
 * A Media Library video in the interactive-vertical-videos block does not use
 * the click-to-play facade - it drives a real <video> element, so its centre
 * control is a <button> that also serves as pause. Different element, different
 * class, and the 1.7 restyle therefore never reached it: it kept the pre-1.7
 * skin (solid navy, hard white hairline, 56px) while a Vimeo card one slide
 * over showed the Kaltura button at 92px. Same carousel, two buttons.
 *
 * Resting geometry and colour are now identical to .ctsfw-video-player__play,
 * read from the same tokens. Behaviour is unchanged - it still fades out during
 * playback and returns on hover or focus, which the facade has no equivalent
 * for because the facade is gone by then.
 */
.ctsfw-vertical-video__play-toggle {
	top: 50%;
	left: 50%;
	width: min(var(--ctsfw-play-size), 42%);
	aspect-ratio: 1;
	background: var(--ctsfw-play-bg);
	border: 2px solid var(--ctsfw-play-border);
	transform: translate(-50%, -50%);
}

.ctsfw-vertical-video__play-toggle:hover,
.ctsfw-vertical-video__play-toggle:focus-visible {
	background: var(--ctsfw-play-bg-hover);
	border-color: var(--ctsfw-play-border-hover);
}

[data-ctsfw-vertical-video][data-playing] .ctsfw-vertical-video__play-toggle {
	opacity: 0;
}

[data-ctsfw-vertical-video][data-playing]:hover .ctsfw-vertical-video__play-toggle,
[data-ctsfw-vertical-video][data-playing]:focus-within .ctsfw-vertical-video__play-toggle {
	opacity: 1;
}

.ctsfw-vertical-video__audio-toggle,
.ctsfw-vertical-video__restart {
	top: 0.75rem;
	width: 2.75rem;
	aspect-ratio: 1;
	opacity: 0;
	pointer-events: none;
}

.ctsfw-vertical-video__audio-toggle {
	left: 0.75rem;
}

.ctsfw-vertical-video__restart {
	right: 0.75rem;
}

[data-ctsfw-vertical-video][data-playing] .ctsfw-vertical-video__audio-toggle,
[data-ctsfw-vertical-video][data-playing] .ctsfw-vertical-video__restart,
[data-ctsfw-vertical-video]:focus-within .ctsfw-vertical-video__audio-toggle,
[data-ctsfw-vertical-video]:focus-within .ctsfw-vertical-video__restart {
	opacity: 1;
	pointer-events: auto;
}

.ctsfw-vertical-video__icon {
	width: 52%;
	height: auto;
}

.ctsfw-vertical-video__icon--pause,
.ctsfw-vertical-video__icon--audible {
	display: none;
}

[data-ctsfw-vertical-video][data-playing] .ctsfw-vertical-video__icon--play,
[data-ctsfw-vertical-video][data-muted="false"] .ctsfw-vertical-video__icon--muted {
	display: none;
}

[data-ctsfw-vertical-video][data-playing] .ctsfw-vertical-video__icon--pause,
[data-ctsfw-vertical-video][data-muted="false"] .ctsfw-vertical-video__icon--audible {
	display: block;
}

[data-block="interactive-vertical-videos"] .ctsfw-interactive-video-card {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #000;
}

[data-block="interactive-vertical-videos"] .ctsfw-interactive-video-card > .ctsfw-video-player {
	position: absolute;
	inset: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	aspect-ratio: auto;
}

@media (prefers-reduced-motion: reduce) {
	.ctsfw-video-player__play,
	.ctsfw-video-player--vertical-native [data-ctsfw-vertical-poster],
	.ctsfw-vertical-video__play-toggle,
	.ctsfw-vertical-video__audio-toggle,
	.ctsfw-vertical-video__restart {
		transition: none;
	}

	.ctsfw-video-player[data-loading]::after {
		animation-duration: 1.5s;
	}
}

@keyframes ctsfw-video-spinner {
	to {
		transform: rotate(360deg);
	}
}

/* -------------------------------------------------------------------------
 * Interactive vertical video card
 *
 * These rules replace the style attributes the block template used to print.
 * The declarations are the exact equivalents, so nothing moves visually.
 *
 * Previous inline markup, for reference:
 *   button wrapper  position:absolute; left:1rem; right:1rem; bottom:2.5rem;
 *                   z-index:20; display:flex; justify-content:center;
 *   button          min-width:0; width:100%; max-width:14rem;
 *                   padding-left:1rem; padding-right:1rem; font-size:.875rem;
 *   scrims          z-index:4;
 * ---------------------------------------------------------------------- */

.ctsfw-interactive-video-card__scrim {
	z-index: 4;
}

.interactive-vertical-videos__button.interactive-vertical-videos__button {
	position: absolute;
	right: 1rem;
	bottom: 2.5rem;
	left: 1rem;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 2rem);
	min-width: 0;
	max-width: 14rem;
	margin-inline: auto;
	padding-inline: 1rem;
	font-size: 0.875rem;
}