/* ==========================================================================
   Block: Video Embed (bga/video-embed)
   ========================================================================== */

.bga-video-embed__wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	overflow: hidden;
	background: var(--color-brown);
}

.bga-video-embed__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 0;
	cursor: pointer;
	padding: 0;
	-webkit-appearance: none; /* stop older Safari (<16.4) ignoring flex on a <button> */
	appearance: none;
}

.bga-video-embed__thumb,
.bga-video-embed__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bga-video-embed__placeholder {
	background: var(--color-brown);
}

.bga-video-embed__play {
	position: relative;
	z-index: 2;
	transition: transform var(--transition-speed) var(--transition-ease);
}

.bga-video-embed__facade:hover .bga-video-embed__play {
	transform: scale(1.1);
}

.bga-video-embed__facade:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: var(--sp-4);
}

/* Active iframe */
.bga-video-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}