/**
 * CCI Woo Product Videos - Frontend Styles
 * 
 * Scoped styles for featured video block only.
 * Does not affect galleries, product loops, or other site elements.
 */

/* Featured Video Container */
.cci-wpv-featured-video {
	margin: 2em 0;
	padding: 1.5em 0;
	border-top: 1px solid #e0e0e0;
	clear: both;
}

.cci-wpv-featured-video-title {
	margin: 0 0 1em 0;
	font-size: 1.5em;
	font-weight: 600;
	color: #333;
}

/* Video Container - Responsive 16:9 Aspect Ratio */
.cci-wpv-video-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.cci-wpv-video-wrapper {
	position: relative;
	width: 100%;
	background: #000;
	z-index: 1;
}

/* For iframes (external videos) - use aspect ratio trick */
.cci-wpv-video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	pointer-events: auto;
	z-index: 2;
}

/* For native videos - adapt to video's natural dimensions */
.cci-wpv-video-wrapper:has(video) {
	/* Let video determine its own aspect ratio */
	position: relative;
	overflow: visible; /* Allow controls to extend beyond container */
	display: block;
}

.cci-wpv-video-wrapper video {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
	pointer-events: auto;
	z-index: 2;
	position: relative;
	background: #000;
	/* Let video maintain its natural aspect ratio */
}

/* Fallback for browsers that don't support :has() - native video wrapper */
.cci-wpv-video-wrapper.cci-wpv-native-video-wrapper {
	position: relative;
	overflow: visible;
	display: block;
}

/* Aspect ratio container for iframes only */
.cci-wpv-video-wrapper:has(iframe) {
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: visible; /* Changed from hidden to visible for controls */
}

/* Fallback for browsers that don't support :has() */
.cci-wpv-video-wrapper.cci-wpv-iframe-wrapper {
	padding-bottom: 56.25%;
	height: 0;
	overflow: visible;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.cci-wpv-featured-video {
		margin: 1.5em 0;
		padding: 1em 0;
	}
	
	.cci-wpv-featured-video-title {
		font-size: 1.25em;
	}
}