/* Video for Kadence posts – make the hero <video> fill the featured-image slot
   exactly like Kadence's <img> did.
   Kadence: .post-thumbnail.kadence-thumbnail-ratio-* is a fixed-ratio box
   (position:relative; padding-bottom:X%; overflow:hidden), .post-thumbnail-inner
   is position:absolute; inset:0, and .post-thumbnail img is object-fit:cover. */
.post-thumbnail .post-thumbnail-inner video.vfkp-video {
	display: block;
	flex: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "Inherit" ratio has no fixed box → show the video at its natural height. */
.post-thumbnail.kadence-thumbnail-ratio-inherit .post-thumbnail-inner video.vfkp-video {
	height: auto;
	object-fit: initial;
}

/* Rounded corners on the hero video. :has() scopes the rounding to the video's
   own containers, so listing thumbnails (this stylesheet also loads on archives)
   are never rounded. */
video.vfkp-video {
	border-radius: 1em;
}
.post-thumbnail:has(video.vfkp-video),
.post-thumbnail .post-thumbnail-inner:has(video.vfkp-video) {
	border-radius: 1em;
	overflow: hidden;
}

/* "Has video" play badge, added by JS to a listing thumbnail's image link
   (works for any Kadence loop type). The link is the positioning context. */
a.vfkp-thumb {
	position: relative;
	display: block;
}
.vfkp-play-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(22, 35, 61, .55);
	color: #fff;
	pointer-events: none; /* let the click fall through to the thumbnail link */
	transition: background .15s ease, transform .15s ease;
}
.vfkp-play-badge svg {
	margin-left: 3px;
}
a.vfkp-thumb:hover .vfkp-play-badge {
	background: rgba(22, 35, 61, .82);
	transform: translate(-50%, -50%) scale(1.06);
}
/* A linked (Bunny) video can have any aspect ratio (square, portrait, wide).
   Show the hero video in a fixed 16:9 widescreen frame with a black background
   and object-fit: contain – a 16:9 video fills the frame exactly (no bars),
   while square/portrait videos get pillarbox bars, like a normal video player.
   Kadence's own ratio box (padding-bottom + height:0) is collapsed first.
   !important: the theme's ratio rule ties on specificity and loads after this
   sheet, so a plain declaration loses and the ratio padding reappears as empty
   space under the player (seen on Cases). */
.post-thumbnail[class*="kadence-thumbnail-ratio-"]:has(video.vfkp-video) {
	padding-bottom: 0 !important;
	height: auto !important;
}
.post-thumbnail[class*="kadence-thumbnail-ratio-"]:has(video.vfkp-video) .post-thumbnail-inner {
	position: static !important;
}
.post-thumbnail .post-thumbnail-inner video.vfkp-video {
	height: auto;
	aspect-ratio: 16 / 9;
	max-height: 80vh;
	object-fit: contain;
	background: #000;
}
/* Bunny Stream: the hero is Bunny's own iframe player, in the same 16:9
   frame as the native <video>. The wrapper div carries vfkp-video, so the
   ratio-box collapse above needs these parallel :has() rules for a div. */
.post-thumbnail[class*="kadence-thumbnail-ratio-"]:has(.vfkp-embed) {
	padding-bottom: 0 !important;
	height: auto !important;
	width: 100%;
}
.post-thumbnail[class*="kadence-thumbnail-ratio-"]:has(.vfkp-embed) .post-thumbnail-inner {
	position: static !important;
}
.vfkp-embed {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 80vh;
	background: #000;
	border-radius: 1em;
	overflow: hidden;
}
.vfkp-embed .vfkp-embed-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}