/* ==========================================================================
   Resource page hero (FAQ, Downloads, Blog) — matches the Company pages'
   hero (navy + drafting grid + glow, Space Grotesk headline with ice-blue
   highlight, mono eyebrow, blended photo on the right via hero-photo.css).
   Loaded on those pages by cg_resource_hero_assets() in functions.php.
   Elementor classes: section .cgh-hero > .cgh-hero__box > .cgh-eyebrow,
   .cgh-hero__title (wrap words in <span class="cgh-hl"> for the highlight),
   .cgh-hero__text, and an Image widget with class cg-hero-photo.
   ========================================================================== */

.elementor-element.cgh-hero.e-con {
	position: relative;
	overflow: hidden;
	min-height: 520px;
	justify-content: center;
	background-color: #07111F !important;
}
/* Heroes with the "cgh-hero--photo" class keep the photo set in Elementor
   (Style → Background) — the navy tone + grid is layered on top in ::after. */
.elementor-element.cgh-hero.e-con:not(.cgh-hero--photo) {
	background-image:
		radial-gradient(760px 460px at 10% 30%, rgba(59, 99, 214, .26), rgba(59, 99, 214, 0) 70%),
		radial-gradient(520px 380px at 92% 110%, rgba(59, 99, 214, .18), rgba(59, 99, 214, 0) 70%),
		linear-gradient(rgba(157, 184, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(157, 184, 255, .05) 1px, transparent 1px) !important;
	background-size: auto, auto, 56px 56px, 56px 56px !important;
}
.elementor-element.cgh-hero.e-con::before { content: none !important; }

/* Same content edge as the Company pages (1200px box, 20px inset). */
.elementor .elementor-element.cgh-hero__box.e-con {
	--padding-left: 20px;
	--padding-right: 20px;
	max-width: 100%;
	min-width: 0;
}
.cgh-hero__box > .elementor-widget:not(.cg-hero-photo) { max-width: 700px; }

.cgh-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase;
	color: #9DB8FF !important;
}
.cgh-eyebrow .elementor-heading-title::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.cgh-hero__title .elementor-heading-title { text-transform: none !important; text-wrap: balance; }
.cgh-hl {
	background: linear-gradient(92deg, #9DB8FF 0%, #DCE7FF 55%, #9DB8FF 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}
.elementor-widget.cgh-hero__text { margin-top: 24px !important; color: #B4C1D4 !important; font-size: 18px; line-height: 1.65; }
.cgh-hero__text p { margin: 0; }
.cgh-hero__text a { color: #DCE7FF; font-weight: 600; text-decoration: none; box-shadow: inset 0 -1px 0 rgba(157, 184, 255, .5); transition: color .25s ease, box-shadow .25s ease; }
.cgh-hero__text a:hover { color: #fff; box-shadow: inset 0 -2px 0 #9DB8FF; }

@media (max-width: 1024px) {
	.elementor-element.cgh-hero.e-con { min-height: 440px; }
}
@media (max-width: 767px) {
	.elementor-element.cgh-hero.e-con { min-height: 400px; justify-content: flex-start; }
	.cgh-eyebrow .elementor-heading-title { font-size: 11px !important; letter-spacing: .14em !important; gap: 10px; }
	.cgh-eyebrow .elementor-heading-title::before { width: 20px; }
	.elementor-widget.cgh-hero__text { font-size: 16px; margin-top: 18px !important; }
}

/* Photo heroes (.cgh-hero--photo): the photo is the hero section's own
   Elementor background (Style > Background), so it is swapped in the
   editor. It is toned to the navy with a luminosity blend, and a navy wash
   plus the drafting grid sits on top, darker on the left for the headline. */
.elementor-element.cgh-hero--photo.e-con {
	background-color: #0A1628 !important;
	background-blend-mode: luminosity;
}
.elementor-element.cgh-hero--photo.e-con::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(rgba(157, 184, 255, .05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(157, 184, 255, .05) 1px, transparent 1px) 0 0 / 56px 56px,
		radial-gradient(760px 460px at 10% 30%, rgba(59, 99, 214, .28), rgba(59, 99, 214, 0) 70%),
		linear-gradient(0deg, rgba(7, 17, 31, .9) 0%, rgba(7, 17, 31, 0) 38%),
		linear-gradient(90deg, rgba(7, 17, 31, .97) 0%, rgba(7, 17, 31, .9) 36%, rgba(7, 17, 31, .6) 66%, rgba(7, 17, 31, .42) 100%);
}
.elementor-element.cgh-hero--photo.e-con > .e-con { position: relative; z-index: 1; }