/**
 * Mux Video Background Styles
 * Ensures Mux players integrate seamlessly with Cover blocks, Container blocks, and Group blocks
 */

/* Main mux-player styling for all supported blocks */
.wp-block-cover mux-player,
.wp-block-cover-image mux-player,
.uagb-block-container mux-player,
.uagb-block-section mux-player,
.wp-block-group mux-player,
div[class*="uagb-block-"] mux-player,
mux-player.mux-video-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	margin: 0;
	padding: 0;
	object-fit: cover;
	z-index: 0;
}

/* Ensure mux-player behaves like the video background class */
.wp-block-cover mux-player.wp-block-cover__video-background,
.wp-block-cover-image mux-player.wp-block-cover__video-background {
	border: none;
	bottom: 0;
	box-shadow: none;
	height: 100%;
	left: 0;
	margin: 0;
	max-height: none;
	max-width: none;
	object-fit: cover;
	outline: none;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

/* Support for parallax effect */
.wp-block-cover-image.has-parallax mux-player,
.wp-block-cover.has-parallax mux-player,
mux-player.has-parallax {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Disable parallax on touch devices and for accessibility */
@supports (-webkit-touch-callout: inherit) {
	.wp-block-cover-image.has-parallax mux-player,
	.wp-block-cover.has-parallax mux-player,
	mux-player.has-parallax {
		background-attachment: scroll;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover-image.has-parallax mux-player,
	.wp-block-cover.has-parallax mux-player,
	mux-player.has-parallax {
		background-attachment: scroll;
	}
}

/* Support for repeated background */
.wp-block-cover-image.is-repeated mux-player,
.wp-block-cover.is-repeated mux-player,
mux-player.is-repeated {
	background-repeat: repeat;
	background-size: auto;
}

/* Ensure proper z-index layering */
body:not(.editor-styles-wrapper)
	.wp-block-cover:not(
		.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container)
	)
	mux-player {
	z-index: 0;
}

/* Hide mux-player controls completely for background videos */
.wp-block-cover mux-player::part(controls),
.wp-block-cover mux-player::part(controls-container),
.wp-block-cover mux-player::part(bottom-controls),
.wp-block-cover mux-player::part(center-controls),
.uagb-block-container mux-player::part(controls),
.uagb-block-container mux-player::part(controls-container),
.uagb-block-container mux-player::part(bottom-controls),
.uagb-block-container mux-player::part(center-controls),
.uagb-block-section mux-player::part(controls),
.uagb-block-section mux-player::part(controls-container),
.uagb-block-section mux-player::part(bottom-controls),
.uagb-block-section mux-player::part(center-controls),
.wp-block-group mux-player::part(controls),
.wp-block-group mux-player::part(controls-container),
.wp-block-group mux-player::part(bottom-controls),
.wp-block-group mux-player::part(center-controls),
div[class*="uagb-block-"] mux-player::part(controls),
div[class*="uagb-block-"] mux-player::part(controls-container),
div[class*="uagb-block-"] mux-player::part(bottom-controls),
div[class*="uagb-block-"] mux-player::part(center-controls) {
	display: none !important;
}

/* Prevent pointer events on background video */
.wp-block-cover mux-player,
.uagb-block-container mux-player,
.uagb-block-section mux-player,
.wp-block-group mux-player,
div[class*="uagb-block-"] mux-player {
	pointer-events: none;
}

/* Editor-specific styles */
.editor-styles-wrapper .wp-block-cover mux-player,
.editor-styles-wrapper .uagb-block-container mux-player,
.editor-styles-wrapper .uagb-block-section mux-player,
.editor-styles-wrapper .wp-block-group mux-player,
.editor-styles-wrapper div[class*="uagb-block-"] mux-player {
	pointer-events: auto;
}

/* Responsive handling */
@media (max-width: 768px) {
	.wp-block-cover mux-player,
	.wp-block-cover-image mux-player,
	.uagb-block-container mux-player,
	.uagb-block-section mux-player,
	.wp-block-group mux-player,
	div[class*="uagb-block-"] mux-player {
		object-position: center center;
	}
}

/* Ensure content appears above the video */
.wp-block-cover__inner-container,
.uagb-container-inner-blocks-wrap,
.wp-block-group__inner-container {
	z-index: 1;
	position: relative;
}

/* Ensure container blocks have position relative for absolute positioning of video */
.uagb-block-container:has(mux-player),
.uagb-block-section:has(mux-player),
.wp-block-group:has(mux-player),
div[class*="uagb-block-"]:has(mux-player) {
	position: relative;
	overflow: hidden;
}

/* Loading state styling */
.wp-block-cover mux-player:not([src]),
.uagb-block-container mux-player:not([src]),
.uagb-block-section mux-player:not([src]),
.wp-block-group mux-player:not([src]),
div[class*="uagb-block-"] mux-player:not([src]) {
	background: var(--wp--preset--color--contrast-3, #a4a4a4);
}

/* Mux player preview in editor */
.editor-styles-wrapper .components-panel__body img[alt*="Mux video preview"] {
	border: 1px solid var(--wp--preset--color--contrast-3, #ddd);
}

/* Additional Container block specific styles */
.uagb-block-container > mux-player:first-child,
.uagb-block-section > mux-player:first-child {
	z-index: 0;
}

/* Ensure UAGB blocks don't clip the video */
.uagb-block-container.has-mux-video,
.uagb-block-section.has-mux-video {
	min-height: 300px;
}