/* =============================================================================
   JL Values Card Widget
   Used for: Core Values, Jet Card Benefits, and similar icon-list sections.
   ========================================================================== */

/* ── Zero out parent Elementor container padding & gap ─────────────────────── */
.e-con:has(> .elementor-widget-jl-values-card),
.e-con:has(> .e-con-inner > .elementor-widget-jl-values-card) {
	--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-values-card) > .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-values-card {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: var(--jl-vc-padding-y, 80px) 1.5rem;
	box-sizing: border-box;
}

/* ── Inner content area ─────────────────────────────────────────────────────── */
.jl-values-card__inner {
	max-width: 1352px;
	margin-inline: auto;
	width: 100%;
}

/* ── Card (the gradient box) ────────────────────────────────────────────────── */
/* Figma node 2118:30399 — padding 32, gap 24, radius 8 */
.jl-values-card__card {
	/* Background gradient is applied via inline style from PHP.                    */
	/* Elementor's card_padding selector also targets this element.                 */
	width: 100%;
	border-radius: 8px;
	padding: 32px; /* Figma — Elementor selector overrides this */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px between title and items list */
}

/* ── Card text alignment modifiers ──────────────────────────────────────────── */
.jl-values-card__card--align-center {
	text-align: center;
}

.jl-values-card__card--align-center .jl-values-card__item {
	justify-content: center;
}

.jl-values-card__card--align-right {
	text-align: right;
}

.jl-values-card__card--align-right .jl-values-card__item {
	flex-direction: row-reverse;
}

/* ── Card title ─────────────────────────────────────────────────────────────── */
/* Figma node 2118:30400 — 20px / lh 28px / Montserrat Medium 500 / tracking 2px (0.1em).
 * NOTE: Figma calls for weight 500, but Gotham Office is only loaded at 400/700
 * (see assets/fonts/ — only Regular + Bold + italics ship with the brand license).
 * Falling back to 400 here. To match Figma exactly, acquire GothamOffice-Medium.ttf
 * from the brand owner and register it in functions.php, then change to weight 500.
 */
.jl-values-card__title {
	font-family: 'Gotham Office', sans-serif;
	font-size: 1.25rem; /* 20px */
	font-weight: 400; /* Figma: 500 — see note above */
	line-height: 1.4; /* 28 / 20 */
	letter-spacing: 0.1em; /* 2px */
	text-transform: uppercase;
	color: #ffffff;
	margin: 0;
}

/* ── Items list ─────────────────────────────────────────────────────────────── */
/* Figma: 16px gap between items */
.jl-values-card__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem; /* 16px */
}

/* ── Single item ────────────────────────────────────────────────────────────── */
/* Figma: items-center, gap-16 between icon and text */
.jl-values-card__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem; /* 16px */
}

/* ── Icon ───────────────────────────────────────────────────────────────────── */
/* Figma: 24px tall row containing a 16×16 icon, vertically centered with text */
.jl-values-card__icon {
	flex-shrink: 0;
	width: 1.5rem; /* 24px row */
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}

.jl-values-card__icon i,
.jl-values-card__icon svg {
	font-size: 1rem; /* 16px */
	width: 1rem;
	height: 1rem;
	display: block;
	color: #ffffff;
	fill: currentColor;
}

/* ── Text group ─────────────────────────────────────────────────────────────── */
.jl-values-card__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Figma node 2118:30409 etc. — 14px / lh 20px / Montserrat Medium 500, title case.
 * NOTE: Figma calls for weight 500. Gotham Office is only loaded at 400/700, so
 * we fall back to 400 here. Visual hierarchy still reads correctly because the
 * description below uses #d4d4d4 (lighter gray), demoting it relative to this label.
 * To match Figma exactly, acquire GothamOffice-Medium.ttf from the brand owner.
 */
.jl-values-card__label {
	font-family: 'Gotham Office', sans-serif;
	font-size: 0.875rem; /* 14px */
	font-weight: 400; /* Figma: 500 — see note above */
	line-height: 1.43; /* 20 / 14 */
	letter-spacing: 0;
	color: #ffffff;
}

/* Figma node 2118:30411 etc. — 12px / lh 16px / Montserrat Light 300, #d4d4d4.
 * NOTE: Figma calls for weight 300 (Light). Gotham Office is only loaded at
 * 400/700, so we fall back to 400 here. The #d4d4d4 color provides the visual
 * "lighter than label" demotion that the lighter weight would otherwise provide.
 * To match Figma exactly, acquire GothamOffice-Light.ttf from the brand owner.
 */
.jl-values-card__desc {
	font-family: 'Gotham Office', sans-serif;
	font-size: 0.75rem; /* 12px */
	font-weight: 400; /* Figma: 300 — see note above */
	line-height: 1.33; /* 16 / 12 */
	color: #d4d4d4;
}

