/**
 * Marketing › Hero (universal) — scoped, token-driven styles.
 *
 * Every value resolves to a foundry-theme design token with a hardcoded fallback,
 * so the block carries no brand value and degrades gracefully. Per-site brand CSS
 * re-skins by re-declaring the tokens on the wrapper.
 *
 * Structure: the horizontal gutter lives on __inner (NOT the section), so the
 * section + its absolute background span edge-to-edge with no side gaps on any
 * viewport — this is the carried "full-bleed on mobile" QA fix, structural rather
 * than a mobile-only negative-margin hack.
 */

.foundry-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate; /* keep the bg/overlay z-index stack local to the hero */
	background: var(--wp--preset--color--surface, #f7f7f5);
	color: var(--wp--preset--color--contrast, #1a1a1a);
	padding-block: var(--wp--preset--spacing--2xl, clamp(3rem, 8vw, 6rem));
	min-height: var(--foundry-hero-min-h, auto);
}

/* ---- Inner: holds the horizontal gutter + max width ---- */
.foundry-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--lg, clamp(1.5rem, 4vw, 3rem));
	display: grid;
	gap: var(--wp--preset--spacing--xl, clamp(2rem, 5vw, 4rem));
	align-items: center;
}

/* ================= Background layers (absolute, behind) ================= */
.foundry-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.foundry-hero__bg img,
.foundry-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.foundry-hero__bg--solid {
	background: var(--fh-solid, var(--wp--preset--color--primary, #2563eb));
}

/* Gradients composed from colour tokens — re-skin when tokens change. */
.foundry-hero--gradient-brand .foundry-hero__bg--gradient {
	background: linear-gradient(135deg,
		var(--wp--preset--color--primary, #2563eb) 0%,
		var(--wp--preset--color--secondary, #1a1a1a) 100%);
}
.foundry-hero--gradient-primary .foundry-hero__bg--gradient {
	background: linear-gradient(135deg,
		var(--wp--preset--color--primary, #2563eb) 0%,
		var(--wp--preset--color--primary-hover, #1d4ed8) 100%);
}
.foundry-hero--gradient-accent .foundry-hero__bg--gradient {
	background: linear-gradient(135deg,
		var(--wp--preset--color--primary, #2563eb) 0%,
		var(--wp--preset--color--accent, #0ea5a5) 100%);
}
.foundry-hero--gradient-dark .foundry-hero__bg--gradient {
	background: linear-gradient(135deg,
		var(--wp--preset--color--contrast, #111) 0%,
		var(--wp--preset--color--secondary, #333) 100%);
}

/* Gallery: images stacked, cross-fade. First is visible without JS. */
.foundry-hero__bg--gallery .foundry-hero__gallery-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.9s ease;
}
.foundry-hero__bg--gallery .foundry-hero__gallery-img.is-active {
	opacity: 1;
}

/* Overlay */
.foundry-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--fh-overlay-color, #0b0b0b);
	opacity: var(--fh-overlay-opacity, 0.55);
}

/* ======================= Text colour schemes ======================= */
.foundry-hero--text-light,
.foundry-hero--text-light .foundry-hero__title,
.foundry-hero--text-light .foundry-hero__subtitle {
	color: var(--wp--preset--color--base, #fff);
}
.foundry-hero--text-light .foundry-hero__eyebrow {
	color: var(--wp--preset--color--base, #fff);
	opacity: 0.85;
}
.foundry-hero--text-light .foundry-hero__breadcrumbs {
	color: var(--wp--preset--color--base, #fff);
}
.foundry-hero--text-light .foundry-hero__breadcrumb-link,
.foundry-hero--text-light .foundry-hero__breadcrumb-sep {
	opacity: 0.75;
}
.foundry-hero--text-light .foundry-hero__breadcrumb-link:hover {
	color: var(--wp--preset--color--base, #fff);
	opacity: 1;
}
.foundry-hero--text-light .foundry-hero__breadcrumb-current {
	color: var(--wp--preset--color--base, #fff);
}
.foundry-hero--text-dark .foundry-hero__title {
	color: var(--wp--preset--color--contrast, #111);
}
.foundry-hero--text-dark .foundry-hero__subtitle {
	color: var(--wp--preset--color--muted, #555);
}

/* ============================ Layouts ============================ */
/* Split: content + aside side-by-side on wider viewports. */
.foundry-hero--split .foundry-hero__inner {
	grid-template-columns: 1fr;
}
@media (min-width: 782px) {
	.foundry-hero--split .foundry-hero__inner {
		grid-template-columns: 1.25fr 1fr;
	}
}

/* Centered: single column, content centred and width-capped. */
.foundry-hero--center .foundry-hero__content {
	max-width: 760px;
	margin-inline: auto;
}

/* Full-media: content overlaid on a full-bleed background, min-height set. */
.foundry-hero--full-media {
	--foundry-hero-min-h: clamp(420px, 60vh, 680px);
	display: flex;
	align-items: center;
}
.foundry-hero--full-media .foundry-hero__inner {
	width: 100%;
}
.foundry-hero--full-media .foundry-hero__content {
	max-width: 820px;
}

/* Alignment */
.foundry-hero--align-center .foundry-hero__content { text-align: center; }
.foundry-hero--align-center .foundry-hero__content,
.foundry-hero--align-center .foundry-hero__actions { margin-inline: auto; }
.foundry-hero--align-center .foundry-hero__actions { justify-content: center; }
.foundry-hero--align-right  .foundry-hero__content { text-align: right; }
.foundry-hero--align-right  .foundry-hero__actions { justify-content: flex-end; }
.foundry-hero--align-left   .foundry-hero__content { text-align: left; }

/* ---- Content ---- */
.foundry-hero__content {
	max-width: 640px;
}
.foundry-hero--split .foundry-hero__content {
	max-width: none;
}

.foundry-hero__breadcrumbs {
	font-size: var(--wp--preset--font-size--sm, 0.8125rem);
	color: var(--wp--preset--color--muted, #555);
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}
.foundry-hero__breadcrumb-link {
	color: inherit;
	text-decoration: none;
}
.foundry-hero__breadcrumb-link:hover {
	color: var(--wp--preset--color--primary, #2563eb);
}
.foundry-hero__breadcrumb-current {
	color: var(--wp--preset--color--contrast, #111);
	font-weight: 600;
}

.foundry-hero__eyebrow {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--sm, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #2563eb);
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}

.foundry-hero__title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--display, clamp(2.5rem, 6vw, 4.5rem));
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast, #111);
	margin: 0 0 var(--wp--preset--spacing--md, 1.5rem);
}
/* The accent phrase, rendered in the brand accent colour (kills the italic-teal
   custom-HTML hack). Inline so it flows on the same line as the title text. */
.foundry-hero__accent {
	color: var(--wp--preset--color--accent, #0ea5a5);
	font-style: italic;
}
.foundry-hero__accent:empty {
	display: none;
}

.foundry-hero__subtitle {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1.55;
	color: var(--wp--preset--color--muted, #555);
	margin: 0 0 var(--wp--preset--spacing--lg, 2rem);
	max-width: 56ch;
}
.foundry-hero--align-center .foundry-hero__subtitle { margin-inline: auto; }

/* ---- Buttons ---- */
.foundry-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm, 1rem);
}
.foundry-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.875em 1.75em;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--base, 1rem);
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.foundry-hero__btn:hover { transform: translateY(-2px); }
.foundry-hero__btn--primary {
	background: var(--wp--preset--color--primary, #2563eb);
	color: var(--wp--preset--color--on-primary, #fff);
	border-color: var(--wp--preset--color--primary, #2563eb);
}
.foundry-hero__btn--primary:hover {
	background: var(--wp--preset--color--primary-hover, #1d4ed8);
	border-color: var(--wp--preset--color--primary-hover, #1d4ed8);
}
.foundry-hero__btn--secondary {
	background: var(--wp--preset--color--secondary, #1a1a1a);
	color: var(--wp--preset--color--base, #fff);
	border-color: var(--wp--preset--color--secondary, #1a1a1a);
}
.foundry-hero__btn--outline {
	background: transparent;
	color: var(--wp--preset--color--contrast, #111);
	border-color: var(--wp--preset--color--border, #d4d4d4);
}
.foundry-hero__btn--outline:hover {
	border-color: var(--wp--preset--color--primary, #2563eb);
	color: var(--wp--preset--color--primary, #2563eb);
}
/* On light-text heroes the outline button flips to light. */
.foundry-hero--text-light .foundry-hero__btn--outline {
	color: var(--wp--preset--color--base, #fff);
	border-color: rgba(255, 255, 255, 0.6);
}
.foundry-hero--text-light .foundry-hero__btn--outline:hover {
	color: var(--wp--preset--color--base, #fff);
	border-color: var(--wp--preset--color--base, #fff);
}

/* ============================ Asides ============================ */
/* Aside image */
.foundry-hero__media {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--lg, 0 20px 50px rgba(0, 0, 0, 0.12));
}
.foundry-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Single proof stat */
.foundry-hero__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--wp--preset--spacing--xs, 0.5rem);
	padding: var(--wp--preset--spacing--xl, 3rem) var(--wp--preset--spacing--lg, 2rem);
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e5e5e5);
	border-radius: 10px;
	box-shadow: var(--wp--preset--shadow--md, 0 10px 30px rgba(0, 0, 0, 0.08));
}
.foundry-hero__stat-value {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--display, clamp(3rem, 8vw, 5rem));
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--primary, #2563eb);
}
.foundry-hero__stat-label {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--base, 1rem);
	font-weight: 600;
	color: var(--wp--preset--color--muted, #555);
}

/* Stat list */
.foundry-hero__stat-list {
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--lg, 2rem);
	display: grid;
	gap: var(--wp--preset--spacing--md, 1.5rem);
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e5e5e5);
	border-radius: 10px;
	box-shadow: var(--wp--preset--shadow--md, 0 10px 30px rgba(0, 0, 0, 0.08));
}
.foundry-hero__stat-list-item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--sm, 1rem);
}
.foundry-hero__stat-list-value {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--h-3, 1.75rem);
	font-weight: 800;
	color: var(--wp--preset--color--primary, #2563eb);
}
.foundry-hero__stat-list-label {
	grid-column: 1 / -1;
	font-size: var(--wp--preset--font-size--base, 1rem);
	color: var(--wp--preset--color--muted, #555);
}

/* Contact card */
.foundry-hero__contact {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs, 0.5rem);
	padding: var(--wp--preset--spacing--xl, 2.5rem) var(--wp--preset--spacing--lg, 2rem);
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e5e5e5);
	border-radius: 10px;
	box-shadow: var(--wp--preset--shadow--md, 0 10px 30px rgba(0, 0, 0, 0.08));
	text-align: center;
}
.foundry-hero__contact-title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #111);
	margin: 0;
}
.foundry-hero__contact-phone {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--h-2, 2rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--wp--preset--color--primary, #2563eb);
	text-decoration: none;
}
.foundry-hero__contact-phone:hover { text-decoration: underline; }
.foundry-hero__contact-area,
.foundry-hero__contact-hours {
	font-size: var(--wp--preset--font-size--base, 1rem);
	color: var(--wp--preset--color--muted, #555);
	margin: 0;
}

/* Form aside */
.foundry-hero__form {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e5e5e5);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--lg, 2rem);
	box-shadow: var(--wp--preset--shadow--md, 0 10px 30px rgba(0, 0, 0, 0.08));
}
.foundry-hero__form-placeholder {
	color: var(--wp--preset--color--muted, #555);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}
.foundry-hero__form-placeholder code {
	display: inline-block;
	margin-inline: 0.25em;
}
.foundry-hero__form-placeholder span {
	display: block;
	margin-top: 0.5rem;
	opacity: 0.75;
}

/* ============================ Animations ============================ */
@media (prefers-reduced-motion: no-preference) {
	.foundry-hero--anim-fade .foundry-hero__content > *,
	.foundry-hero--anim-slide-up .foundry-hero__content > *,
	.foundry-hero--anim-zoom .foundry-hero__content > * {
		opacity: 0;
		animation: foundry-hero-in 0.8s ease-out forwards;
	}
	.foundry-hero--anim-slide-up .foundry-hero__content > * { transform: translateY(28px); }
	.foundry-hero--anim-zoom .foundry-hero__content > * { transform: scale(0.94); }
	.foundry-hero__content > *:nth-child(1) { animation-delay: 0s; }
	.foundry-hero__content > *:nth-child(2) { animation-delay: 0.12s; }
	.foundry-hero__content > *:nth-child(3) { animation-delay: 0.24s; }
	.foundry-hero__content > *:nth-child(4) { animation-delay: 0.36s; }
}
@keyframes foundry-hero-in {
	to { opacity: 1; transform: none; }
}

/* ============================ Phase 2 additions ====================== */

/* ---- Badge eyebrow (eyebrow_style = "badge") — pill + pulsing dot ---- */
.foundry-hero__eyebrow--badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4em 0.9em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--primary, #2563eb) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary, #2563eb) 24%, transparent);
}
.foundry-hero__eyebrow-dot {
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #0ea5a5);
	/* match the pulse ring to the dot colour */
	--foundry-glow-color: var(--wp--preset--color--accent, #0ea5a5);
}
/* On a light-text hero, tint the pill for legibility on dark backgrounds. */
.foundry-hero--text-light .foundry-hero__eyebrow--badge {
	background: rgb(255 255 255 / 0.12);
	border-color: rgb(255 255 255 / 0.28);
}

/* ---- Score meter aside (aside_type = "meter") ---- */
.foundry-hero__meter {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md, 1.25rem);
	padding: var(--wp--preset--spacing--xl, 2.5rem) var(--wp--preset--spacing--lg, 2rem);
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e5e5e5);
	border-radius: 10px;
	box-shadow: var(--wp--preset--shadow--md, 0 10px 30px rgba(0, 0, 0, 0.08));
}
/* Optional header row: icon tile + bold title over a sub-line. */
.foundry-hero__meter-header {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm, 1rem);
}
.foundry-hero__meter-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--primary, #2563eb) 12%, transparent);
}
.foundry-hero__meter-icon img {
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}
.foundry-hero__meter-headings {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}
.foundry-hero__meter-title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast, #111);
}
.foundry-hero__meter-sublabel {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--muted, #555);
}

.foundry-hero__meter-head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2xs, 0.25rem);
	text-align: center;
}
.foundry-hero__meter-value {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--display, clamp(3rem, 8vw, 4.5rem));
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--primary, #2563eb);
}
.foundry-hero__meter-label {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--base, 1rem);
	font-weight: 600;
	color: var(--wp--preset--color--muted, #555);
}
.foundry-hero__meter-track {
	height: 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-contrast, #ececec);
	overflow: hidden;
}
.foundry-hero__meter-fill {
	display: block;
	height: 100%;
	width: var(--fh-meter, 0%);
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--primary, #2563eb),
		var(--wp--preset--color--accent, #0ea5a5)
	);
	transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Fill animates from 0 only once the reveal system is armed (JS on); with JS
   off the bar shows full immediately (no empty-bar-forever). */
.foundry-motion-ready .foundry-reveal:not(.is-revealed) .foundry-hero__meter-fill {
	width: 0;
}

/* Optional footer row: left/right micro-captions below the bar. */
.foundry-hero__meter-footer {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm, 1rem);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #555);
}
.foundry-hero__meter-foot-end { text-align: right; }

@media (prefers-reduced-motion: reduce) {
	.foundry-hero__meter-fill { transition: none; }
}