/* =====================================================================
 * Esselith Hero block — front end + editor canvas.
 *
 * Ported from the Esselith theme's homepage welcome hero (.es-home-welcome) so a
 * Hero looks the same under any theme. Reads the --es-* tokens with suite
 * fallbacks; never defines them. Inline vars from render.php / editor.js:
 *   --es-hero-h        height, % of the screen (unitless, 50–100)
 *   --es-hero-overlay  scrim darkness, 0.40–0.90
 * The theme may add --esc-hero-overlay-top / --esc-header-h for its transparent
 * header (see the theme's companion.css), which this file never sets.
 * ===================================================================== */

.es-hero {
	--es-hero-rail: 1200px;
	/* (0.35.11) One even gap between eyebrow, title, text, times and buttons —
	   the same 24px rhythm as the theme's block sections (Roger, 2026-10-28). */
	--es-hero-gap: 24px;
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block: 0;
	padding: 56px max(20px, calc((100% - var(--es-hero-rail)) / 2));
	font-family: var(--es-font-body, "Montserrat", system-ui, -apple-system, sans-serif);
	text-align: center;
}
.es-hero *,
.es-hero *::before,
.es-hero *::after {
	box-sizing: border-box;
}

/* Edge-to-edge on the front end in any content column (the theme's reading
   column already does this for .alignfull; this covers every other container).
   Not in the editor canvas, where WordPress lays out full-width blocks itself. */
:where(body:not(.editor-styles-wrapper)) .es-hero.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.es-hero-inner {
	position: relative;
	z-index: 2; /* above the scrim + media */
	width: 100%;
	max-width: 720px;
}

/* ---- Alignment: the text column moves to the side of a 1200px rail ---- */
.es-hero--left { justify-content: flex-start; text-align: left; }
.es-hero--right { justify-content: flex-end; text-align: right; }
/* (0.39.0) .es-hero.es-hero--* so these beat the centered defaults below
   (.es-hero .es-hero-text / .es-hero-ctas) — the buttons sat centered before. */
.es-hero.es-hero--left .es-hero-text { margin-left: 0; }
.es-hero.es-hero--right .es-hero-text { margin-right: 0; }
.es-hero.es-hero--left .es-hero-ctas { justify-content: flex-start; }
.es-hero.es-hero--right .es-hero-ctas { justify-content: flex-end; }

