/* ==========================================================================
   JL Hero Widget — pairs with inc/elementor/widget-hero.php
   Colors via --e-global-color-* (Elementor Kit → Site Settings → Global Colors)
   ========================================================================== */

/* Strip any Elementor wrapper spacing so the hero flush-mounts to the top */
.elementor-widget-jl-hero,
.elementor-widget-jl-hero .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0;
}

/* Zero out the Elementor container/section that wraps the hero widget */
.e-con:has(> .elementor-widget-jl-hero),
.e-con:has(> .e-con-inner > .elementor-widget-jl-hero),
.elementor-section:has(.elementor-widget-jl-hero) .elementor-container,
.elementor-section:has(.elementor-widget-jl-hero) .elementor-column,
.elementor-section:has(.elementor-widget-jl-hero) .elementor-widget-wrap {
	--padding-top: 0 !important;
	--padding-bottom: 0 !important;
	--padding-left: 0 !important;
	--padding-right: 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;
}

/* Boxed containers apply padding/gap to .e-con-inner — zero that too */
.e-con:has(> .e-con-inner > .elementor-widget-jl-hero) > .e-con-inner {
	--padding-top: 0 !important;
	--padding-bottom: 0 !important;
	--padding-left: 0 !important;
	--padding-right: 0 !important;
	--padding-block-start: 0 !important;
	--padding-block-end: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
}

/* ── Hero shell ── */

.jl-hero {
	position: relative;
	min-height: var(--jl-hero-min-height, 320px); /* mobile */
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	line-height: normal;
}

.jl-hero__bg {
	position: absolute;
	inset: 0;
	background-image: var(--jl-hero-bg, none);
	background-size: cover;
	background-position: var(--jl-hero-bg-pos, center center);
	background-repeat: no-repeat;
}

.jl-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--jl-hero-overlay, var(--jl-slate-50));
}

/* ── Content positioning ── */

.jl-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding: 7.5rem 1.5rem 2rem; /* mobile: 120px clears header — Figma */
}

/* ── Typography — Mobile (base): 32px heading, 20px sub, centered ── */

.jl-hero__heading {
	font-family: 'Gotham Office', sans-serif;
	font-size: 2rem;        /* 32px — Figma mobile H4 */
	font-weight: 400;
	line-height: 1.25;      /* 40px / 32px — Figma */
	letter-spacing: 0;
	color: var(--e-global-color-white, #ffffff);
	text-transform: uppercase;
	margin: 0 0 0.625rem;
	text-align: center;     /* mobile + tablet: centered */
}

.jl-hero__subheading {
	font-family: 'Gotham Office', sans-serif;
	font-size: 1.25rem;     /* 20px — Figma mobile Headline Small */
	font-weight: 400;
	line-height: 1.8;       /* 36px / 20px — Figma */
	color: #e5e5e5;
	margin: 0;
	max-width: 100%;
	text-align: center;     /* mobile + tablet: centered */
}

/* ── Tablet (768px+): 48px heading, 28px sub, centered ── */

@media (min-width: 768px) {
	.jl-hero {
		min-height: var(--jl-hero-min-height, 500px); /* Figma tablet */
	}

	.jl-hero__content {
		padding: 10rem 2.5rem 3rem;
	}

	.jl-hero__heading {
		font-size: 3rem;    /* 48px — Figma tablet H2 */
		line-height: 1.333; /* 64px / 48px — Figma */
		letter-spacing: 0;
	}

	.jl-hero__subheading {
		font-size: 1.75rem; /* 28px — Figma Headline Medium */
		line-height: 1.286; /* 36px / 28px — Figma */
		max-width: 75%;
	}
}

/* ── Desktop (1280px+): 64px heading, 28px sub, left-aligned ── */

@media (min-width: 1280px) {
	.jl-hero {
		min-height: var(--jl-hero-min-height, 600px); /* Figma desktop */
	}

	.jl-hero__content {
		padding: 10.9375rem 4.75rem 4rem; /* ~175px top — Figma y=177px */
		max-width: 1512px;
	}

	.jl-hero__heading {
		font-size: 4rem;    /* 64px — Figma desktop H1 */
		line-height: 1.5;   /* 96px / 64px — Figma */
		letter-spacing: 2px;
		text-align: var(--jl-hero-align, left);
	}

	.jl-hero__subheading {
		font-size: 1.75rem; /* 28px — Figma Headline Medium */
		line-height: 1.286;
		max-width: 680px;
		text-align: var(--jl-hero-align, left);
	}
}