/**
 * Cluster page hero video backdrop.
 * Enqueued only on healthcare-ai, security-defense-ai, government-civic-ai pages.
 */

/* Clear the mesh gradient so the video shows through */
.studio-hero.studio-hero--video {
	background: none !important;
	padding: 0 !important;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: min(48vh, 480px);
	box-sizing: border-box;
}

/* Full bleed — direct child of .wp-site-blocks: root-padding breakout only (no 100vw scroll) */
.wp-site-blocks > .studio-hero.studio-hero--video.alignfull {
	width: auto;
	max-width: none;
	margin-left: calc(var(--wp--style--root--padding-left, 1.5rem) * -1);
	margin-right: calc(var(--wp--style--root--padding-right, 1.5rem) * -1);
	position: relative;
	left: auto;
	transform: none;
}

/* Bleed heroes: negative margin cancels one root-padding — compensate in content pad */
.studio-hero.studio-hero--video.alignfull {
	--studio-hero-pad-left: calc(
		2 * var(--wp--style--root--padding-left, 1.5rem)
		+ max(0px, (100vw - 2 * var(--wp--style--root--padding-left, 1.5rem) - var(--studio-wide-size, 1200px)) / 2)
	);
	--studio-hero-pad-right: calc(
		2 * var(--wp--style--root--padding-right, 1.5rem)
		+ max(0px, (100vw - 2 * var(--wp--style--root--padding-right, 1.5rem) - var(--studio-wide-size, 1200px)) / 2)
	);
}

/* Nested inside constrained main — viewport-width centering (not site-root heroes) */
main .studio-hero.studio-hero--video.alignfull,
.is-layout-constrained .studio-hero.studio-hero--video.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: 0;
	margin-right: 0;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

/* Case study full pages: hero is a .wp-site-blocks sibling of <main> (same as work bridge).
   Use root-padding breakout — do not nest hero inside constrained main. */
.wp-site-blocks > .studio-hero.studio-hero--video.studio-case__hero.alignfull {
	width: auto;
	max-width: none;
	margin-left: calc(var(--wp--style--root--padding-left, 1.5rem) * -1);
	margin-right: calc(var(--wp--style--root--padding-right, 1.5rem) * -1);
	left: auto;
	transform: none;
	min-height: min(48vh, 480px);
}

.wp-site-blocks > .studio-hero.studio-hero--video.studio-case__hero .wp-block-heading,
.wp-site-blocks > .studio-hero.studio-hero--video.studio-case__hero p {
	color: rgba(250, 249, 247, 0.65);
}

.wp-site-blocks > .studio-hero.studio-hero--video.studio-case__hero .wp-block-heading:first-of-type,
.wp-site-blocks > .studio-hero.studio-hero--video.studio-case__hero .wp-block-post-title {
	color: var(--wp--preset--color--base) !important;
}

/* Template-part wrapper fills hero (backdrop must cover full area) */
.studio-hero.studio-hero--video > .wp-block-template-part {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0 !important;
	max-width: none !important;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.studio-hero.studio-hero--video > .wp-block-template-part > * {
	height: 100%;
}

/* Backdrop — layout; poster + solid fill via hero-assets.php inline CSS */
.cluster-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/* Video fill — hidden until .is-ready so backdrop poster shows during load */
.cluster-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(0.9) contrast(1.08) brightness(0.78);
	opacity: 0;
	transition: opacity 0.45s ease;
}

.cluster-hero__video.is-ready {
	opacity: 1;
}

/* Greenridge forest clip — match product case-study framing */
.cluster-hero--greenridge .cluster-hero__video {
	object-position: 58% 42%;
	filter: saturate(1.04) contrast(1.02) brightness(0.88);
}

/* Domain tint overlays (match homepage hero tones) */
.cluster-hero__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cluster-hero__layer--healthcare {
	background:
		radial-gradient(ellipse 90% 70% at 15% 85%, rgba(72, 58, 48, 0.38) 0%, transparent 58%),
		linear-gradient(155deg, rgba(14, 26, 31, 0.48) 0%, rgba(20, 18, 16, 0.18) 50%, rgba(14, 26, 31, 0.42) 100%);
}

.cluster-hero__layer--security {
	background:
		radial-gradient(ellipse 80% 60% at 80% 20%, rgba(30, 38, 42, 0.32) 0%, transparent 55%),
		linear-gradient(145deg, rgba(10, 18, 22, 0.5) 0%, rgba(20, 20, 20, 0.18) 55%, rgba(14, 26, 31, 0.4) 100%);
}

.cluster-hero__layer--government {
	background:
		radial-gradient(ellipse 75% 55% at 50% 100%, rgba(55, 55, 52, 0.3) 0%, transparent 58%),
		linear-gradient(160deg, rgba(14, 20, 22, 0.48) 0%, rgba(26, 26, 26, 0.18) 45%, rgba(14, 26, 31, 0.4) 100%);
}

/* Scrim — darkens top and bottom for legibility */
.cluster-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(14, 26, 31, 0.72) 0%,
			rgba(14, 26, 31, 0.22) 38%,
			rgba(14, 26, 31, 0.28) 62%,
			rgba(14, 26, 31, 0.92) 100%
		);
	pointer-events: none;
}

