/**
 * Hero - Basic Block
 * Minimal block-specific styles; spacing/type/colors come from utility classes.
 */

.hero-basic {
	isolation: isolate;
}

/* The global header-overlap rule (critical/header.css) pulls every first-child
 * block up by --felix-header-overlap-offset so the header floats over it on
 * desktop. On mobile we want hero-basic to sit BELOW the nav, so zero out
 * the negative margin for this block only. Selectors mirror all three of
 * the global rule's selectors so we win at the same or higher specificity. */
@media (max-width: 47.999rem) {
	body.has-fixed-header-first-block main > .hero-basic:first-child,
	body.has-fixed-header-first-block main > .wp-block-post-content > .hero-basic:first-child,
	body.has-fixed-header-first-block main > .entry-content > .hero-basic:first-child {
		margin-top: 0;
	}
	.hero-basic__container.container--xxl {
		padding-left: var(--wp--preset--spacing--8);
		padding-right: var(--wp--preset--spacing--8);
	}
}

/* Panel is a flex column so its inner layout can grow to fill any min-height
 * set via the editor. Without this, content would sit at the top of an
 * over-tall panel; this lets the layout justify-center its content.
 *
 * min-height is driven by --hero-basic-min-h (mobile) and overridden at md+
 * by --hero-basic-min-h-md (desktop). When neither var is set the property
 * resolves to nothing and the panel sizes to its content. */
.hero-basic__panel {
	display: flex;
	flex-direction: column;
	min-height: var(--hero-basic-min-h);
}

@media (min-width: 48rem) {
	.hero-basic__panel {
		min-height: var(--hero-basic-min-h-md, var(--hero-basic-min-h));
	}
}

.hero-basic__layout {
	flex-grow: 1;
	justify-content: center;
}

/* On md+ with the left-aligned variant, restore horizontal space-between so
 * content + decorative image still distribute across the row. align-center
 * (set via utility class) handles the vertical centering. */
@media (min-width: 48rem) {
	.hero-basic--left .hero-basic__layout {
		justify-content: space-between;
	}
}

.hero-basic__background {
	z-index: 0;
}
.hero-basic__background picture,
.hero-basic__background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.hero-basic__container {
	z-index: 1;
}

.hero-basic__eyebrow-icon {
	margin-top: -6px;
}

.hero-basic__headline {
	text-wrap: balance;
}
.hero-basic__headline p {
	margin: 0;
}
.hero-basic__headline p + p {
	margin-top: var(--wp--preset--spacing--8);
}

/* Content column — narrow max-width matches Figma's left-aligned hero */
.hero-basic__content {
	max-width: 32rem;
}
.hero-basic--center .hero-basic__content {
	max-width: 40rem;
	margin-inline: auto;
}

/* Decorative image — natural aspect ratio, capped at a sensible max height
 * so it never blows out the panel vertically. Right-aligned and bleeds to the
 * panel's edge (negates the layout's right padding); panel overflow-hidden
 * handles any cropping. */
.hero-basic__decorative-image {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-right: calc(var(--wp--preset--spacing--32) * -1);
}

.hero-basic__decorative-image picture,
.hero-basic__decorative-image img {
	display: block;
	max-width: 100%;
	max-height: 18rem;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: right center;
}

.hero-basic__promo {
	position: absolute;
	right: var(--wp--preset--spacing--24);
	bottom: 10%;
	transform: rotate(15deg);
	width: 9rem;
	height: 9rem;
	background:
		radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(180deg, rgba(255, 250, 235, 0.6) 0%, rgba(124, 146, 164, 0.9) 50%);
	filter: drop-shadow(0 8px 20px rgba(40, 60, 100, 0.15));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	color: var(--wp--preset--color--white);
	text-align: center;
	pointer-events: none;
	z-index: 2;
}

.hero-basic__promo-eyebrow,
.hero-basic__promo-label {
	font-family: var(--wp--preset--font-family--matter-mono, 'Matter Mono', ui-monospace, monospace);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
}

.hero-basic__promo-value {
	font-family: var(--wp--preset--font-family--matter);
	font-size: 2.625rem;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.hero-basic__promo-footnote {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	bottom: var(--wp--preset--spacing--24);
	margin: 0;
	pointer-events: none;
	z-index: 2;
}

@media (min-width: 48rem) {
	.hero-basic__promo {
		top: 30%;
		bottom: auto;
		right: var(--wp--preset--spacing--32);
		transform: translateY(-50%) rotate(15deg);
		width: 12rem;
		height: 12rem;
	}
}

@media (min-width: 64rem) {
	.hero-basic__promo {
		width: 13.5rem;
		height: 13.5rem;
		right: var(--wp--preset--spacing--96);
		gap: 0.375rem;
	}

	.hero-basic__promo-value {
		font-size: 3rem;
	}

	.hero-basic__promo-footnote {
		left: unset;
		transform: unset;
		width: fit-content;
		right: var(--wp--preset--spacing--64);
	}
}

/* md: tablet+ */
@media (min-width: 48rem) {
	.hero-basic--left .hero-basic__content {
		flex: 0 1 32rem;
		min-width: 0;
	}
	.hero-basic--left .hero-basic__decorative-image {
		flex: 1 1 0;
		min-width: 0;
		margin-right: calc(var(--wp--preset--spacing--64) * -1);
	}
	.hero-basic--left .hero-basic__decorative-image picture,
	.hero-basic--left .hero-basic__decorative-image img {
		max-height: 26rem;
	}
}

/* lg: desktop (1024px) */
@media (min-width: 64rem) {
	.hero-basic--left .hero-basic__decorative-image picture,
	.hero-basic--left .hero-basic__decorative-image img {
		max-height: 30rem;
	}
}