/*
 * JRS hero block — written from scratch for the acf/jrs-hero block.
 * Rule: one rule per property per breakpoint. No !important, no
 * duplicate selectors. If a value needs to change, edit it here once.
 *
 * Structure on screen:
 *   .jrs2-hero            tall scroll track (gives GSAP room to pin+animate)
 *   .jrs2-hero__stage     viewport-height stage, pinned by GSAP ScrollTrigger
 *   .jrs2-hero__media     background photo, scaled/panned by hero-scroll.js
 *   .jrs2-hero__content   the two copy slides that cross-fade while pinned
 *
 * .jrs2-hero__stage pins with plain CSS position: sticky. Earlier
 * versions tried to hand pinning to GSAP's ScrollTrigger `pin` instead
 * (to work around a hypothesized Safari repaint bug), but that
 * introduced its own timing/offset mismatches -- gaps above/below the
 * hero that varied by device. Sticky positioning is natively supported
 * everywhere with no measurement/timing to get wrong, so hero-scroll.js
 * now only handles the background scale/pan + copy crossfade (plain
 * scroll listener + rAF, no GSAP pin), while sticky alone does the
 * pinning.
 */

.jrs2-hero {
	position: relative;
	height: 240vh;
	min-height: 1100px;
}

.jrs2-hero__stage {
	position: sticky;
	top: 78px;
	height: calc(100vh - 78px);
	min-height: 560px;
	overflow: hidden;
	background: var(--jrs-ivory);
	isolation: isolate;
}

.jrs2-hero__stage:after {
	content: "";
	position: absolute;
	z-index: 5;
	bottom: -1px;
	left: -5%;
	width: 110%;
	height: 76px;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background: var(--jrs-ivory);
	pointer-events: none;
}

.jrs2-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	transform-origin: center center;
	will-change: transform;
}

.jrs2-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.jrs2-hero__media:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 252, 248, .88) 0%, rgba(255, 252, 248, .5) 38%, rgba(255, 252, 248, .08) 72%, rgba(255, 252, 248, .1) 100%);
}

.jrs2-hero>.jrs2-parallax-art {
	z-index: 1;
}

.jrs2-hero__content {
	position: absolute;
	z-index: 3;
	inset: 0;
	width: 100%;
	height: 100%;
}

.jrs2-hero__copy-slide {
	position: absolute;
	top: 50%;
	left: max(6vw, calc((100vw - 1160px) / 2));
	width: min(650px, 48vw);
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

.jrs2-hero__copy-slide:first-child {
	opacity: 1;
}

.jrs2-hero__intro-logo {
	display: block;
	width: clamp(330px, 35vw, 520px);
	max-height: 54vh;
	margin: 0 0 22px;
	object-fit: contain;
	object-position: left center;
}

.jrs2-hero__eyebrow {
	font: 500 18px/1 var(--jrs-script);
	color: var(--jrs-rose);
	letter-spacing: .1em;
}

.jrs2-hero h1 {
	max-width: 10em;
	margin: 10px 0 20px;
	font: 500 clamp(31px, 3.2vw, 49px)/1.5 var(--jrs-serif);
	letter-spacing: .02em;
}

.jrs2-hero h1 em {
	font-style: normal;
	color: var(--jrs-rose);
}

.jrs2-hero__lead {
	max-width: 34em;
	margin: 0;
	font-size: 14px;
	line-height: 2;
}

.jrs2-hero__scroll-cue {
	position: absolute;
	z-index: 7;
	right: max(5vw, calc((100vw - 1160px) / 2));
	bottom: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	color: var(--jrs-ink);
	font: 500 10px/1 "Bodoni Moda", serif;
	letter-spacing: .2em;
}

.jrs2-hero__scroll-cue i {
	display: block;
	width: 1px;
	height: 58px;
	background: linear-gradient(var(--jrs-rose) 0 34%, rgba(48, 42, 41, .25) 34% 100%);
	animation: jrs-hero-scroll-cue 1.8s ease-in-out infinite;
}

@keyframes jrs-hero-scroll-cue {
	0%, 100% { transform: translateY(0); opacity: .6; }
	50% { transform: translateY(10px); opacity: 1; }
}

/* Mobile: overlay card instead of a side-by-side split. */
@media (max-width: 767px) {
	.jrs2-hero {
		height: 200vh;
		min-height: 1300px;
	}

	.jrs2-hero__stage {
		top: 66px;
		height: calc(100svh - 66px);
		min-height: 600px;
	}

	.jrs2-hero__stage:after {
		left: -10%;
		width: 120%;
		height: 42px;
	}

	.jrs2-hero__content {
		z-index: 6;
		top: 12%;
		right: 20px;
		left: 20px;
		height: auto;
		inset: auto 20px auto 20px;
		top: 12%;
	}

	.jrs2-hero__copy-slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transform: none;
	}

	.jrs2-hero__intro-logo {
		width: min(76vw, 360px);
		max-height: 42svh;
		margin-bottom: 17px;
	}

	.jrs2-hero h1 {
		max-width: 9em;
		margin: 7px 0 12px;
		font-size: clamp(26px, 7.5vw, 33px);
		line-height: 1.45;
		text-shadow: 0 1px 14px rgba(255, 253, 251, .76);
	}

	.jrs2-hero__lead {
		max-width: 21em;
		font-size: 13px;
		line-height: 1.85;
		text-shadow: 0 1px 12px rgba(255, 253, 251, .88);
	}

	.jrs2-hero__scroll-cue {
		right: 22px;
		bottom: 45px;
	}

	.jrs2-hero__scroll-cue i {
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jrs2-hero {
		height: auto;
		min-height: 0;
	}

	.jrs2-hero__stage {
		position: relative;
		top: 0;
	}

	.jrs2-hero__copy-slide {
		position: relative;
		top: 0;
		transform: none;
		opacity: 1;
		pointer-events: auto;
	}

	.jrs2-hero__copy-slide--english {
		display: none;
	}
}