/**
 * Front-end styles for YouTube Block Enhancer.
 */

/* Outer wrapper injected by PHP render_block filter */
.ybe-youtube-wrapper {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	background-repeat: no-repeat; /* background-size/position come from inline styles */
}

/* Custom thumbnail – sits on top until the user clicks play */
.ybe-thumbnail-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
}

.ybe-thumbnail-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

:is(lite-youtube,lite-vimeo){
	img{
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
	}

}

/*
 * When the embed iframe is clicked WordPress / the browser replaces the
 * wrapper content; the overlay is part of the DOM so it stays hidden once
 * the video loads. If you want a JS-driven "hide on click" behaviour add a
 * small script in your theme or use the approach in the README.
 */