/**
 * Hero Video Section
 *
 * Full-bleed hero with Vimeo background video, dark overlay,
 * centered headline, and CTA buttons.
 *
 * @package Condor
 */

/* ==========================================================================
   Hero Video Container
   ========================================================================== */

.hero-video {
	position: relative;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	overflow: hidden;

	/* ==========================================================================
	   Background Video Container
	   ========================================================================== */

	.hero-video__background {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		background: var(--wp--preset--color--black);

		/* Dark overlay */
		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 10;
			background: rgba(0, 0, 0, 0.5);
			pointer-events: none;
		}
	}

	/* Vimeo iframe */
	.hero-video__iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	/* ==========================================================================
	   Content Overlay
	   ========================================================================== */

	.hero-video__content {
		position: absolute;
		inset: 0;
		z-index: 20;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: var(--wp--preset--spacing--60);
		text-align: center;
	}

	/* ==========================================================================
	   Cover Title Typography
	   Matches original: .headline h1.cover-title with ms-respond(font-size, 8/10)
	   ========================================================================== */

	.cover-title {
		margin: 0;
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--heading-condensed);
		font-weight: 800;
		font-style: italic;
		text-transform: uppercase;
		line-height: 1;
		letter-spacing: -0.025em;
		text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);

		/* Base: 3em per original .wp-block h1.cover-title */
		/* !important overrides WordPress preset font-size classes */
		font-size: 3em !important;

		/* Tablet portrait (768px) - 6em per original */
		@media (min-width: 768px) {
			font-size: 6em !important;
		}
	}

	/* ==========================================================================
	   Responsive Height Adjustments
	   Prevent hero from being too tall on mobile landscape
	   ========================================================================== */

	@media (max-height: 500px) and (orientation: landscape) {
		.hero-video__background {
			aspect-ratio: 21 / 9;
		}

		.cover-title {
			font-size: 2rem;
		}
	}
}

/* Remove any gap when hero-video is first element on page */
.hero-video:first-child,
.wp-block-group.hero-video:first-child,
.wp-site-blocks > .hero-video:first-child,
.wp-site-blocks > .wp-block-group.hero-video:first-child,
main .hero-video:first-child,
.entry-content > .hero-video:first-child {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* ==========================================================================
   Homepage Variant - 10rem at 1280px per original:
   body.home .hero-video .info .headline h1 { font-size: 10rem; }
   !important needed to override WordPress preset font-size classes
   ========================================================================== */

@media (min-width: 1280px) {
	body.home .hero-video .cover-title {
		font-size: 10rem !important;
	}
}

@media (max-height: 500px) and (orientation: landscape) {
	.home .hero-video .cover-title {
		font-size: 3rem;
	}
}

/* ==========================================================================
   Editor Preview Styles
   ========================================================================== */

.editor-styles-wrapper .hero-video {
	width: 100%;
	margin-left: 0;

	/* Background container needs relative positioning for content overlay */
	.hero-video__background {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		background: var(--wp--preset--color--black);

		/* Ensure the dark overlay works in editor */
		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 10;
			background: rgba(0, 0, 0, 0.5);
			pointer-events: none;
		}
	}

	/* Content overlay positioned on top of video */
	.hero-video__content {
		position: absolute;
		inset: 0;
		z-index: 20;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: var(--wp--preset--spacing--60);
		text-align: center;
	}
}