/**
 * JP hero white merge — Evoport-style fade to white at section bottom.
 *
 * Usage (Elementor → Advanced → CSS Classes), pick one:
 *   jp-hero-fade          — standard merge (~120px)
 *   jp-hero-fade--short   — shorter (~72px)
 *   jp-hero-fade--tall    — taller (~220px)
 *
 * Also works on: jp-hero-container, .jp-home-hero
 *
 * Tune with CSS vars on the same element:
 *   --jp-hero-fade-h: 140px;
 *   --jp-hero-fade-color: #ffffff;
 */

.jp-hero-fade,
.jp-hero-container,
.jp-home-hero.jp-hero-fade,
.jp-about-window.jp-hero-fade,
.e-con.jp-hero-fade,
.e-con.jp-hero-container {
	--jp-hero-fade-h: clamp(88px, calc(120 * 100vw / 1440), 140px);
	--jp-hero-fade-color: #ffffff;
	position: relative;
	isolation: isolate;
}

.jp-hero-fade--short {
	--jp-hero-fade-h: clamp(56px, calc(72 * 100vw / 1440), 80px);
}

.jp-hero-fade--tall {
	--jp-hero-fade-h: clamp(140px, calc(220 * 100vw / 1440), 240px);
}

/*
 * White merge strip — sits above next section, soft blend.
 * ::after so it works on Elementor containers without fighting BG image.
 */
.jp-hero-fade::after,
.e-con.jp-hero-fade::after,
.e-con.jp-hero-container::after,
.jp-home-hero.jp-hero-fade::after,
.jp-about-window.jp-hero-fade::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: var(--jp-hero-fade-h);
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) 0%,
		color-mix(in srgb, var(--jp-hero-fade-color) 50%, transparent) 32%,
		color-mix(in srgb, var(--jp-hero-fade-color) 78%, transparent) 58%,
		color-mix(in srgb, var(--jp-hero-fade-color) 94%, transparent) 78%,
		var(--jp-hero-fade-color) 100%
	);
}

/* Fallback if color-mix unsupported */
@supports not (background: color-mix(in srgb, white 50%, transparent)) {
	.jp-hero-fade::after,
	.e-con.jp-hero-fade::after,
	.e-con.jp-hero-container::after,
	.jp-home-hero.jp-hero-fade::after,
	.jp-about-window.jp-hero-fade::after {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.45) 30%,
			rgba(255, 255, 255, 0.75) 55%,
			rgba(255, 255, 255, 0.92) 78%,
			#ffffff 100%
		);
	}
}

/* Keep hero/widget content above the fade */
.jp-hero-fade > .e-con-inner,
.jp-hero-fade > .elementor-widget-container,
.jp-hero-fade > .jp-home-hero__stage,
.jp-about-window.jp-hero-fade > .jp-about-window__inner,
.jp-about-window.jp-hero-fade > .jp-about-window__bg,
.e-con.jp-hero-fade > .e-con-inner,
.e-con.jp-hero-container > .e-con-inner {
	position: relative;
	z-index: 4;
}

.jp-about-window.jp-hero-fade > .jp-about-window__bg {
	position: absolute;
	z-index: 0;
}

/* Avoid double fade when parent container + child widget both have it */
.e-con.jp-hero-container:has(.jp-hero-fade)::after,
.e-con.jp-hero-fade:has(.jp-hero-fade)::after {
	display: none;
}

/*
 * Optional: next sibling pulls up into the fade so sections seamless-merge.
 * Add jp-hero-fade--pull on the hero; following section sits under the white.
 */
.jp-hero-fade--pull {
	margin-bottom: calc(-1 * var(--jp-hero-fade-h) * 0.35);
	padding-bottom: calc(var(--jp-hero-fade-h) * 0.35);
	overflow: visible;
}

.jp-hero-fade--pull::after {
	bottom: 0;
}

@media (max-width: 700px) {
	.jp-hero-fade,
	.jp-hero-container,
	.e-con.jp-hero-fade,
	.e-con.jp-hero-container {
		--jp-hero-fade-h: clamp(64px, 18vw, 92px);
	}

	.jp-hero-fade--tall {
		--jp-hero-fade-h: clamp(96px, 26vw, 140px);
	}

	.jp-hero-fade--short {
		--jp-hero-fade-h: clamp(48px, 14vw, 64px);
	}
}