/*
 * Video poster and dialog (template-parts/components/video-dialog.php).
 * Mockup: the right half of docs/sections/home/home_our_home_place.png.
 */

.hf-video__trigger
{
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 5 / 4;
	border-radius: var(--hf-radius-m);
	background: var(--hf-color-band);
}

.hf-video__trigger:focus-visible
{
	outline-offset: 4px;
}

.hf-video__poster
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms ease;
}

.hf-video__trigger:hover .hf-video__poster
{
	transform: scale(1.03);
}

.hf-video__play
{
	position: absolute;
	inset: 0;
	display: grid;
	width: clamp(4rem, 3rem + 3vw, 6rem);
	height: clamp(4rem, 3rem + 3vw, 6rem);
	margin: auto;
	border: 2px solid var(--hf-color-on-dark);
	border-radius: 50%;
	background: color-mix(in srgb, var(--hf-color-heading) 55%, transparent);
	color: var(--hf-color-on-dark);
	place-items: center;
	transition: background-color var(--hf-transition), transform var(--hf-transition);
}

.hf-video__trigger:hover .hf-video__play
{
	background: color-mix(in srgb, var(--hf-color-heading) 75%, transparent);
	transform: scale(1.05);
}

.hf-video__play-icon
{
	width: 45%;
	height: 45%;
}

.hf-video__dialog
{
	width: min(100% - 2rem, 70rem);
	max-width: none;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: var(--hf-color-on-dark);
}

.hf-video__dialog::backdrop
{
	background: color-mix(in srgb, var(--hf-color-heading) 88%, transparent);
}

.hf-video__frame
{
	position: relative;
}

.hf-video__player
{
	display: block;
	width: 100%;
	max-height: calc(100vh - 8rem);
	border-radius: var(--hf-radius-m);
	background: var(--hf-color-heading);
}

.hf-video__close
{
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--hf-space-xs));
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--hf-color-on-dark) 60%, transparent);
	border-radius: 50%;
	background: transparent;
	color: var(--hf-color-on-dark);
	cursor: pointer;
	place-items: center;
}

.hf-video__close:hover
{
	background: color-mix(in srgb, var(--hf-color-on-dark) 15%, transparent);
}

.hf-video__close:focus-visible
{
	outline-color: var(--hf-color-on-dark);
}

.hf-video__close-icon
{
	width: 1.5rem;
	height: 1.5rem;
}

.hf-video__description
{
	margin: var(--hf-space-xs) 0 0;
	font-size: var(--hf-text-s);
}