/*
 * NEMRA Feature Split — "Start Stage 1 today" 2-col CTA (Figma 278:874).
 * Content (heading + body + primary CTA + secondary link) on the left,
 * stacked-card image / media panel on the right. Background color is
 * controlled by the parent Elementor container (light grey #F4F5F7).
 */

.nemra-feature-split {
	display: grid;
	grid-template-columns: minmax(0, 507px) minmax(0, 748px);
	gap: 80px;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	padding: 60px 60px 0;
	background-color: var(--nemra-surface, #F4F5F7);
	border-radius: 8px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	color: var(--nemra-text, #3f3f3f);
	box-sizing: border-box;
}

.nemra-feature-split *,
.nemra-feature-split *::before,
.nemra-feature-split *::after { box-sizing: border-box; }

/* Open skin (About "One association. Multiple divisions.", 148:15919):
 * no surface card — sits directly on the page ground with the comp's
 * content/796px-image split. Gutters come from the Elementor container. */
.nemra-feature-split--open {
	max-width: 1312px;
	padding: 0;
	background: transparent;
	border-radius: 0;
	grid-template-columns: minmax(0, 1fr) minmax(0, 796px);
	align-items: stretch;
}

.nemra-feature-split--open .nemra-feature-split__content {
	max-width: none;
}

.nemra-feature-split--open .nemra-feature-split__heading {
	font-size: 48px;
	line-height: 1.2;
	letter-spacing: -1.5px;
	color: var(--nemra-dark, #17171a);
}

.nemra-feature-split--open .nemra-feature-split__figure {
	border-radius: 8px;
	overflow: hidden;
	min-height: 577px;
}

.nemra-feature-split--open .nemra-feature-split__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nemra-feature-split__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 507px;
}

.nemra-feature-split__heading {
	margin: 0;
	font-size: 38px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--nemra-text, #3f3f3f);
}

.nemra-feature-split__body {
	margin: 0;
	max-width: 507px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--nemra-muted, #6b6b6b);
}

.nemra-feature-split__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	margin-top: 10px;
}

.nemra-feature-split__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 25px;
	background-color: #6b6b6b;
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	border-radius: 5px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.nemra-feature-split__cta:hover,
.nemra-feature-split__cta:focus {
	background-color: var(--neutral-dark-88, rgba(23, 23, 26, 0.88));
	color: #ffffff;
}

.nemra-feature-split__secondary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #6b6b6b;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.nemra-feature-split__secondary:hover,
.nemra-feature-split__secondary:focus {
	color: var(--nemra-green, #4c7f39);
}

/* Stacked-card media panel.
 * Figma layers (within a 748×565 frame):
 *   back  — #acacac, 650×547, offset right 36px, top 0
 *   front — #d9d9d9, 717×547, offset left 0, top 18px
 * We reproduce the offset proportionally with absolute positioning. */
.nemra-feature-split__media {
	position: relative;
	width: 100%;
	max-width: 748px;
	height: 360px;
	margin-left: auto;
	overflow: hidden;
}

.nemra-feature-split__media-back,
.nemra-feature-split__media-front {
	position: absolute;
	border-radius: 5px;
}

.nemra-feature-split__media-back {
	background-color: #acacac;
	top: 0;
	right: 31px;            /* Figma: 748 - (36 + 650) = 62; we crop tighter here */
	left: 36px;
	bottom: 18px;
}

.nemra-feature-split__media-front {
	background-color: #d9d9d9;
	background-size: cover;
	background-position: center;
	left: 0;
	top: 18px;
	right: 31px;
	bottom: 0;
}

@media ( max-width: 991px ) {
	.nemra-feature-split {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 0;
	}
	.nemra-feature-split__heading { font-size: 30px; }
	.nemra-feature-split__content { max-width: none; }
	.nemra-feature-split__body { max-width: none; }
	.nemra-feature-split__media { min-height: 280px; }
}

/* ============================================================
 * V2 "Feature list" layout — Figma 571:21289
 * "Unlock Exclusive Member Benefits".
 * Left: eyebrow + serif heading + button + accordion list.
 * Right: large photo. Light background, full-bleed columns.
 * ============================================================ */
.nemra-feature-split--feature {
	/* The copy column needs a floor. With `minmax(0, 1fr)` the photo held its
	   full 796px at every width and the text took whatever was left over —
	   436px at 1440, but 96px by 1100 and literally 0 by 992, which read as a
	   sliver of squeezed words beside a full-size photo. Giving the copy a
	   360px minimum makes the PHOTO absorb the shortfall instead, which is
	   what it has room to do. */
	grid-template-columns: minmax(360px, 1fr) minmax(0, 796px);
	gap: 80px;
	align-items: stretch;
	max-width: 1440px;
	padding: 120px 64px 0;
	background-color: transparent;
	border-radius: 0;
	color: var(--nemra-dark, #17171a);
}

.nemra-feature-split--feature .nemra-feature-split__content {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: none;
}

.nemra-feature-split__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

/* Eyebrow — top divider + blue dot + small uppercase label. */
.nemra-feature-split__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid rgba( 23, 23, 26, 0.16 );
}

.nemra-feature-split__eyebrow-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--nemra-blue, #2173b3);
}

.nemra-feature-split__eyebrow-text {
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba( 23, 23, 26, 0.64 );
}

.nemra-feature-split--feature .nemra-feature-split__heading {
	margin: 0;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -1.5px;
	color: var(--nemra-dark, #17171a);
}

/* Button — solid blue pill. */
.nemra-feature-split__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	background-color: var(--nemra-blue, #2173b3);
	border: 1px solid rgba( 252, 253, 253, 0.08 );
	border-radius: 5px;
	color: var(--nemra-light, #fcfdfd);
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.nemra-feature-split__button:hover,
.nemra-feature-split__button:focus {
	background-color: var(--neutral-dark-88, rgba(23, 23, 26, 0.88));
	color: var(--nemra-light, #fcfdfd);
}

.nemra-feature-split__button-icon { font-size: 16px; line-height: 1; }

/* Accordion-style feature list. */
.nemra-feature-split__details {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	border-bottom: 1px solid rgba( 23, 23, 26, 0.16 );
}

.nemra-feature-split__detail {
	padding: 15px 0;
	border-top: 1px solid rgba( 23, 23, 26, 0.16 );
}

/* Figma 571:21289 reserves fixed heights for the feature-detail rows so the
 * accordion keeps a steady vertical rhythm: the expanded (active) row is 150px
 * tall, collapsed rows are 70px. Content is top-aligned within the row.
 * Scoped to the V2 feature variant so the legacy CTA layout is untouched. */
.nemra-feature-split--feature .nemra-feature-split__detail {
	min-height: 70px;
	/* The reserved row height must move WITH the 0fr->1fr body animation below —
	 * left untransitioned, the 70<->150 swap lands a frame after the click and
	 * the whole list jumps before the text has started closing. */
	transition: min-height 350ms cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

.nemra-feature-split--feature .nemra-feature-split__detail.is-active {
	min-height: 150px;
}

.nemra-feature-split__detail-title {
	display: block;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	color: rgba( 23, 23, 26, 0.64 );
	cursor: pointer;
}

.nemra-feature-split__detail.is-active .nemra-feature-split__detail-title,
.nemra-feature-split__detail:not(.is-active):hover .nemra-feature-split__detail-title,
.nemra-feature-split__detail-title:focus-visible {
	color: var(--nemra-dark, #17171a);
}

/* The body used to be a hard display:none -> block flip, which snapped open.
 * A 0fr -> 1fr grid row animates to the content's real height without needing
 * a guessed max-height, and collapses cleanly when another section opens.
 * Spacing lives as padding INSIDE the clipped child so it collapses too — a
 * margin would sit outside the row and leave a gap when closed. */
.nemra-feature-split__detail-reveal {
	display: grid;
	grid-template-rows: 0fr;
	/* The gap lives on THIS element, not the clipped child: padding on the grid
	 * item counts toward the row's min-content, so a closed row measured 22px
	 * instead of 0 and left a visible gap. Transitioned alongside the row so the
	 * spacing opens and closes with it. */
	padding-top: 0;
	opacity: 0;
	transition:
		grid-template-rows 350ms cubic-bezier( 0.2, 0.7, 0.3, 1 ),
		padding-top 350ms cubic-bezier( 0.2, 0.7, 0.3, 1 ),
		opacity 250ms ease;
}

.nemra-feature-split__detail.is-active .nemra-feature-split__detail-reveal {
	grid-template-rows: 1fr;
	padding-top: 8px;
	opacity: 1;
}

.nemra-feature-split__detail-body {
	min-height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba( 23, 23, 26, 0.88 );
}

/* Figma places the active body 58px from the row top (title-top 15px + ~22px
 * gap). Match that gap on the V2 feature variant only. */
.nemra-feature-split--feature .nemra-feature-split__detail.is-active .nemra-feature-split__detail-reveal {
	padding-top: 22px;
}

/* Photo crossfade when switching sections: the OUTGOING photo is cloned on
 * top of the figure and fades out over the incoming one, so the two pictures
 * blend directly — the old fade-to-background flashed a blank eversand frame
 * between them. Positioned explicitly because the clone must cover the figure
 * even under the --open skin, whose base img rule is static. */
.nemra-feature-split__img--ghost {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
	opacity: 1;
	transition: opacity 400ms ease;
}

.nemra-feature-split__img--ghost.is-fading {
	opacity: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.nemra-feature-split__detail-reveal,
	.nemra-feature-split--feature .nemra-feature-split__detail,
	.nemra-feature-split__img--ghost {
		transition: none;
	}
}

/* Right-hand photo. */
.nemra-feature-split__figure {
	position: relative;
	width: 100%;
	min-height: 565px;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--nemra-eversand, #e6e8dd);
	background-size: cover;
	background-position: center;
}

/* `.elementor` prefix: see the cover-image note in assets/css/nemra-blocks.css.
 * (The --open variant above is already two classes, so it was never hit.) */
.elementor .nemra-feature-split__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Between the 1440 frame and the stacking point the copy column sits at its
 * 360px floor, where the 48px display heading towers over the rest of the
 * column. Step it down (and tighten the gutter) so the block still reads as
 * a pair of columns rather than a headline with a photo next to it. */
@media ( min-width: 992px ) and ( max-width: 1279px ) {
	.nemra-feature-split--feature {
		gap: 48px;
	}

	.nemra-feature-split--feature .nemra-feature-split__heading {
		font-size: 38px;
		letter-spacing: -1px;
	}
}

@media ( max-width: 991px ) {
	.nemra-feature-split--feature {
		grid-template-columns: 1fr;
		gap: 40px;
		/* Side padding for the whole stacked block, photo included. */
		/* Vertical space comes from the section container (Figma Spacing/80);
		 * this rule keeps only the horizontal inset. */
		padding: 0 30px;
	}
	/* The photo keeps the column's gutters between the stacking point and the
	   phone breakpoint. It used to pull itself full-bleed with a -30px inline
	   margin, but `width: 100%` meant that only SHIFTED it: at 800px it sat
	   flush against the left edge with a 60px gap on the right. Full-bleed is
	   a phone treatment; at tablet widths it just read as broken. */
	/* Mobile comp 797:21445 binds the heading to Heading/H2 — 36 in the
	   mobile mode, not a midpoint — and the button to UI/Button-1 (12). */
	.nemra-feature-split--feature .nemra-feature-split__heading { font-size: var(--nemra-t-h2-size, 36px); }
	.nemra-feature-split__button { font-size: var(--nemra-t-btn-size, 12px); }
	.nemra-feature-split__figure { min-height: 320px; }
}

/* Mobile comp (797:21445): the column order is eyebrow → heading → photo →
 * accordion → button (button last). Flatten the nested content/header with
 * display:contents so all leaves become flex items of the section, then
 * order them. Desktop (≥992px) keeps its 2-column grid untouched.
 * Every leaf — photo included — sits on the Elementor container's 24px
 * mobile gutter; an extra 24px margin-inline on the text leaves used to
 * double that inset and knock them out of line with the photo.
 * Rhythm: 16px base gap (hairline→eyebrow→heading), and the photo, accordion
 * and button each add a 16px margin for the comp's 32px block spacing. */
@media ( max-width: 600px ) {
	.nemra-feature-split--feature {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 0;
	}
	.nemra-feature-split--feature .nemra-feature-split__content,
	.nemra-feature-split--feature .nemra-feature-split__header {
		display: contents;
	}
	.nemra-feature-split--feature .nemra-feature-split__eyebrow { order: 1; padding-top: 16px; }
	.nemra-feature-split--feature .nemra-feature-split__heading { order: 2; margin: 0; }
	.nemra-feature-split--feature .nemra-feature-split__figure  { order: 3; min-height: 280px; margin: 16px 0 0; }
	.nemra-feature-split--feature .nemra-feature-split__details { order: 4; margin: 16px 0 0; }
	.nemra-feature-split--feature .nemra-feature-split__button  { order: 5; align-self: flex-start; margin-top: 16px; }
}