/* "Elata: Pump Features Scroll" — ALL CSS for this block lives here.
   Ported from ShopifyTheme/sections/elata-pump-features-scroll.liquid.

   Every attribute-driven value arrives as a CSS custom property set inline on
   the block wrapper's style="" attribute (see render.php) and is read below
   via var( --prop, <real default> ). Selectors target the STATIC
   .elata-pump-features-scroll class, never the per-instance wp_unique_id
   class — render.php must never emit a raw style element, because some
   WordPress/security-plugin content filters strip those tags and leave
   the raw CSS text visible on the page as body copy (confirmed bug on the
   live install). Inline style="" attributes are never stripped.

   view.js contract — do not rename any of these without updating view.js:
   .epfs[data-block-id] (root), .epfs__item(.active), .epfs__frame(.active),
   [data-epfs-list-scroll], [data-epfs-list], [data-epfs-media],
   [data-epfs-sequence]. The 900px breakpoint below is paired with view.js's
   `window.innerWidth <= 900` mobile test — change both together or the
   scroll maths and the layout will disagree. */

.elata-pump-features-scroll {
	position: relative;
	min-height: var( --epfs-scroll-vh, 640vh );
	background-color: var( --epfs-bg, #2b2b2b );
	font-family: var( --elata-font );
}

.elata-pump-features-scroll * {
	box-sizing: border-box;
}

.elata-pump-features-scroll .epfs__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	max-width: var( --epfs-max-width, 1600px );
	margin: 0 auto;
	/* The live .elata-container is `padding: 0 40px` with a 1px white border.
	   The section's padding_top/padding_bottom settings (80px each) are NOT
	   applied to it — an earlier rule in the Liquid sets `padding: 60px` but is
	   overridden further down. Applying them here stole 160px of height from a
	   fixed 100vh box, which is what squeezed the image sequence to 540px and
	   cropped the pump. */
	padding: 0 40px;
	border: 1px solid rgba( 255, 255, 255, 1 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
}

/* 1. Header zone — static at the top of the sticky viewport. */
/* 40px of top padding separates the header row from the sticky container's
   own 1px top border. Without it the copy sat hard against that line — live's
   .header-section is 142px tall to our 102px, and the whole difference is this
   padding. */
.elata-pump-features-scroll .epfs__header {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: var( --epfs-title-col-width, 120px ) 1fr;
	gap: var( --epfs-header-gap, 40px );
	padding-top: 40px;
	margin-bottom: 30px;
	align-items: start;
}

.elata-pump-features-scroll .epfs__header-title {
	font-size: var( --epfs-title-size, 20px );
	font-weight: 700;
	line-height: var( --epfs-line-height, 1.7 );
	color: var( --elata-text-primary );
	margin: 0;
}

.elata-pump-features-scroll .epfs__header-columns {
	display: grid;
	grid-template-columns: repeat( var( --epfs-header-col-count, 3 ), 1fr );
	gap: var( --epfs-header-gap, 40px );
}

.elata-pump-features-scroll .epfs__header-column-text {
	font-size: var( --epfs-body-size, 20px );
	font-weight: 400;
	line-height: var( --epfs-line-height, 1.7 );
	color: var( --elata-text-primary );
	margin: 0;
	white-space: pre-line;
}

/* 2. Interaction stage — fills the remaining sticky height, split left/right. */
.elata-pump-features-scroll .epfs__stage {
	flex: 1 1 auto;
	display: flex;
	gap: 40px;
	overflow: hidden;
	position: relative;
}

.elata-pump-features-scroll .epfs__text-col {
	width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

/* Scrolling mask container — clips the parallax-translated feature list.
   This element must NOT be transformed (view.js translates .epfs__list inside
   it); a mask that moves with its own contents clips nothing. */
.elata-pump-features-scroll .epfs__list-scroll {
	flex: 1;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Spacing mirrors the original section's .feature-list-container:
   - 35vh gap keeps exactly one feature near the focal point at a time, which
     is what makes the "one at a time" reveal read correctly. A fixed 30px gap
     put several items on screen at once and made the section look cluttered.
   - padding-bottom clears the static "Why it matters" anchor below, giving the
     LAST feature room to travel up to the focal point instead of being cut off
     against the bottom of the mask.
   - padding-top starts the list below the fold so features scroll up into view
     (the original's .parallax-text-wrapper padding-top). */
.elata-pump-features-scroll .epfs__list {
	display: flex;
	flex-direction: column;
	gap: 35vh;
	margin-top: 50px;
	padding-top: 20vh;
	padding-bottom: 400px;
	will-change: transform;
}

.elata-pump-features-scroll .epfs__item {
	padding-left: 20px;
	border-left: 2px solid rgba( 255, 255, 255, 0.1 );
	/* Fully hidden when inactive, as in the original — at 0.35 every inactive
	   feature stayed legible and the column read as a stack of overlapping
	   paragraphs rather than one focused item. */
	opacity: 0;
	transform: translateY( 20px );
	filter: blur( 2px );
	transition: all 0.5s ease-out;
	cursor: pointer;
}

.elata-pump-features-scroll .epfs__item.active {
	opacity: 1;
	transform: translateY( 0 );
	filter: blur( 0 );
	border-left-color: var( --elata-orange );
}

.elata-pump-features-scroll .epfs__item-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 10px;
}

.elata-pump-features-scroll .epfs__item-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
	filter: brightness( 0 ) invert( 1 );
	flex-shrink: 0;
}

/* 24px / 16px are the original section's hardcoded feature-item sizes. These
   are deliberately NOT bound to --epfs-title-size / --epfs-body-size: those
   settings size the header columns and the "Why it matters" list, and on the
   homepage both are 20px, which flattened the title and body of each feature
   to the same size and lost the visual hierarchy the original has. */
.elata-pump-features-scroll .epfs__item-title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --elata-text-primary );
	margin: 0;
	transition: color 0.3s ease;
}

