/**
 * Component: page hero of internal pages.
 *
 * Mobile-first: the photo under a soft light veil (base-fade-right-soft),
 * the language badge in the corner (the compact header has none). From
 * laptop (64em) the Figma desktop layers: a white fade from the left
 * (base-fade-right) over a dark fade from the bottom (foreground-fade-up).
 * The texture (flag) sits on top at 6%, as in Figma.
 *
 * Without a photo the overlay is hidden: the band (surface-alt, or
 * primary-darkest when centered) shows plain.
 *
 * Centered layout (.page-hero--centered, firm_page_hero_layout()): only the
 * title, centered in base over the full-bleed photo under the
 * hero-overlay-wide gradient (custom.pageHero.overlay replaces it, since
 * the home hero shares that slug), at every width. Its height is
 * custom.pageHero.height (unset: the content's height, as today).
 */

.page-hero {
	overflow: hidden;
	isolation: isolate;
}

/* The media covers the whole section, not just the container. */
.page-hero .firm-section__container {
	position: static;
}

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.page-hero__background,
.page-hero__texture {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.page-hero__background {
	object-position: center 60%; /* Crop of the default hero photo (Firm Settings → Page hero). */
}

.page-hero__texture {
	opacity: 0.06; /* Figma layer opacity. */
}

.page-hero__overlay {
	position: absolute;
	inset: 0;
	background-image: var(--wp--preset--gradient--base-fade-right-soft);
}

/* No photo: no fades either. Over the plain band they only paint a grey
   smudge (three classes: wins over the centered and laptop overlays). */
.page-hero__media:not(:has(> .page-hero__background)) > .page-hero__overlay {
	display: none;
}

/* Language badge: same as the home hero's (small screens only). */
.page-hero__badge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 1;
	margin: 0;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--accent);
	color: var(--wp--custom--text--on-accent, var(--wp--preset--color--base));
	font-size: var(--wp--preset--font-size--body-xxs);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--caption);
	text-transform: uppercase;
}

.page-hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding-block: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--50)) var(--wp--preset--spacing--60);
}

.page-hero__titles {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.page-hero__title {
	color: var(--wp--custom--page-hero--title, var(--wp--preset--color--primary));
}

.page-hero__subtitle {
	color: var(--wp--preset--color--foreground);
	font-weight: 700;
	text-transform: uppercase;
}

.page-hero__cta {
	text-decoration: none;
}

/* Centered layout (two classes: wins over the laptop overlay below). */
.page-hero--centered .page-hero__overlay {
	background-image: var(--wp--custom--page-hero--overlay, var(--wp--preset--gradient--hero-overlay-wide));
}

.page-hero--centered .page-hero__content {
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wp--custom--page-hero--height, auto);
	text-align: center;
}

.page-hero--centered .page-hero__title {
	color: var(--wp--custom--page-hero--title-centered, var(--wp--preset--color--base));
	text-shadow: var(--wp--custom--text-shadow--hero);
}

/* laptop: the desktop layers and spacing. */
@media (min-width: 64em) {
	.page-hero__overlay {
		background-image: var(--wp--preset--gradient--base-fade-right), var(--wp--preset--gradient--foreground-fade-up);
	}

	.page-hero__content {
		gap: var(--wp--preset--spacing--50);
		padding-block: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--60));
	}

	.page-hero__titles {
		gap: var(--wp--preset--spacing--40);
	}
}

/* desktop: the desktop header shows the language badge. */
@media (min-width: 80em) {
	.page-hero__badge {
		display: none;
	}
}