/*
 * H-01 home hero (Phase 8, pattern sealcoin/home-hero). Ported from the
 * redesign PoC (css/site.css @ ed0ab9f7, "Hero") using theme.json tokens and
 * base.css aliases only. Loaded only on pages whose content uses the hero
 * (functions.php), and in the editor.
 *
 * Structure: core Cover (block style `hero`) > .wrap > .sc-hero-copy
 * (eyebrow, H1, lead, .sc-hero-actions) + .sc-hero-pillars + .sc-hero-powered.
 *
 * Literal values kept from the PoC: 1px borders, the image focal point
 * (60% 40%), the pillar panel opacity (78%) and the 1px hover lift.
 */

.wp-block-cover.is-style-hero {
	position: relative;
	display: block;
	min-height: 0;
	margin-block: 0;
	padding: 0;
	overflow: hidden;
	background: var(--c-black);
	color: var(--c-text);
	isolation: isolate;
}

/* The Cover's direct children: the background <img> and the inner container. */
.wp-block-cover.is-style-hero > img {
	object-position: 60% 40%;
}

.wp-block-cover.is-style-hero > div {
	width: 100%;
	color: inherit;
}

/* Margin resets at the lowest specificity; component rules below win. */
.is-style-hero :where(.wrap, .sc-hero-copy, .sc-hero-pillars, .sc-hero-pillar, .sc-hero-pillar-body) > * {
	margin-block: 0;
}

.is-style-hero .wrap {
	padding-block: var(--wp--custom--hero--padding-top) var(--wp--custom--hero--padding-bottom);
}

.sc-hero-copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--hero--copy-gap);
	max-width: var(--wp--custom--hero--copy-width);
}

.is-style-hero h1 {
	color: var(--c-text);
}

/* ---------- Actions ---------- */

.sc-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--hero--action-gap);
}

.sc-hero-actions .wp-element-button {
	display: inline-flex;
	gap: var(--wp--custom--hero--button-icon-gap);
	align-items: center;
}

.sc-hero-actions .wp-element-button:hover {
	box-shadow: var(--shadow-lift);
}

/* ---------- Pillars ---------- */

.sc-hero-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--hero--pillars-gap);
	max-width: var(--wp--custom--hero--pillars-width);
	margin-top: var(--wp--custom--hero--pillars-offset);
}

.sc-hero-pillar {
	--sc-icon-size: var(--wp--custom--hero--pillar-icon-size);
	display: flex;
	gap: var(--wp--custom--hero--pillar-gap);
	align-items: flex-start;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: var(--wp--custom--hero--pillar-padding);
	background: color-mix(in srgb, var(--c-navy) 78%, transparent);
	color: var(--c-orange);
	-webkit-backdrop-filter: blur(var(--wp--custom--hero--pillar-blur));
	backdrop-filter: blur(var(--wp--custom--hero--pillar-blur));
}

.sc-hero-pillar-title {
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--hero-pillar-title);
	font-weight: 600;
	color: var(--c-text);
}

/* Inline, like the PoC's <span>: its lines take the pillar body's line boxes
   (body size and line height), which sets the pillar height. */
.sc-hero-pillar-text {
	display: inline;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--compact);
	color: var(--c-muted);
}

/* ---------- Powered-by line ---------- */

.sc-hero-powered {
	margin-top: var(--wp--custom--hero--powered-offset);
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--label);
	letter-spacing: var(--wp--custom--hero--label-letter-spacing);
	text-transform: uppercase;
	color: var(--c-faint);
}

.sc-hero-powered strong {
	font-weight: 500;
	letter-spacing: var(--wp--custom--hero--powered-name-letter-spacing);
	color: var(--c-muted);
}

/* sm (PoC: 760px) */
@media (max-width: 760px) {

	.sc-hero-pillars {
		grid-template-columns: 1fr;
	}
}

/* Hover lift and transitions only when motion is welcome (docs/05 §6). */
@media (prefers-reduced-motion: no-preference) {

	.sc-hero-actions .wp-element-button {
		transition: background-color var(--wp--custom--motion--fast), box-shadow var(--wp--custom--motion--fast), transform var(--wp--custom--motion--fast);
	}

	.sc-hero-actions .wp-element-button:hover {
		transform: translateY(-1px);
	}
}