.elata-pump-features-scroll .epfs__item.active .epfs__item-title {
	color: var( --elata-orange );
}

.elata-pump-features-scroll .epfs__item-desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.8 );
	margin: 0;
}

/* "Why it matters" — static bottom anchor inside the text column. */
.elata-pump-features-scroll .epfs__why-matters {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: var( --epfs-title-col-width, 120px ) 1fr;
	gap: var( --epfs-header-gap, 40px );
	align-items: start;
	/* No divider rule above this on the live site — .why-matters-section is
	   `padding-top: 60px; margin-top: 0; margin-bottom: 40px` with no border.
	   The hairline here was invented. */
	padding-top: 60px;
	margin-top: 0;
	margin-bottom: 40px;
	background-color: var( --epfs-bg, #2b2b2b );
	position: relative;
	z-index: 50;
}

.elata-pump-features-scroll .epfs__why-matters-title {
	font-size: var( --epfs-title-size, 20px );
	font-weight: 700;
	line-height: var( --epfs-line-height, 1.7 );
	color: var( --elata-text-primary );
	margin: 0;
}

.elata-pump-features-scroll .epfs__why-matters-list {
	list-style: disc;
	padding-left: 20px;
	margin: 0;
	columns: 1;
}

.elata-pump-features-scroll .epfs__why-matters-list li {
	font-size: var( --epfs-body-size, 20px );
	font-weight: 400;
	line-height: var( --epfs-line-height, 1.7 );
	color: var( --elata-text-primary );
	margin-bottom: 2px;
}

/* Stage: right column (media). */
.elata-pump-features-scroll .epfs__media-col {
	width: 55%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.elata-pump-features-scroll .epfs__sequence {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: var( --epfs-image-max-height, 1000px );
}

.elata-pump-features-scroll .epfs__frame {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	pointer-events: none;
}

.elata-pump-features-scroll .epfs__frame.active {
	visibility: visible;
}

.elata-pump-features-scroll .epfs__frame img {
	display: block;
}

/* Fill the stage and let object-fit letterbox, exactly as live does. Sizing
   these to their intrinsic dimensions (width/height auto, capped only by
   --epfs-image-max-height) meant the art stayed ~593px tall no matter how
   short the stage got: on a 700px-high window the stage is 526px and the pump
   ran 67px off the bottom of the section. --epfs-image-max-height is kept as
   the ceiling so a very tall stage cannot blow the art up past its useful
   resolution. */
.elata-pump-features-scroll .epfs__frame img,
.elata-pump-features-scroll .epfs__media-col > img,
.elata-pump-features-scroll .epfs__media-col video {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: var( --epfs-image-max-height, 1000px );
	object-fit: contain;
}

.elata-pump-features-scroll .epfs__placeholder {
	width: 100%;
	max-width: 480px;
	height: 320px;
	background: var( --elata-bg-light );
	color: var( --elata-text-muted );
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	font-size: 13px;
	border-radius: 6px;
}

/* Shared typography normalisation (was font-style/text-align in the original
   Liquid's per-element rules). */
.elata-pump-features-scroll .epfs__item-title,
.elata-pump-features-scroll .epfs__item-desc,
.elata-pump-features-scroll .epfs__header-title,
.elata-pump-features-scroll .epfs__header-column-text,
.elata-pump-features-scroll .epfs__why-matters-title,
.elata-pump-features-scroll .epfs__why-matters-list li {
	font-style: normal;
	text-align: left;
}

/* --------------------------------------------------------------------
   MOBILE / TABLET — must stay in sync with view.js's innerWidth <= 900.
   -------------------------------------------------------------------- */
@media ( max-width: 900px ) {
	.elata-pump-features-scroll {
		min-height: 0;
	}

	.elata-pump-features-scroll .epfs__sticky {
		position: relative;
		top: auto;
		height: auto;
		/* Must be visible, not the desktop `hidden`: an overflow-clipping
		   ancestor silently cancels position: sticky on .epfs__media-col below,
		   which is what stopped the pump art pinning to the top of the screen on
		   mobile. The original section flags the same thing ("Critical for
		   sticky to work"). */
		overflow: visible;
		/* 20px all round, and NO border. The live .elata-container drops the
		   white frame at this breakpoint (it sets border: none !important,
		   commented "Ensure no white border") and uses a flat 20px padding
		   rather than the section's padding_top / padding_bottom. */
		padding: 20px;
		border: none;
	}

	/* Mobile running order, matching the live section: the image sequence and
	   feature list first, then the header, then "Why it matters". The original
	   achieves this by reparenting nodes in JS; view.js reproduces the same
	   result (see moveWhyMattersForViewport there) and these order values do
	   the rest. */
	.elata-pump-features-scroll .epfs__stage {
		order: 1;
	}

	.elata-pump-features-scroll .epfs__header {
		order: 2;
	}

	.elata-pump-features-scroll .epfs__sticky > .epfs__why-matters {
		order: 3;
		padding-top: 30px;
		margin-bottom: 0;
	}

	/* Header geometry measured off the live section at 390px: the title stays
	   in a narrow left column (112px) with the copy beside it (223px), and the
	   three copy blocks stack with a 10px gap — not the 40px desktop gap, which
	   is what spread this section over most of a phone screen. */
	.elata-pump-features-scroll .epfs__header {
		grid-template-columns: 112px 1fr;
		gap: 15px;
	}

	.elata-pump-features-scroll .epfs__header-columns {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		gap: 10px;
	}

	/* MOBILE LAYOUT — sticky image on top, feature copy scrolling beneath it.
	   ----------------------------------------------------------------------
	   This mirrors the original section's own mobile rules (its
	   `.stage-image-column` under @media (max-width: 990px)): the pump art pins
	   to the top of the viewport at 50vh tall and the features scroll past
	   underneath, so each feature is read against the frame it belongs to.

	   `overflow: visible` on every ancestor is load-bearing — position: sticky
	   is silently cancelled by an `overflow: hidden` ancestor, and both
	   .epfs__stage and .epfs__text-col set that for the desktop mask. The
	   original carries the same note ("Critical for sticky to work").

	   The 50vh height also fixes the collapse this block used to suffer on
	   mobile: .epfs__sequence is `height: 100%`, and with .epfs__sticky at
	   `height: auto` that percentage had nothing to resolve against. Because
	   every .epfs__frame is absolutely positioned, the sequence had no in-flow
	   child to take height from and flattened to 0px, letting the frame image
	   render on top of the feature copy. A definite height on the column gives
	   the percentage something real to resolve against. */
	.elata-pump-features-scroll .epfs__stage {
		flex-direction: column;
		overflow: visible;
		position: relative;
	}

	.elata-pump-features-scroll .epfs__text-col {
		width: 100%;
		height: auto;
		min-height: auto;
		overflow: visible;
		position: relative;
		z-index: 10;
	}

	.elata-pump-features-scroll .epfs__list-scroll {
		overflow: visible;
		justify-content: flex-start;
	}

	.elata-pump-features-scroll .epfs__media-col {
		order: -1;
		/* Full-bleed: cancel the 20px padding .epfs__sticky adds on mobile. */
		width: calc( 100% + 40px );
		margin: 0 -20px 40px;
		height: 50vh;
		position: sticky;
		top: 60px;
		z-index: 50;
		/* Opaque, so the feature copy disappears behind the art rather than
		   showing through it as it scrolls under. */
		background-color: var( --epfs-bg, #2b2b2b );
	}

	/* Soft fade where the scrolling copy passes under the pinned image. */
	.elata-pump-features-scroll .epfs__media-col::after {
		content: '';
		position: absolute;
		bottom: -60px;
		left: 0;
		width: 100%;
		height: 60px;
		background: linear-gradient( to bottom, var( --epfs-bg, #2b2b2b ), transparent );
		pointer-events: none;
		z-index: 51;
	}

	.elata-pump-features-scroll .epfs__sequence {
		width: 100%;
		height: 100%;
		max-height: none;
	}

	.elata-pump-features-scroll .epfs__frame img {
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 100%;
		object-fit: contain;
		margin: 0 auto;
	}

	/* Native flow on mobile: every feature is legible, no blur/offset. The
	   desktop scroll-scrub spacing is reset here too, mirroring the original's
	   mobile .feature-list-container overrides — 35vh gaps and the 400px
	   footer clearance only make sense while the list is being scrubbed. */
	.elata-pump-features-scroll .epfs__list {
		gap: 12vh;
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 60px;
	}

	.elata-pump-features-scroll .epfs__item {
		opacity: 1;
		filter: none;
		transform: none;
	}

	.elata-pump-features-scroll .epfs__header-title,
	.elata-pump-features-scroll .epfs__why-matters-title,
	.elata-pump-features-scroll .epfs__item-title {
		font-size: var( --epfs-mobile-title-size, 14px );
		font-weight: bold;
		line-height: 1.3;
	}

	.elata-pump-features-scroll .epfs__why-matters-list li,
	.elata-pump-features-scroll .epfs__item-desc {
		font-size: var( --epfs-mobile-body-size, 14px );
		font-weight: normal;
		line-height: 1.5;
	}

	/* 12px/18px on the live section — the header copy is a size smaller than
	   the rest of the mobile body text. */
	.elata-pump-features-scroll .epfs__header-column-text {
		font-size: 12px;
		font-weight: normal;
		line-height: 18px;
	}

	.elata-pump-features-scroll .epfs__why-matters {
		grid-template-columns: 1fr;
	}
}