/**
 * Video Hero Component Styles
 * 
 * Atomic CSS for celeste_video_hero shortcode.
 * Conditionally loaded only when shortcode is present on page.
 * 
 * @package Celeste_Theme
 * @since 2.0.0
 */

.celeste-video-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
}

/**
 * Video Background
 * Uses object-fit: cover for proper scaling without transform hacks.
 * Mobile-first source order with media queries in HTML.
 */
.celeste-video-hero .video-hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/**
 * Video Overlay
 * Color overlay with alpha support for darkening/tinting video.
 */
.celeste-video-hero .video-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/**
 * Content Container
 * Positioned above video/overlay with flexbox for vertical alignment.
 * Uses .container class for horizontal constraints.
 */
.celeste-video-hero .video-hero-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;

}

/**
 * Disable Container Padding
 * Removes inherited padding from .container class for precise max-width control.
 */
.video-hero-no-padding .video-hero-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/**
 * Desktop Vertical Alignment
 * Controls vertical positioning of content using flexbox justify-content.
 */
.video-hero-align-top .video-hero-content {
	justify-content: flex-start;
}

.video-hero-align-middle .video-hero-content {
	justify-content: center;
}

.video-hero-align-bottom .video-hero-content {
	justify-content: flex-end;
}

/**
 * Desktop Horizontal Alignment
 * Controls horizontal positioning of content using flexbox align-items.
 */
.video-hero-h-align-left .video-hero-content {
	align-items: flex-start;
}

.video-hero-h-align-center .video-hero-content {
	align-items: center;
}

.video-hero-h-align-right .video-hero-content {
	align-items: flex-end;
}

/**
 * Mobile Alignment Overrides
 * Applies at 767px breakpoint (strict mobile breakpoint per PROJECT_MAP).
 * Allows independent control of alignment on mobile devices.
 */
@media (max-width: 767px) {
	/* Mobile Vertical Alignment */
	.video-hero-mob-align-top .video-hero-content {
		justify-content: flex-start;
	}

	.video-hero-mob-align-middle .video-hero-content {
		justify-content: center;
	}

	.video-hero-mob-align-bottom .video-hero-content {
		justify-content: flex-end;
	}

	/* Mobile Horizontal Alignment */
	.video-hero-mob-h-align-left .video-hero-content {
		align-items: flex-start;
	}

	.video-hero-mob-h-align-center .video-hero-content {
		align-items: center;
	}

	.video-hero-mob-h-align-right .video-hero-content {
		align-items: flex-end;
	}
}

/**
 * Desktop Vertical Alignment - Space Distribution
 * Advanced flexbox properties for distributing content with spacing.
 */
.video-hero-align-space-between .video-hero-content {
	justify-content: space-between;
}

.video-hero-align-space-around .video-hero-content {
	justify-content: space-around;
}

.video-hero-align-space-evenly .video-hero-content {
	justify-content: space-evenly;
}

/**
 * Desktop Horizontal Alignment - Stretch
 * Makes child elements stretch to fill full width of container.
 */
.video-hero-h-align-stretch .video-hero-content {
	align-items: stretch;
}

/**
 * Mobile Vertical Alignment - Space Distribution
 * Applies at 767px breakpoint (strict mobile breakpoint per PROJECT_MAP).
 */
@media (max-width: 767px) {
	.video-hero-mob-align-space-between .video-hero-content {
		justify-content: space-between;
	}

	.video-hero-mob-align-space-around .video-hero-content {
		justify-content: space-around;
	}

	.video-hero-mob-align-space-evenly .video-hero-content {
		justify-content: space-evenly;
	}

	/**
	 * Mobile Horizontal Alignment - Stretch
	 */
	.video-hero-mob-h-align-stretch .video-hero-content {
		align-items: stretch;
	}
}

/**
 * Error State
 * Displayed when required desktop video is missing.
 */
.celeste-video-hero-error {
	padding: 40px;
	background: #f8d7da;
	color: #721c24;
	text-align: center;
	border: 1px solid #f5c6cb;
	border-radius: 4px;
}