/* =============================================================================
   JL Stats Widget
   Full-bleed centered stats section. Used for: "Unparalleled Value" strip.
   ========================================================================== */

/* ── Zero out parent Elementor container padding & gap ─────────────────────── */
.e-con:has(> .elementor-widget-jl-stats),
.e-con:has(> .e-con-inner > .elementor-widget-jl-stats) {
	--padding-top: 0 !important;
	--padding-bottom: 0 !important;
	--padding-block-start: 0 !important;
	--padding-block-end: 0 !important;
	--padding-inline-start: 0 !important;
	--padding-inline-end: 0 !important;
	padding: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	gap: 0 !important;
}

.e-con:has(> .e-con-inner > .elementor-widget-jl-stats) > .e-con-inner {
	padding: 0 !important;
	gap: 0 !important;
	--padding-top: 0 !important;
	--padding-bottom: 0 !important;
	--padding-block-start: 0 !important;
	--padding-block-end: 0 !important;
}

/* ── Section wrapper ────────────────────────────────────────────────────────── */
.jl-stats {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: var(--jl-stats-padding-y, 80px) 1.5rem;
	box-sizing: border-box;
	background-color: #4b667c; /* fallback before inline gradient applies */
}

/* ── Inner content wrapper ──────────────────────────────────────────────────── */
.jl-stats__inner {
	max-width: 1352px;
	margin-inline: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
}

/* ── Heading ────────────────────────────────────────────────────────────────── */
.jl-stats__heading {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(1.5rem, 2.38vw, 2.25rem); /* 24px → 36px (Figma: 36px) */
	font-weight: 400;
	line-height: 1.11; /* 40px / 36px — Figma */
	letter-spacing: 0.15em; /* 5.4px / 36px — Figma tracking-[5.4px] */
	text-transform: uppercase;
	color: #ffffff;
	text-align: center;
	margin: 0;
}

/* ── Divider — Figma node 2118:30528 ───────────────────────────────────────────
   Defaults match Figma exactly: 128px × 1px, single white stop at 50%.
   `--narrow` (default) is the Figma sharp peak.
   `--wide` matches the canonical pattern used in leadership/locations/content,
   with the color held across the middle 50% of the divider's width.
*/
.jl-stats__divider {
	width: var(--jl-stats-divider-width, 128px);
	height: var(--jl-stats-divider-thickness, 1px);
	border: none;
	margin: 0;
	background: linear-gradient(
		to right,
		transparent 0%,
		var(--jl-stats-divider-color, #ffffff) 50%,
		transparent 100%
	);
}

.jl-stats__divider--wide {
	background: linear-gradient(
		to right,
		transparent 0%,
		var(--jl-stats-divider-color, #ffffff) 25%,
		var(--jl-stats-divider-color, #ffffff) 75%,
		transparent 100%
	);
}

.jl-stats__divider--left {
	background: linear-gradient(
		to right,
		var(--jl-stats-divider-color, #ffffff) 0%,
		var(--jl-stats-divider-color, #ffffff) 60%,
		transparent 100%
	);
}

/* ── Grid of stat items ─────────────────────────────────────────────────────── */
.jl-stats__grid {
	margin: 0;
	padding: 0;
	width: 100%;
	display: grid;
	gap: 2.5rem; /* 40px both directions — Figma stats row gap-[40px] */
}

/* ── Mobile Portrait (≤480px): always 1 column ──────────────────────────────── */
@media (max-width: 480px) {
	.jl-stats__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Mobile Landscape (481–767px) ───────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 767px) {
	.jl-stats__grid--ml-cols-1 { grid-template-columns: 1fr; }
	.jl-stats__grid--ml-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Single stat item ───────────────────────────────────────────────────────── */
.jl-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.25rem;
	min-width: 0;
}

.jl-stats__value {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(2rem, 3.18vw, 3rem); /* 32px → 48px (Figma: 48px) */
	font-weight: 400;
	line-height: 1.2; /* Figma: leading-[normal] on h-[58px] for 48px */
	color: #ffffff;
	margin: 0;
}

.jl-stats__label {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(1rem, 2.12vw, 2rem); /* 16px → 32px (Figma: 32px H4) */
	font-weight: 400;
	line-height: 1.25; /* 40px / 32px — Figma leading-[40px] */
	text-transform: uppercase;
	color: #ffffff;
	margin: 0;
}

/* ── Tablet (768–1023px) ────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
	.jl-stats {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.jl-stats__grid--tablet-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.jl-stats__grid--tablet-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.jl-stats__grid--tablet-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Desktop (≥1024px) ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
	.jl-stats {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.jl-stats__grid--desktop-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.jl-stats__grid--desktop-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.jl-stats__grid--desktop-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
	.jl-stats {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}