/**
 * Shared video facade. Used by the video and media-slider blocks.
 * Only the poster loads with the page; the player loads on click.
 * Depends on tokens.css.
 */

.dh-video {
	position: relative;
	overflow: hidden;
	border-radius: var(--dh-radius-card);
	aspect-ratio: 16 / 9;
}

.dh-video__play {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.dh-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Round outline play button over the poster. */
.dh-video__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dh-play-size);
	height: var(--dh-play-size);
	border: var(--dh-border-width-button) solid var(--dh-color-white);
	border-radius: var(--dh-radius-round);
	color: var(--dh-color-white);
	transform: translate(-50%, -50%);
	transition: background-color var(--dh-transition-fast);
}

.dh-video__play:hover .dh-video__icon,
.dh-video__play:focus-visible .dh-video__icon {
	background-color: var(--dh-overlay-feature-bar);
}

.dh-video__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover; /* fills the 16:9 box, no side bands */
}