/* Page Hero — patterns/page-hero.php
   Four selectable variants on the pattern's outer .idia-page-hero group,
   registered via register_block_style() in functions.php. Vertical
   padding always comes from spacing presets — set as block attributes in
   the pattern file itself (default variant) or overridden per variant
   below using the same preset custom properties, never a raw px. The
   card/split-row and detail variants are the one exception to "no
   horizontal margin on a section" (AGENTS.md §8.1): they reuse the
   .is-surface-card inset mechanism, the same documented exception
   style.css already carries for that class. */

/* ---- Outer wrapper: no rail of its own ----
   .idia-page-hero is align:full + a constrained-layout group, so WordPress
   adds .has-global-padding to it and applies the 32/20px rail there. That
   duplicates the rail: the inner .idia-page-hero__content is itself a
   default-aligned child of an alignfull block, so it independently
   receives the same root-padding re-application — confirmed via
   do_blocks() on the raw pattern output, both elements carried
   .has-global-padding at once. Zeroed here exactly as
   .idia-hero-card__wrapper.has-global-padding is in hero-card.css, so the
   rail lives only on .idia-page-hero__content, matching the reference's
   .header-block (inset only) > .hero-section > .container (rail) nesting.
   Scoped to .idia-page-hero deliberately — .has-global-padding sits on
   8-10 elements per page and every other section depends on it. */
.idia-page-hero.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* ---- Default — transparent background, left-aligned ----
   No CSS needed: the pattern's own block attributes (padding-top:196,
   padding-bottom:hero-bottom, left-aligned by default) are the default
   variant's full definition. */

/* ---- Centred / brand fill ---- */

.idia-page-hero.is-style-hero-centred {
	background-color: var(--wp--preset--color--main);
}

.idia-page-hero.is-style-hero-centred .idia-page-hero__content {
	align-items: center;
	text-align: center;
}

.idia-page-hero.is-style-hero-centred .idia-page-hero__title {
	max-width: none;
}

.idia-page-hero.is-style-hero-centred .idia-page-hero__eyebrow,
.idia-page-hero.is-style-hero-centred .idia-page-hero__title,
.idia-page-hero.is-style-hero-centred .idia-page-hero__intro {
	color: var(--wp--preset--color--base);
}

/* Optional eyebrow h2 overline above the h1 — About page's "We exist to
   build lasting digital legacies." sits above the animated headline in
   the reference. Not part of the pattern's default markup (most inner
   pages don't use it); add a heading block with this style above the h1
   only on pages that need it. */
.idia-page-hero.is-style-hero-centred .idia-page-hero__overline {
	color: var(--wp--preset--color--base);
}

/* ---- Card / split row ----
   Reuses the .is-surface-card mechanism (style.css) directly rather than
   requiring that class to be co-applied by hand: register_block_style()
   only ever adds a single is-style-* class per block, so a user selecting
   "Page Hero: Card / split row" from the Styles panel has no way to also
   tick "Surface: Card" at the same time. Same tokens, same !important
   rationale (documented in style.css) — WordPress's own root-padding and
   auto-centering rules would otherwise win at equal specificity. */

.idia-page-hero.is-style-hero-card {
	margin-inline: calc(var(--wp--custom--section-inset) - var(--wp--custom--rail)) !important;
	border-radius: var(--wp--custom--radius--24);
	background-color: var(--wp--preset--color--tertiary);
	overflow: hidden;
	padding-bottom: 0;
}

.idia-page-hero.is-style-hero-card .idia-page-hero__content {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--gap--40);
}

.idia-page-hero.is-style-hero-card .idia-page-hero__title {
	max-width: none;
}

@media (max-width: 767px) {
	.idia-page-hero.is-style-hero-card .idia-page-hero__content {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Detail page ----
   Same .is-surface-card reuse as the card/split-row variant above, for the
   same reason — only one is-style-* class can be active at a time. Stays
   centred with a fixed xl (80px) bottom padding instead of the row
   layout, and fills with main (near-black) rather than tertiary, per the
   task spec's "main background fill". */

.idia-page-hero.is-style-hero-detail {
	margin-inline: calc(var(--wp--custom--section-inset) - var(--wp--custom--rail)) !important;
	border-radius: var(--wp--custom--radius--24);
	background-color: var(--wp--preset--color--main);
	overflow: hidden;
	padding-bottom: var(--wp--preset--spacing--80);
}

.idia-page-hero.is-style-hero-detail .idia-page-hero__eyebrow,
.idia-page-hero.is-style-hero-detail .idia-page-hero__title,
.idia-page-hero.is-style-hero-detail .idia-page-hero__intro {
	color: var(--wp--preset--color--base);
}

.idia-page-hero.is-style-hero-detail .idia-page-hero__content {
	align-items: center;
	text-align: center;
}

.idia-page-hero.is-style-hero-detail .idia-page-hero__title {
	max-width: none;
}