/*
 * Hero — full-bleed group block with a Customizer-driven background image
 * + brand-deep gradient overlay.
 *
 * Visual layering (top → bottom on z-axis):
 *   1. Inner content (h1, p) — white text
 *   2. Navy gradient overlay at --isjac-hero-overlay-opacity
 *   3. Background image at --isjac-hero-bg-image (cover, centered)
 *
 * Both vars are owned by Appearance → Customize → ISJAC Brand. See
 * inc/customizer.php — never edit values inline on a page or in seed
 * content. Per-page overrides go via the marker class
 * `is-style-isjac-hero-<variant>` if/when we add variants.
 */

/* Hero starts at viewport top so the transparent header floats over it.
 * `var(--header-height-overlap)` (default 80px) compensates so content
 * (h1, p) doesn't crash into the nav. */
.entry-content > .alignfull.is-style-isjac-hero,
.entry-content > .wp-block-group.alignfull.has-background:first-child {
	position: relative;
	padding-top: calc(var(--isjac-section-xl) + var(--header-height-overlap, 5rem));
	padding-bottom: var(--isjac-section-xl);
	color: #FFFAFC;
	overflow: hidden;
	isolation: isolate;
	background-image: var(--isjac-hero-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Navy gradient overlay — stacked above the image, below the content. */
.entry-content > .alignfull.is-style-isjac-hero::before,
.entry-content > .wp-block-group.alignfull.has-background:first-child::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		rgba(2, 7, 38, var(--isjac-hero-overlay-opacity)) 0%,
		rgba(21, 82, 111, calc(var(--isjac-hero-overlay-opacity) - 0.15)) 100%
	);
}

/* Scrim under the floating nav — only at the top of the hero. Guarantees
 * 4.5:1 contrast between paper-white nav text and the underlying image
 * regardless of what hero photo is loaded. Fades to transparent below
 * 8rem so it doesn't compete with the hero headline. */
.entry-content > .alignfull.is-style-isjac-hero::after,
.entry-content > .wp-block-group.alignfull.has-background:first-child::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 8rem;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(2, 7, 38, 0.55) 0%,
		rgba(2, 7, 38, 0.25) 60%,
		rgba(2, 7, 38, 0) 100%
	);
}

.entry-content > .alignfull.is-style-isjac-hero h1,
.entry-content > .wp-block-group.alignfull.has-background:first-child h1 {
	color: #FFFAFC;
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 auto var(--isjac-pad-md);
	line-height: 1.1;
	max-width: 28ch;
	text-align: center;
	position: relative;
	z-index: 1;
}

.entry-content > .alignfull.is-style-isjac-hero p,
.entry-content > .wp-block-group.alignfull.has-background:first-child p {
	color: rgba(255, 250, 252, 0.92);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	margin: 0 auto;
	max-width: 50ch;
	text-align: center;
	line-height: 1.5;
	position: relative;
	z-index: 1;
}