/*
 * v1.8.49: Articles page header uses the insight hero (navy video with blue and cyan light grids)
 * under the same dark wash as the article hero. Compact height. Reduced motion shows the poster.
 */
.shf-ed-hero.shf-ed-hero--slim.shf-ed-hero--video {
	position: relative !important;
	isolation: isolate;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(300px, 28vw, 360px);
	box-sizing: border-box;
	padding-top: clamp(48px, 5vw, 72px) !important;
	padding-bottom: clamp(28px, 3vw, 40px) !important;
}
.shf-ed-hero--video .shf-ed-hero__art {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	margin: 0 !important;
	max-width: none !important;
}
.shf-ed-hero--video .shf-ed-hero__poster,
.shf-ed-hero--video .shf-ed-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.shf-ed-hero--video .shf-ed-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 18, 36, 0.92) 0%, rgba(8, 18, 36, 0.78) 36%, rgba(8, 18, 36, 0.42) 68%, rgba(8, 18, 36, 0.22) 100%);
}
.shf-ed-hero--video > *:not(.shf-ed-hero__art) { position: relative; z-index: 1; align-self: stretch; width: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
	.shf-ed-hero--video .shf-ed-hero__video { display: none !important; }
}
@media (max-width: 699px) {
	.shf-ed-hero.shf-ed-hero--slim.shf-ed-hero--video { min-height: 320px; }
	.shf-ed-hero--video .shf-ed-hero__scrim {
		background: linear-gradient(180deg, rgba(8, 18, 36, 0.45) 0%, rgba(8, 18, 36, 0.65) 38%, rgba(8, 18, 36, 0.92) 100%);
	}
}

/* v1.8.50.1: the CNCC Guide glass hero showed the stack zoomed in and hidden
   behind the headline. On desktop, keep the whole stack visible on the right
   at hero height and fade its left edge into the navy wash. */
@media (min-width: 782px) {
	.shf-insight__hero-poster[src*="hero-glass"],
	.shf-insight__hero-video[poster*="hero-glass"] {
		top: 11%;
		height: 78%;
		left: auto;
		right: 0;
		width: 58%;
		object-fit: cover;
		object-position: 50% 50%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 45%);
		mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 45%);
	}
	.shf-insight__hero-art:has([poster*="hero-glass"]) .shf-insight__hero-scrim {
		background: linear-gradient(100deg, rgba(8, 18, 36, 0.92) 0%, rgba(8, 18, 36, 0.7) 40%, rgba(8, 18, 36, 0.12) 72%, rgba(8, 18, 36, 0) 100%);
	}
}