/**
 * Video Preview on Hover - Blogsy Theme
 *
 * @package Blogsy
 */

/* Video preview container */
.image-wrapper.has-video-preview,
.image-container.has-video-preview {
	position: relative;
	overflow: hidden;
}

.image-wrapper.has-video-preview img,
.image-container.has-video-preview img {
	transition: opacity 0.3s ease;
}

/* Video element - hidden by default */
.blogsy-video-preview {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
	pointer-events: none;
}

/* Cover layout - inside the <article> */
.post-wrapper.overlay-2 .image-wrapper.has-video-preview .blogsy-video-preview {
	border-radius: inherit;
}

/* Horizontal/vertical layout */
.post-wrapper.card-layout .image-container.has-video-preview .blogsy-video-preview {
	border-radius: inherit;
}

/* Hover states - play video */
.image-wrapper.has-video-preview:hover .blogsy-video-preview,
.image-container.has-video-preview:hover .blogsy-video-preview {
	opacity: 1;
	pointer-events: auto;
}

/* Hide the static image when video is playing on hover */
.image-wrapper.has-video-preview:hover > img,
.image-wrapper.has-video-preview:hover .image-animation,
.image-container.has-video-preview:hover > img,
.image-container.has-video-preview:hover .image-animation {
	opacity: 0;
}

/* Keep the link clickable on top of video */
.image-wrapper.has-video-preview .blogsy-position-cover,
.image-container.has-video-preview .blogsy-position-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}

/* Format icon stays on top */
.image-wrapper.has-video-preview .post-format-icon,
.image-container.has-video-preview .post-format-icon {
	z-index: 4;
}

/* Admin metabox styles */
.blogsy-video-preview-url-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.blogsy-video-preview-current {
	margin-top: 8px;
	padding: 8px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.blogsy-video-preview-current video {
	max-width: 200px;
	max-height: 120px;
	border-radius: 4px;
}

.blogsy-video-preview-current .remove-video {
	display: inline-block;
	margin-top: 4px;
	color: #b32d2e;
	cursor: pointer;
	text-decoration: underline;
	font-size: 12px;
}