/* =============================================================================
   JL Jet Sizes Widget
   Full-bleed dark-gradient section with glassmorphic jet-category cards.
   Mobile-first — single column, then 2-col ≥768px, 4-col ≥1024px
   (overridable via Elementor responsive column controls).
   ========================================================================== */

/* ── Zero out parent Elementor container padding & gap (full-bleed) ──────── */
.e-con:has(> .elementor-widget-jl-jet-sizes),
.e-con:has(> .e-con-inner > .elementor-widget-jl-jet-sizes) {
	--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-jet-sizes) > .e-con-inner {
	padding: 0 !important;
	gap: 0 !important;
	--padding-top: 0 !important;
	--padding-bottom: 0 !important;
}

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

.jl-jet-sizes__inner {
	max-width: 1352px;
	margin-inline: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem; /* 40px — Figma root gap */
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.jl-jet-sizes__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem; /* 24px */
	width: 100%;
	text-align: center;
}

.jl-jet-sizes__heading {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(1.75rem, 4.5vw, 3rem); /* 28 → 48 */
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.15em; /* ~7.2px at 48px */
	text-transform: uppercase;
	color: #ffffff;
	margin: 0;
}

.jl-jet-sizes__subheading {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(1rem, 1.38vw, 1.25rem);
	font-weight: 400;
	line-height: 1.4;
	color: #d4d4d4;
	margin: 0;
	max-width: 56ch;
}

/* ── Heading divider (shared schema) ─────────────────────────────────────── */
.jl-jet-sizes__divider {
	width: var(--jl-jet-sizes-divider-width, 128px);
	height: var(--jl-jet-sizes-divider-thickness, 1px);
	border: none;
	margin: 0;
	background: linear-gradient(
		to right,
		transparent 0%,
		var(--jl-jet-sizes-divider-color, #ffffff) 50%,
		transparent 100%
	);
}

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

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

/* ── Grid ────────────────────────────────────────────────────────────────── */
.jl-jet-sizes__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.25rem; /* 20px mobile */
	width: 100%;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.jl-jet-sizes__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 1.5rem; /* 24px */
	padding: 25px;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	text-align: center;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	position: relative;
	transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

/* ── Cloud decorative background (per-card) ──────────────────────────────── */
.jl-jet-sizes__card-cloud {
	position: absolute;
	left: var(--jl-jet-sizes-cloud-x, -157px);
	top: var(--jl-jet-sizes-cloud-y, 121px);
	width: 683px;
	height: auto;
	max-width: none;
	opacity: 0.2;
	pointer-events: none;
	object-fit: cover;
	z-index: 0;
}

/* Keep card content above the cloud */
.jl-jet-sizes__card > :not(.jl-jet-sizes__card-cloud) {
	position: relative;
	z-index: 1;
}

.jl-jet-sizes__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jl-jet-sizes-icon-size, 48px);
	height: var(--jl-jet-sizes-icon-size, 48px);
	color: #ffffff;
	flex-shrink: 0;
}

.jl-jet-sizes__card-icon svg,
.jl-jet-sizes__card-icon img,
.jl-jet-sizes__card-icon i {
	width: 100%;
	height: 100%;
	font-size: var(--jl-jet-sizes-icon-size, 48px);
	line-height: 1;
}

.jl-jet-sizes__card-title {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(1.5rem, 2.5vw, 2rem); /* 24 → 32 */
	font-weight: 400;
	line-height: 0.875; /* 28/32 — Figma Title Large */
	color: #ffffff;
	text-transform: uppercase;
}

.jl-jet-sizes__card-number {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(2rem, 3.5vw, 2.8125rem); /* 32 → 45 */
	font-weight: 400;
	line-height: 1.15;
	color: rgba(255, 255, 255, 0.8);
}

.jl-jet-sizes__card-label {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(0.875rem, 1.2vw, 1.25rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.jl-jet-sizes__card-desc {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(0.9375rem, 1.2vw, 1.25rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.7);
}

/* ── Responsive padding ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
	.jl-jet-sizes {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
	.jl-jet-sizes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.jl-jet-sizes__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem; /* 32px — Figma desktop */
	}
}