/* ── JPS Legacy Block ────────────────────────────────────────────────────── */

/* ── Section: bg-background pt-[72px] md:pt-24 pb-24 md:pb-32 lg:pb-40 lg:pt-[117px] */

.legacy-section {
	background:     #ffffff; /* bg-background */
	padding-top:    72px;    /* pt-[72px] mobile */
	padding-bottom: 6rem;    /* pb-24 = 96px */
}

@media (min-width: 768px) {
	.legacy-section {
		padding-top:    6rem;   /* md:pt-24 = 96px */
		padding-bottom: 8rem;   /* md:pb-32 = 128px */
	}
}

@media (min-width: 1024px) {
	.legacy-section {
		padding-top:    117px;  /* lg:pt-[117px] */
		padding-bottom: 10rem;  /* lg:pb-40 = 160px */
	}
}

/* ── Main grid: grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16 items-center ── */

.legacy-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   2.5rem; /* gap-10 */
	align-items:           center;
}

@media (min-width: 1024px) {
	.legacy-grid {
		grid-template-columns: repeat(12, 1fr);
		gap:                   4rem; /* lg:gap-16 */
	}
}

/* ── Image column: lg:col-span-4 ─────────────────────────────────────────── */

.legacy-image-col {
	position: relative;
}

@media (min-width: 1024px) {
	.legacy-image-col {
		grid-column: span 4;
	}
}

/* ── Image wrapper: relative aspect-[2/1] overflow-hidden bg-near-black ──── */

.legacy-image-wrap {
	position:     relative;
	aspect-ratio: 2 / 1;
	overflow:     hidden;
	background:   #0B0B0F;
}

/* ── Image: absolute inset-0 h-full w-full object-cover ──────────────────── */

.legacy-image {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* ── Gradient overlay: bg-gradient-to-tr from-near-black/80 via-near-black/30 to-transparent */

.legacy-image__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to top right,
		rgba(11, 11, 15, 0.80),
		rgba(11, 11, 15, 0.30) 50%,
		transparent
	);
}

/* ── Stat block: absolute bottom-4 left-4 lg:bottom-6 lg:left-6 flex items-end gap-3 text-white */

.legacy-stat {
	position:    absolute;
	bottom:      1rem;   /* bottom-4 */
	left:        1rem;   /* left-4 */
	display:     flex;
	align-items: flex-end;
	gap:         0.75rem; /* gap-3 */
	color:       #ffffff;
}

@media (min-width: 1024px) {
	.legacy-stat {
		bottom: 1.5rem; /* lg:bottom-6 */
		left:   1.5rem; /* lg:left-6 */
	}
}

/* ── Stat number: stat-numeral text-[88px] lg:text-[140px] leading-[0.85]
   color:transparent -webkit-text-stroke:2px white (hollow outline) ─────── */

.legacy-stat__number {
	/* stat-numeral base */
	font-family:          var(--font-display);
	font-weight:          800;
	line-height:          0.85; /* leading-[0.85] */
	letter-spacing:       -0.04em;
	font-variant-numeric: tabular-nums;
	/* hollow stroke effect */
	font-size:            88px; /* text-[88px] mobile */
	color:                transparent;
	-webkit-text-stroke:  2px #ffffff; /* 2px hsl(var(--primary-foreground)) = white */
}

@media (min-width: 1024px) {
	.legacy-stat__number {
		font-size: 140px; /* lg:text-[140px] */
	}
}

/* ── Stat label: eyebrow-light pb-3 ─────────────────────────────────────── */

.legacy-stat__label {
	padding-bottom: 0.75rem; /* pb-3 */
}

/* ── Text column: lg:col-span-6 lg:col-start-7 space-y-8 ────────────────── */

.legacy-text-col {
	display:        flex;
	flex-direction: column;
	gap:            2rem; /* space-y-8 */
}

@media (min-width: 1024px) {
	.legacy-text-col {
		grid-column: 7 / span 6; /* lg:col-start-7 lg:col-span-6 */
	}
}

/* ── Eyebrow margin: mb-0 (gap handles spacing via space-y-8) ────────────── */

.legacy-text-col .eyebrow {
	margin-bottom: 0;
}

/* ── Headline: display-xl with margin reset (gap handles spacing) ─────────── */

.legacy-headline {
	/* display-xl styles come from global .display-xl in style.css */
}

/* ── Body paragraph grid: grid-cols-1 md:grid-cols-2 gap-8
   text-foreground/80 text-base lg:text-lg leading-relaxed ──────────────── */

.legacy-body-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   2rem; /* gap-8 */
}

@media (min-width: 768px) {
	.legacy-body-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.legacy-body-p {
	font-family: var(--font-body);
	font-size:   1rem;   /* text-base */
	line-height: 1.625;  /* leading-relaxed */
	color:       rgba(11, 11, 15, 0.80); /* text-foreground/80 */
	margin:      0;
}

@media (min-width: 1024px) {
	.legacy-body-p {
		font-size: 1.125rem; /* lg:text-lg */
	}
}