/**
 * Featured Video — Frontend Styles
 * v0.0.2
 */

/* ==========================================================================
   Base video container
   In 'single' context: uses padding-top to define its own aspect ratio.
   In 'grid' and 'slider' contexts: fills the parent container entirely.
   ========================================================================== */

.fv-video-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: #000;
}

/* Single/standalone context — self-defines height via padding-top */
.fv-video-container.fv-context-single {
	height: 0;
}

/* Grid context — fill the parent wrapper completely */
.fv-video-container.fv-context-grid {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Slider context — fill the slide, match sibling image dimensions */
.fv-video-container.fv-context-slider {
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   Self-hosted <video> — object-fit: cover to fill container like a
   CSS background-image. Centered, overflow hidden by parent.
   ========================================================================== */

.fv-video-container .fv-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* ==========================================================================
   oEmbed iframe (YouTube/Vimeo) — fills container.
   Note: iframes cannot use object-fit, so the iframe fills the container
   and relies on the embed's own scaling.
   ========================================================================== */

.fv-video-container .fv-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   Poster image — visible until video loads; used as fallback.
   ========================================================================== */

.fv-video-container .fv-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	z-index: 1;
	transition: opacity 0.6s ease;
}

/* Hide poster once video is playing — smooth crossfade */
.fv-video-container.fv-playing .fv-poster {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Grid video wrapper — contains video + hover overlay.
   The sizer image (Featured Image rendered invisibly) establishes the
   wrapper's natural dimensions. The video is then positioned absolutely
   on top, filling the same space.
   ========================================================================== */

.fv-grid-video-wrapper {
	position: relative;
	overflow: hidden;
	line-height: 0;
}

/* Sizer image — defines the wrapper's natural height, invisible beneath video */
.fv-grid-video-wrapper .fv-sizer-image {
	display: block;
	width: 100%;
	height: auto;
	visibility: hidden;
}

/* Hover overlay — shows Featured Image on hover, hides video */
.fv-grid-video-wrapper .fv-hover-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fv-grid-video-wrapper .fv-hover-overlay img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fv-grid-video-wrapper:hover .fv-hover-overlay {
	opacity: 1;
}

/* ==========================================================================
   Slider integration — video slide fills the FlexSlider <li>.
   A sizer image (the Featured Image) defines the slide dimensions,
   with the video positioned absolutely on top.
   ========================================================================== */

.fv-slider-slide {
	position: relative;
	overflow: hidden;
}

/* Sizer image in slider — defines slide height, invisible beneath video */
.fv-slider-slide .fv-sizer-image {
	display: block;
	width: 100%;
	height: auto;
	visibility: hidden;
}

/* Video container fills the slide over the sizer image */
.fv-slider-slide .fv-video-container.fv-context-slider {
	position: absolute;
	top: 0;
	left: 0;
}

/* ==========================================================================
   Avada integration overrides
   ========================================================================== */

/* Inherit border-radius from Avada's image wrapper */
.fusion-image-wrapper .fv-video-container {
	border-radius: inherit;
}

/* Portfolio grid items — ensure the wrapper provides dimensions */
.fusion-portfolio-post .fv-grid-video-wrapper {
	width: 100%;
}

.fusion-portfolio-post .fv-grid-video-wrapper .fv-video-container {
	line-height: normal;
}