/* ── Two-list cols layout ────────────────────────────────────────────────────── */
/*
 * .jl-values-card__cols always wraps both <ul> elements.
 * Default: always stacked. Each --cols-{range} modifier activates
 * side-by-side layout within that specific viewport range only.
 *
 * Ranges (matching SELECT2 options in the widget):
 *   xs  — mobile portrait  < 480px
 *   sm  — mobile landscape  480px – 767px
 *   md  — tablet           768px – 1023px
 *   lg  — tablet landscape 1024px – 1279px
 *   xl  — desktop          ≥ 1280px
 */

.jl-values-card__cols {
	display: flex;
	flex-direction: column;
	gap: 1rem; /* match item gap so stacked lists read as one */
}

.jl-values-card__cols .jl-values-card__items {
	flex: 1;
}

/* xs — mobile portrait (< 480px) */
@media (max-width: 479px) {
	.jl-values-card--cols-xs .jl-values-card__cols {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.5rem;
	}
}

/* sm — mobile landscape (480px – 767px) */
@media (min-width: 480px) and (max-width: 767px) {
	.jl-values-card--cols-sm .jl-values-card__cols {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.5rem;
	}
}

/* md — tablet portrait (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.jl-values-card--cols-md .jl-values-card__cols {
		flex-direction: row;
		align-items: flex-start;
		gap: 2rem;
	}
}

/* lg — tablet landscape (1024px – 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
	.jl-values-card--cols-lg .jl-values-card__cols {
		flex-direction: row;
		align-items: flex-start;
		gap: 2rem;
	}
}

/* xl — desktop (≥ 1280px) */
@media (min-width: 1280px) {
	.jl-values-card--cols-xl .jl-values-card__cols {
		flex-direction: row;
		align-items: flex-start;
		gap: 2rem;
	}
}

/* ── Text panel (opposite zone to the card) ────────────────────────────────── */
/*
 * Rendered only when card_position is left or right and panel_heading/body are set.
 * On mobile the panel stacks above the card regardless of position setting.
 */

/* Figma 2118:30395 — flex column, py-22, gap-22 between heading/divider/body */
.jl-values-card__panel {
	padding-bottom: 2rem; /* spacing when stacked on mobile */
	display: flex;
	flex-direction: column;
	gap: 1.375rem; /* 22px between heading, divider, body */
}

/* Figma 2118:30396 — H3, 48px / lh 48px, Gotham Office Regular, #343333, uppercase */
.jl-values-card__panel-heading {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(2rem, 3.18vw, 3rem); /* 32px → 48px */
	font-weight: 400;
	line-height: 1; /* 48 / 48 */
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--e-global-color-heading, #1a1a1a);
	margin: 0;
}

/* Figma 2118:30397 — 128 × 1px, linear-gradient(black → transparent), left anchored */
.jl-values-card__panel-divider {
	width: 128px;
	height: 1px;
	border: none;
	background: linear-gradient(to right, #000000, rgba(0, 0, 0, 0));
	margin: 0;
}

/* Figma 2118:30398 — Headline Medium: 28px / lh 36px, Gotham Office Regular, #343333 */
.jl-values-card__panel-body,
.jl-values-card__panel-body p {
	font-family: 'Gotham Office', sans-serif;
	font-size: clamp(1.125rem, 1.85vw, 1.75rem); /* 18px → 28px */
	font-weight: 400;
	line-height: 1.286; /* 36 / 28 */
	color: var(--e-global-color-heading, #1a1a1a);
}

.jl-values-card__panel-body p {
	margin: 0 0 1.125rem; /* 18px between paragraphs */
}

.jl-values-card__panel-body p:last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	/* Figma: 40px gap between panel and card, both align-items: start */
	.jl-values-card--has-panel .jl-values-card__inner {
		gap: 2.5rem; /* 40px */
		align-items: flex-start;
	}

	.jl-values-card--has-panel .jl-values-card__panel {
		padding-bottom: 0;
		flex: 1;
		min-width: 0;
	}
}

/* ── Left / right card positioning ─────────────────────────────────────────── */
/*
 * On mobile the card is always full-width regardless of the position setting.
 * Left/right kicks in at tablet (768px) and above.
 */

@media (min-width: 768px) {

	.jl-values-card--left .jl-values-card__inner,
	.jl-values-card--right .jl-values-card__inner {
		display: flex;
		align-items: flex-start;
	}

	/* Card width is driven by --jl-vc-card-width, set by the Elementor slider. */
	.jl-values-card--left .jl-values-card__card,
	.jl-values-card--right .jl-values-card__card {
		width: var(--jl-vc-card-width, 50%);
		flex-shrink: 0;
	}

	/* Right: push card to the end of the flex row. */
	.jl-values-card--right .jl-values-card__inner {
		justify-content: flex-end;
	}
}

/* ── Horizontal padding rhythm ──────────────────────────────────────────────── */
/* Mobile uses 1.5rem (already set in base rule), tablet ramps to Figma's 80px */
@media (min-width: 768px) {
	.jl-values-card {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

@media (min-width: 1280px) {
	.jl-values-card {
		padding-left: 5rem; /* 80px — Figma section padding */
		padding-right: 5rem;
	}
}