/**
 * Work hub hero — video stack + practice filter sync.
 * Full-bleed layout: cluster-hero.css (.studio-hero.studio-hero--video.alignfull).
 */

/* White canvas for all non-header blocks on the home page.
   margin-block resets remove the WP block gap that would otherwise push the
   work console template part down, fighting the negative margin pull-up. */
body.home :where(.wp-site-blocks) > *:not(header) {
	background-color: #ffffff;
	margin-block-start: 0;
	margin-block-end: 0;
}

.studio-hero.studio-hero--work.studio-hero--video {
	min-height: min(52vh, 520px);
	min-height: min(52svh, 520px); /* stable against Safari dynamic toolbar */
	padding-bottom: clamp(120px, 14vh, 200px);
}

.studio-hero--work .work-hero__backdrop,
.studio-hero--work .cluster-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.work-hero__media {
	position: absolute;
	inset: 0;
}

.work-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 0.55s ease;
	filter: saturate(0.9) contrast(1.08) brightness(0.78);
}

.work-hero__video.is-active {
	opacity: 1;
}

.work-hero__backdrop[data-active-domain="healthcare"] .cluster-hero__layer--healthcare,
.work-hero__backdrop[data-active-domain="security"] .cluster-hero__layer--security,
.work-hero__backdrop[data-active-domain="government"] .cluster-hero__layer--government {
	opacity: 1;
}

.work-hero__backdrop .cluster-hero__layer {
	opacity: 0;
	transition: opacity 0.55s ease;
}

.work-hero__backdrop[data-active-domain="none"] .cluster-hero__layer {
	opacity: 0;
}

/* Hard cutoff — dark bottom edge, no white fade. Content below provides the contrast. */
.work-hero__fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		transparent 65%,
		rgba(14, 26, 31, 0.85) 82%,
		rgba(14, 26, 31, 1) 100%
	);
	pointer-events: none;
}

/* Posters + reduced-motion video hide: hero-assets.php inline CSS */
.work-hero__backdrop[data-active-domain="none"] {
	background: linear-gradient(145deg, rgba(14, 26, 31, 0.97) 0%, rgba(24, 46, 56, 0.9) 100%) !important;
}

@media (max-width: 640px) {
	.work-hero__fade {
		background: linear-gradient(
			to bottom,
			transparent 0%,
			transparent 55%,
			rgba(14, 26, 31, 0.85) 75%,
			rgba(14, 26, 31, 1) 100%
		);
	}
}