/* Content rail — explicit padding (do not inherit %‑based vars from hero; matches header) */
.cluster-hero__content,
.work-bridge-hero__inner,
.work-hero__content.cluster-hero__content,
.studio-hero.studio-hero--video .cluster-hero__content.is-layout-constrained,
.studio-hero.studio-hero--video .work-bridge-hero__inner.is-layout-constrained {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	padding-left: var(--studio-hero-pad-left, var(--studio-rail-inset-left, 1.5rem)) !important;
	padding-right: var(--studio-hero-pad-right, var(--studio-rail-inset-right, 1.5rem)) !important;
	box-sizing: border-box;
}

/* WP constrained layout adds auto margins on children — reset inside hero rail */
.studio-hero.studio-hero--video .cluster-hero__content > *,
.studio-hero.studio-hero--video .cluster-hero__content > .alignwide,
.studio-hero.studio-hero--video .work-bridge-hero__inner > *,
.studio-hero.studio-hero--video .work-bridge-hero__inner > .alignwide {
	max-width: var(--studio-wide-size, 1200px);
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	width: 100%;
	box-sizing: border-box;
}

/* Ensure the ::before stripe on .studio-hero renders above the backdrop */
.studio-hero.studio-hero--video::before {
	z-index: 5;
}

/* Case study full pages — title + lede on video (password gate below) */
.studio-case__hero.studio-hero--video .wp-block-post-title,
.studio-case__hero.studio-hero--video .wp-block-post-title a {
	color: var(--wp--preset--color--base) !important;
}

.studio-case__hero.studio-hero--video .wp-block-post-excerpt,
.studio-case__hero.studio-hero--video .wp-block-post-excerpt p {
	color: rgba(250, 249, 247, 0.65) !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 1.5 !important;
	max-width: var(--studio-wide-size, 1200px);
}

.studio-case__hero.studio-hero--video .cluster-hero__company {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	color: rgba(250, 249, 247, 0.65) !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	max-width: var(--studio-wide-size, 1200px);
}

.studio-case__hero.studio-hero--video .cluster-hero__company a {
	color: rgba(250, 249, 247, 0.9) !important;
	text-decoration: underline;
	text-decoration-color: rgba(250, 249, 247, 0.35);
	text-underline-offset: 0.18em;
}

.studio-case__hero.studio-hero--video .cluster-hero__company a:hover {
	color: rgba(250, 249, 247, 1) !important;
}

/* Gated full pages: compact hero so hero + gate fits one viewport without scrolling.
   Body classes added only when post_password_required() is true. */
.studio-gate-context--case-study .studio-hero.studio-hero--video.studio-case__hero,
.studio-gate-context--project .studio-hero.studio-hero--video.studio-case__hero {
	min-height: min(28vh, 240px);
}

@media (max-width: 782px) {
	.wp-site-blocks > .studio-hero.studio-hero--video.studio-case__hero.alignfull {
		min-height: min(44vh, 400px);
	}

	.studio-gate-context--case-study .studio-hero.studio-hero--video.studio-case__hero,
	.studio-gate-context--project .studio-hero.studio-hero--video.studio-case__hero {
		min-height: min(32vh, 260px);
	}

	.studio-case__hero.studio-hero--video .cluster-hero__content {
		padding-top: var(--wp--preset--spacing--50, 2.5rem);
		padding-bottom: var(--wp--preset--spacing--50, 2.5rem);
	}

	.wp-site-blocks > .studio-hero.studio-hero--video.studio-case__hero .wp-block-post-title {
		font-size: clamp(1.55rem, 6.5vw, 2.1rem) !important;
		line-height: 1.12 !important;
		max-width: none;
	}

	.studio-case__hero.studio-hero--video .wp-block-post-excerpt,
	.studio-case__hero.studio-hero--video .wp-block-post-excerpt p {
		max-width: none;
	}
}

/* PAI page — padding-bottom creates the landing zone; embed pulls into it.
   Hero text growth pushes the zone down naturally rather than overlapping. */
.studio-hero.studio-hero--video.cluster-hero--pai {
	padding-bottom: 200px !important;
}

.studio-case__body--hero-embed #try-it {
	margin-top: -200px;
	position: relative;
	z-index: 10;
}

@media (max-width: 782px) {
	.studio-hero.studio-hero--video.cluster-hero--pai {
		padding-bottom: 80px !important;
	}
	.studio-case__body--hero-embed #try-it {
		margin-top: -80px;
	}
}

/* Projects hub — overlaps hero by 200px */
.studio-hero.studio-hero--video.cluster-hero--projects {
	padding-bottom: 200px !important;
}

#projects-hub {
	margin-top: -200px;
	position: relative;
	z-index: 10;
	box-sizing: border-box;
	overflow-x: clip; /* contain card scale-in animation */
}

@media (max-width: 782px) {
	.studio-hero.studio-hero--video.cluster-hero--projects {
		padding-bottom: 80px !important;
	}
	#projects-hub {
		margin-top: -80px;
		max-width: 100%; /* explicit: hub stays within main's padding box on narrow viewports */
	}
}

/* Reduced motion — hide video; poster on backdrop (hero-assets.php inline CSS) */