/* ---- Type ---- */
.es-hero .es-hero-eyebrow {
	margin: 0 0 var(--es-hero-gap);
	font-size: var(--es-eyebrow, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--es-brand-secondary, #004F71);
}
.es-hero .es-hero-title {
	margin: 0 0 var(--es-hero-gap);
	font-family: var(--es-font-display, "Playfair Display", Georgia, serif);
	/* The theme's homepage step-down from --es-h1-hero: 32px on phones → 44px. */
	font-size: var(--es-h1-home, clamp(2rem, 1.6rem + 1.75vw, 2.75rem));
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--es-ink, #071120);
	text-wrap: balance;
}
.es-hero .es-hero-text {
	margin: 0 auto var(--es-hero-gap);
	max-width: 52ch;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, var(--es-lead, 1.3125rem));
	line-height: 1.6;
	color: var(--es-text, #2E3D48);
	text-wrap: pretty;
}
.es-hero .es-hero-services {
	margin: 0 0 var(--es-hero-gap);
	font-weight: 600;
	line-height: 1.7;
	color: var(--es-text, #2E3D48);
}

/* ---- Buttons: the suite CTA pill (primary = ink on orange, secondary = teal) ---- */
.es-hero .es-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.es-hero .es-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	font-family: var(--es-font-body, "Montserrat", system-ui, -apple-system, sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	min-height: var(--es-btn-height, 48px); /* (0.35.6) the suite button standard */
	border-radius: var(--es-radius-pill, 999px);
	border: 2px solid transparent;
	transition: transform 0.18s ease;
}
/* (0.35.6) Hover = lift only; the colours stay as they rest (the suite standard). */
.es-hero .es-hero-btn:hover,
.es-hero .es-hero-btn:focus-visible {
	transform: translateY(var(--es-btn-lift, -2px));
}
@media (prefers-reduced-motion: reduce) {
	.es-hero .es-hero-btn:hover,
	.es-hero .es-hero-btn:focus-visible { transform: none; }
}
.es-hero .es-hero-btn:focus-visible {
	outline: 2px solid var(--es-brand-secondary, #004F71);
	outline-offset: 2px;
}
.es-hero .es-hero-btn--primary,
.es-hero .es-hero-btn--primary:visited,
.es-hero .es-hero-btn--primary:hover,
.es-hero .es-hero-btn--primary:focus {
	background: var(--es-brand-primary, #ED8B00);
	border-color: var(--es-brand-primary, #ED8B00);
	color: var(--es-ink, #071120);
}
.es-hero .es-hero-btn--secondary,
.es-hero .es-hero-btn--secondary:visited,
.es-hero .es-hero-btn--secondary:hover,
.es-hero .es-hero-btn--secondary:focus {
	background: var(--es-brand-secondary, #004F71);
	border-color: var(--es-brand-secondary, #004F71);
	color: #ffffff;
}

/* ---- No media: the clean light welcome band ---- */
.es-hero--plain {
	background: #ffffff;
}

/* ---- (0.35.6) No media, dark tone: the suite's deep band, light type ---- */
.es-hero--plain.es-hero--dark {
	background: linear-gradient(165deg, var(--es-deep-a, #064058), var(--es-deep-b, #04293A));
}
.es-hero--dark .es-hero-eyebrow,
.es-hero--dark .es-hero-title,
.es-hero--dark .es-hero-text,
.es-hero--dark .es-hero-services {
	color: #ffffff;
}
/* (0.39.0) An accent word in the heading (<em>) — orange on the dark band or a
   photo, as the theme's hero patterns always had it; teal on the light band
   (canon: no orange text on light). */
.es-hero .es-hero-title em {
	color: var(--es-brand-secondary, #004F71);
}
.es-hero--dark .es-hero-title em,
.es-hero--media .es-hero-title em {
	color: var(--es-brand-primary, #ED8B00);
}

/* ---- Media: photo and/or video behind a scrim, light type ---- */
.es-hero--media {
	isolation: isolate; /* scrim / media / content composite together */
	overflow: hidden;
	/* Sized by the viewport, never by the copy (the Three I's: inspiration first).
	   Plain vh first as the fallback; svh below keeps it clear of a phone's URL bar. */
	min-height: 78vh;
	min-height: max(520px, calc(var(--es-hero-h, 78) * 1vh));
	padding-top: 72px;
	padding-bottom: 72px;
	background-color: var(--es-ink, #071120);
}
@supports (height: 1svh) {
	.es-hero--media {
		min-height: max(520px, calc(var(--es-hero-h, 78) * 1svh));
	}
}
.es-hero--media .es-hero-inner {
	max-width: 880px; /* room for a ~38-character heading on one line at 44px */
}
.es-hero .es-hero-img,
.es-hero .es-hero-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	pointer-events: none;
}
.es-hero .es-hero-video {
	background: transparent;
	opacity: 0;
	transition: opacity 0.4s ease;
	/* A stable compositing layer, so the video stays painted while scrolling
	   instead of the scrim flashing through it. */
	transform: translateZ(0);
	backface-visibility: hidden;
}
.es-hero .es-hero-video.is-playing {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.es-hero .es-hero-video { display: none; }
}
/* Scrim: a vertical wash, a touch stronger at the bottom where the buttons sit. */
.es-hero--media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(7, 17, 32, calc(var(--es-hero-overlay, 0.65) * 0.85)) 0%,
		rgba(7, 17, 32, var(--es-hero-overlay, 0.65)) 100%
	);
	pointer-events: none;
}
/* Light type + a photo-independent text-shadow contrast floor. */
.es-hero--media .es-hero-eyebrow,
.es-hero--media .es-hero-title,
.es-hero--media .es-hero-text,
.es-hero--media .es-hero-services {
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(7, 17, 32, 0.55), 0 1px 12px rgba(7, 17, 32, 0.35);
}
/* Over a photo or the dark band the secondary is solid white with teal type
   (0.35.6: it stays that way on hover — lift only). */
.es-hero--media .es-hero-btn--secondary,
.es-hero--media .es-hero-btn--secondary:visited,
.es-hero--media .es-hero-btn--secondary:hover,
.es-hero--media .es-hero-btn--secondary:focus,
.es-hero--dark .es-hero-btn--secondary,
.es-hero--dark .es-hero-btn--secondary:visited,
.es-hero--dark .es-hero-btn--secondary:hover,
.es-hero--dark .es-hero-btn--secondary:focus {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--es-brand-secondary, #004F71);
}
/* White focus ring — the teal one is ~2:1 on the scrim, under the 3:1 floor. */
.es-hero--media .es-hero-btn:focus-visible,
.es-hero--dark .es-hero-btn:focus-visible {
	outline-color: #ffffff;
}

/* ---- (0.35.10) Video Hero on phones: full screen, crop centred ----
   A wide video filling a tall phone screen shows only a vertical slice, and the
   desktop focal point (set for a wide screen) aims that slice off to one side —
   on Grove, the wall beside the pastor (Roger, 2026-10-28: "keep full screen ...
   center the crop"). Under 782px a video Hero's video and its still crop from
   the middle; the vertical setting is kept (a phone fills top to bottom, so it
   rarely matters). Desktop and photo-only Heroes keep the focal point. */
@media (max-width: 781px) {
	.es-hero.es-hero--video .es-hero-img,
	.es-hero.es-hero--video .es-hero-video {
		object-position: 50% var(--es-hero-fy, 50%) !important; /* beats the inline desktop focal point */
	}
}

/* ---- Editor only: keep RichText placeholders readable on the dark scrim ---- */
.editor-styles-wrapper .es-hero--media [data-rich-text-placeholder]::after,
.editor-styles-wrapper .es-hero--dark [data-rich-text-placeholder]::after {
	color: rgba(255, 255, 255, 0.7);
	opacity: 1;
}
/* ...except inside the buttons, whose own fills would swallow a white
   placeholder (0.35.6: the empty white second button read as blank). */
.editor-styles-wrapper .es-hero .es-hero-btn [data-rich-text-placeholder]::after,
.editor-styles-wrapper .es-hero .es-hero-btn[data-rich-text-placeholder]::after {
	color: currentColor;
	opacity: 0.75;
}