/* Featured Video Preview — Avada Theme Compatibility Styles */

/**
 * Avada wraps featured images in elements with specific classes and sizing.
 * These rules make our video containers behave like Avada's image containers.
 */

/* ------------------------------------------------------------------ */
/* Replace Avada thumbnail containers with our video container         */
/* ------------------------------------------------------------------ */

.fvp-avada-replaced,
.fvp-avada-js {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	line-height: 0;
}

/* ------------------------------------------------------------------ */
/* Self-hosted video inside Avada blog/portfolio cards                 */
/* ------------------------------------------------------------------ */

.fvp-avada-replaced .fvp-self-hosted,
.fvp-avada-js .fvp-self-hosted {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Match Avada's default image height — override per-layout below */
	max-height: 500px;
}

/* Avada blog standard layout: images are typically 700×450 */
.fusion-post-thumbnail .fvp-self-hosted,
.fusion-blog-post-featured-image .fvp-self-hosted {
	aspect-ratio: 700 / 450;
	max-height: none;
}

/* Avada blog grid/masonry — square or 4:3 crops */
.fusion-post-thumbnail-wrapper .fvp-self-hosted {
	aspect-ratio: 4 / 3;
}

/* Single post featured image — let it be full width, natural height */
.single-featured-image-thumbnail .fvp-self-hosted,
.fusion-featured-image-wrapper .fvp-self-hosted {
	max-height: 600px;
	aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------------ */
/* YouTube / Vimeo inside Avada containers                             */
/* ------------------------------------------------------------------ */

.fvp-avada-replaced .fvp-youtube,
.fvp-avada-replaced .fvp-vimeo,
.fvp-avada-js .fvp-youtube,
.fvp-avada-js .fvp-vimeo {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 default */
	overflow: hidden;
	background: #000;
}

/* Avada sometimes sets explicit heights via Fusion options — reset them */
.fvp-avada-replaced .fvp-youtube iframe,
.fvp-avada-replaced .fvp-vimeo iframe,
.fvp-avada-js .fvp-youtube iframe,
.fvp-avada-js .fvp-vimeo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%) scale(1.25);
	border: 0;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Avada hover-overlay effects — prevent them from obscuring the video */
/* ------------------------------------------------------------------ */

/* Avada adds image-overlay divs on hover; keep them above the video   */
.fusion-post-thumbnail:hover .fusion-post-slideshow,
.fusion-post-thumbnail:hover .fusion-image-overlay {
	z-index: 2;
}

/* The video should sit at z-index 1 so Avada's overlays can appear on top */
.fvp-avada-replaced,
.fvp-avada-js {
	z-index: 1;
}

/* ------------------------------------------------------------------ */
/* Avada Portfolio layouts                                              */
/* ------------------------------------------------------------------ */

.fusion-portfolio-post .fvp-avada-js,
.fusion-portfolio-post .fvp-avada-replaced {
	border-radius: inherit; /* match Avada's portfolio card border radius */
}

/* ------------------------------------------------------------------ */
/* Responsive — let Avada's own grid control widths                    */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
	.fvp-avada-replaced .fvp-self-hosted,
	.fvp-avada-js .fvp-self-hosted {
		aspect-ratio: 16 / 9;
		max-height: none;
	}
}