/* Featured Video Preview — Frontend Styles */

/**
 * Container wraps whatever the theme's featured image would normally render.
 * We match its dimensions and stack the video on top via object-fit.
 */
.fvp-container {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	line-height: 0; /* collapse inline-block gap */
}

/* ------------------------------------------------------------------ */
/* Self-hosted <video>                                                  */
/* ------------------------------------------------------------------ */
.fvp-container .fvp-self-hosted {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* YouTube & Vimeo placeholder / iframe wrappers                       */
/* ------------------------------------------------------------------ */
.fvp-container .fvp-youtube,
.fvp-container .fvp-vimeo {
	position: relative;
	width: 100%;
	/*
	 * Default 16:9 aspect ratio. Override with the theme's featured image
	 * ratio using a child-theme stylesheet or the WordPress Additional CSS:
	 *
	 *   .fvp-container .fvp-youtube { padding-top: 56.25%; }
	 */
	padding-top: 56.25%;
	overflow: hidden;
	background: #000;
}

/*
 * The YouTube IFrame API replaces the placeholder <div> with an <iframe>
 * as a sibling (not child), so we target it via the container.
 */
.fvp-container .fvp-youtube iframe,
.fvp-container .fvp-vimeo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	/*
	 * Scale up to fill the container and crop edges — gives the same
	 * cropped, centred look as object-fit: cover on a native <video>.
	 * The scale factor (1.25) trims ~10% from each side.
	 */
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%) scale(1.25);
	border: 0;
	pointer-events: none; /* prevent click-through to YouTube/Vimeo chrome */
}

/* ------------------------------------------------------------------ */
/* Vimeo "background" mode already hides controls; nudge iframe size   */
/* to fully cover the container.                                       */
/* ------------------------------------------------------------------ */
.fvp-container .fvp-vimeo > div,
.fvp-container .fvp-vimeo > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}