/**
 * SCBL — About Hero block.
 *
 * Inner-page hero: full-bleed dark image with gradient overlay, two-tone
 * headline and short description on the left. The image extends ABOVE
 * the section so it sits behind the floating site header, matching the
 * main Hero block's --hero-header-pull pattern.
 */

.about-hero {
	position: relative;
	width: 100%;
	min-height: clamp(13rem, 30vh, 18rem);
	display: flex;
	align-items: stretch;
	color: var(--color-white);
	background: var(--color-dark-950);
	/* Same value as main Hero so the image lift matches visually. */
	--about-hero-header-pull: clamp(5.5rem, 8vw + 3rem, 10.25rem);
	z-index: 0;
}

/* The site header floats above the about-hero image. This rule is duplicated
 * from hero.css because each block's CSS only loads on pages where that block
 * is placed, so the elevated z-index has to travel with the block. */
.site-header { position: relative; z-index: 5; }

/* ─── Background media ───────────────────────────────────────────────── */
/* Extends ABOVE the section by --about-hero-header-pull so the image sits
 * behind the floating site header. overflow: hidden keeps it clipped to
 * the visible top edge so the page above stays clean. */
.about-hero__media {
	position: absolute;
	inset-inline: 0;
	top: calc(-1 * var(--about-hero-header-pull));
	bottom: 0;
	overflow: hidden;
	z-index: 0;
}

.about-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

.about-hero__overlay {
	position: absolute;
	inset: 0;
	/* Mobile-first: strong black overlay keeps text legible over busy images. */
	background: linear-gradient(
		to top right,
		rgba(24, 12, 39, 0.98) 0%,
		rgba(24, 12, 39, 0.94) 45%,
		rgba(47, 23, 79, 0.78) 75%,
		rgba(47, 23, 79, 0.55) 100%
	);
	pointer-events: none;
}

/* ─── Inner layout ───────────────────────────────────────────────────── */
.about-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	width: 100%;
	padding-block: clamp(1.25rem, 3vw, 2rem);
}

.about-hero__content {
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	max-width: 44rem; /* 704px — roomier left column for a longer description */
}

.about-hero__title {
	text-transform: capitalize;
	color: var(--color-white);
	font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem);
	font-weight: var(--fw-black);
	letter-spacing: -0.02em;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.18em;
}

.about-hero__title-line--accent { color: var(--color-orange-500); }

.about-hero__description {
	color: var(--color-white);
	margin: 0;
	max-width: 40rem; /* 640px — roomier so the description doesn't wrap awkwardly */
}

/* ─── Editor preview hint ────────────────────────────────────────────── */
.about-hero__placeholder-note {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	margin: 0;
	padding: 0.75rem 1rem;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 0.5rem;
	color: var(--color-white);
	z-index: 2;
}

/* ─── Tablet+: looser vertical rhythm ────────────────────────────────── */
@media (min-width: 64rem) {
	.about-hero {
		min-height: clamp(20rem, 44vh, 28rem); /* 320 → 448 */
	}

	.about-hero__inner {
		padding-block: clamp(3rem, 6vw, 5rem);
	}

	.about-hero__overlay {
		background: linear-gradient(
			to top right,
			rgba(24, 12, 39, 0.96) 0%,
			rgba(24, 12, 39, 0.85) 38%,
			rgba(47, 23, 79, 0.6) 70%,
			rgba(47, 23, 79, 0.35) 100%
		);
	}
}