/**
 * SCBL — About / Leadership block.
 *
 * Dark section. Left: eyebrow + headline + body. Right: coach image with
 * a floating quote card overlapping it.
 *
 * Typography source-of-truth: typography.css. The block uses semantic tags
 * (<h2> for the title, <p> for descriptions, <blockquote> for the quote)
 * plus utility classes (.uppercase-5, .text-r2, .text-r3, .text-semibold)
 * for size/weight variants. This file ONLY handles colors, layout,
 * max-widths and design-specific transforms (uppercase, max-width caps).
 */

.about-leadership {
	background: var(--color-indigo-900);
	color: var(--color-white);
	padding-block: clamp(2.5rem, 6vw, 5.5rem);
}

.about-leadership__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3rem);
	align-items: center;
}

/* ─── Content (left column) ──────────────────────────────────────────── */
.about-leadership__content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 46rem;
}

/* Eyebrow — typography from .uppercase-5 utility class on the markup. */
.about-leadership__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--color-orange-500);
}

.about-leadership__eyebrow-strip {
	display: inline-block;
	width: 5rem;
	height: 1px;
	background: var(--color-orange-500);
	flex-shrink: 0;
}

/* Title — typography inherits from <h2> global rule (typography.css).
 * Block adds color, uppercase transform, layout caps. */
.about-leadership__title {
	font-size: clamp(2rem, 3vw + 1rem, 3rem);
	color: var(--color-white);
	text-transform: uppercase;
	margin: 0;
	max-width: 36rem;
}

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

/* Description — typography inherits from <p> + body global rules. */
.about-leadership__description {
	color: var(--color-dark-200);
	margin: 0;
	max-width: 36rem;
}

.about-leadership__description br + br {
	display: block;
	content: "";
	margin-block-start: 0.5em;
}

.about-leadership__description strong {
	color: var(--color-white);
}

/* ─── Media (right column) ───────────────────────────────────────────── */
.about-leadership__media {
	position: relative;
	width: 100%;
	max-width: 40rem;
	aspect-ratio: 1 / 1;
}

.about-leadership__image-frame {
	position: relative;
	width: calc(100% - 0.75rem);
	height: calc(100% - 0.75rem);
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--color-dark-900);
	box-shadow: 0.75rem 0.75rem 0 0 var(--color-orange-500);
}

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

/* ─── Quote card (floats over the image) ─────────────────────────────── */
.about-leadership__quote {
	position: absolute;
	right: -0.75rem;
	bottom: -0.5rem;
	max-width: min(20rem, 90%);
	margin: 0;
	padding: 1.25rem 1.25rem 1rem;
	background: var(--color-indigo-700);
	border-radius: 0.75rem;
	color: var(--color-white);
	box-shadow: 0 1.5rem 2.5rem rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Quote glyph — large brand mark, sized explicitly because it isn't a
 * heading or body element (no global rule covers a 2.5rem decorative span). */
.about-leadership__quote-mark {
	color: var(--color-orange-500);
	font-size: 2.5rem;
	line-height: 1;
	margin-block-end: -0.25rem;
}

.about-leadership__quote-text {
	color: var(--color-white);
	margin: 0;
	max-width: none;
}

.about-leadership__quote-author {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.about-leadership__quote-author-name {
	color: var(--color-white);
}

.about-leadership__quote-author-role {
	color: var(--color-indigo-300);
}

/* ─── Editor preview hint ────────────────────────────────────────────── */
.about-leadership__placeholder-note {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 0.5rem;
	color: var(--color-indigo-200);
}

/* ─── Desktop: side-by-side ──────────────────────────────────────────── */
@media (min-width: 64rem) {
	.about-leadership {
		padding-block: clamp(4rem, 6vw, 5.5rem);
	}

	.about-leadership__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(3.5rem, 6vw, 7rem);
	}

	.about-leadership__media {
		justify-self: end;
		width: clamp(24rem, 35vw, 38rem);
		max-width: 40rem;
	}

	.about-leadership__quote {
		right: -1.5rem;
		bottom: 0.25rem;
	}
}

/* ─── Above 1600px: pack columns tight so the wide container doesn't
 * leave a huge dead space between content and image. */
@media (min-width: 100rem) {
	.about-leadership__inner {
		grid-template-columns: minmax(0, 46rem) minmax(0, 38rem);
		gap: clamp(3.5rem, 6vw, 7rem);
		justify-content: start;
	}

	.about-leadership__media {
		justify-self: start;
		max-width: 40rem;
	}
}