/*
 * css/blocks/pi-hero.css — Layer 3, block-specific layout for acf/pi-hero
 *
 * LAYOUT ONLY. Colors, fonts, and component visuals come from components.css
 * and the site's existing :root tokens. Do NOT add hex literals, font-family
 * overrides, or button styles to this file.
 *
 * The hero embeds the calculator widget; its styles are in pi-calc-widget.css.
 */

.pi-hero {
	background: var(--header-color-dark);
	color: var(--header-color-white);
	padding: 60px 24px 80px;
	position: relative;
	overflow: hidden;
	font-family: var(--norml-font-body);
	box-sizing: border-box;
}
.pi-hero *,
.pi-hero *::before,
.pi-hero *::after { box-sizing: border-box; }

/* Decorative radial glow — pure layout/decoration, no new tokens. */
.pi-hero::before {
	content: '';
	position: absolute;
	right: -200px;
	top: -100px;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(235, 209, 74, 0.08), transparent 70%);
	pointer-events: none;
}

/* Breadcrumb — block-specific because the hero is the only block with one
 * over a dark bg. If a second dark-hero block ever needs it, promote to
 * components.css then. */
.pi-breadcrumb {
	font-size: 12px;
	color: var(--norml-gray);
	margin-bottom: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.pi-breadcrumb a { color: var(--norml-gray); text-decoration: none; }
.pi-breadcrumb a:hover { color: var(--header-color-accent); }
.pi-breadcrumb__sep { margin: 0 6px; opacity: 0.55; }
.pi-breadcrumb__current { color: var(--header-color-accent); }

/* 2-col grid: lead text on left, calculator widget on right. */
.pi-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 60px;
	align-items: start;
}
.pi-hero__grid--no-calc { grid-template-columns: 1fr; }

.pi-hero__title {
	font-size: clamp(40px, 5.5vw, 64px);
	margin: 0 0 24px;
	color: var(--header-color-white);
	line-height: 1;
}
.pi-hero__accent {
	color: var(--header-color-accent);
	display: block;
}

.pi-hero__lead-body p {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 14px;
	line-height: 1.65;
}
.pi-hero__lead-body p:nth-of-type(n+2) {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.72);
}

/* Trust strip — small icon+label pills below the lead. */
.pi-hero__trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	padding-top: 24px;
	margin-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pi-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
}
.pi-hero__trust-item-icon { color: var(--header-color-accent); }

@media (max-width: 960px) {
	.pi-hero { padding: 40px 20px 60px; }
	.pi-hero__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.pi-hero__title { font-size: 38px; }
}