/* ==========================================================================
   Auto Video Widget
   ========================================================================== */

.av-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: block;
}

/* Poster image */
.av-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	z-index: 1;
	transition: opacity var(--av-fade, 600ms) ease;
}

/* Video */
.av-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	z-index: 2;
	opacity: 0;
	transition: opacity var(--av-fade, 600ms) ease;
}

/* Active state — video fades in, poster fades out */
.av-wrapper.av-playing .av-video {
	opacity: 1;
}

.av-wrapper.av-playing .av-poster {
	opacity: 0;
}

/* Spacer so the wrapper has height when no min-height is set */
.av-wrapper::after {
	content: '';
	display: block;
	padding-top: 56.25%; /* 16:9 default aspect ratio */
}

/* When a min-height is set via Elementor, the spacer is overridden */
.av-wrapper[style*="min-height"] ::after {
	display: none;
}