/**
 * NovaBP Tax Planning — The Core Benefits of Strategic Tax Planning
 *
 * Section 2 of the Tax Planning page: a centred header over a two-column body.
 * The left column carries a pill tab switcher above the selected tab's heading
 * and its list of points; the right column carries that tab's photo, framed by
 * a gradient hairline.
 *
 * Above the tablet tier the pill track and the photo pin under the site header
 * while the points scroll past them, then travel on with the section once its
 * last point clears. Both are plain `position: sticky` bound by their own grid
 * column, so nothing measures where the section ends; the only JS involved
 * reports the header's height and whether the bar has reached it.
 *
 * Depends on `novabp-tax-base` for tokens, the section shell and the eyebrow /
 * heading / lede primitives.
 *
 * Figma reference: node 2318:87087 (tab 1 selected) and node 2318:85825 (tab 2
 * selected) — pill group 2318:87669, point list 2318:87678, photo 2318:87695,
 * watermark 2318:87088
 */

.nova-plan-benefits {
	/*
	 * What the pinned tabs and photo park under.
	 *
	 * The site header's white bar turns `position: fixed` partway down the page
	 * (novabp-header.js flips `is-stuck` on it), so nothing in flow reserves its
	 * height and CSS here has to restate it: 88px is the bar at its designed
	 * size — a 48px logo inside 20px of padding, the same floor
	 * novabp-post-content.css parks its sidebar at.
	 *
	 * `--sticky-top` is the header's underside. The 24px breathing gap below it
	 * is added by the tabs bar's own padding rather than folded in here, so the
	 * bar's white backdrop reaches all the way up to the header and the points
	 * cannot be seen sliding through the gap.
	 *
	 * No allowance for WordPress's admin bar: the header pins itself at `top: 0`
	 * and lets the bar overlap it, so its underside is at its own height from the
	 * top of the viewport for logged-in and logged-out visitors alike.
	 */
	--nova-plan-benefits-header-h: 88px;
	--nova-plan-benefits-sticky-gap: 24px;
	--nova-plan-benefits-sticky-top: var(--nova-plan-benefits-header-h);

	background-color: var(--nova-tax-white);

	/*
	 * `overflow: clip` clips horizontal bleed without creating a scroll context,
	 * allowing `position: sticky` on the media column to work during page scroll.
	 */
	overflow: clip;
}

/*
 * The halftone wash Figma calls "Union", placed at x -16 / y -17 of the section
 * frame. It carries its own 20% opacity inside the SVG, so it is painted at
 * full strength here. Pure texture: `aria-hidden` in the markup, inert to the
 * pointer, and behind everything.
 */
.nova-plan-benefits__watermark {
	position: absolute;
	inset-block-start: -17px;
	inset-inline-start: -16px;
	z-index: 0;
	width: 653px;
	height: 502px;
	background-image: var(--nova-plan-benefits-watermark, none);
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.nova-plan-benefits__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-plan-benefits-gap, 80px);
}

.nova-plan-benefits__header {
	--nova-tax-header-max: 800px;
}

/* ---------------------------------------------------------------------------
 * Body — tabs and heading/points in column one, the photo in column two
 *
 * Both columns are one grid row rather than two, so each is a sticky item's
 * containing block for the full height of the body: the tabs pin inside the
 * text column, the photo inside its own, and both are released the moment the
 * body's last point scrolls past. That bound is what keeps this
 * `position: sticky` rather than a JS-driven `position: fixed` — nothing has to
 * know where the section ends, the grid area already says it.
 * ------------------------------------------------------------------------ */

/*
 * The photo column is 560 of the 1280 measure, which is also 44% of it. Writing
 * it as `min()` of the two keeps Figma's exact width at 1440 while letting the
 * column shrink in proportion from there down, instead of eating the whole
 * gutter out of the text column the way a flat 560px would at 1100.
 */
.nova-plan-benefits__body {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		min(var(--nova-plan-benefits-media-width, 560px), 44%);
	column-gap: var(--nova-plan-benefits-body-gap, 80px);
	row-gap: 40px;
	align-items: start;
	width: 100%;
}

/*
 * The text column. Its floor is the photo's height, which is what centres the
 * three-point tab against the photo instead of leaving it hanging under the
 * pills — the job the body's second grid track used to do before the columns
 * were collapsed into one row.
 */
.nova-plan-benefits__col {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	min-height: var(--nova-plan-benefits-body-min, 656px);
}

/*
 * The pinned pill track. It is a wrapper rather than the track itself because
 * the track is only as wide as its two pills: the points would scroll past in
 * the space beside them, and the backdrop below needs the whole column.
 */
.nova-plan-benefits__tabs-bar {
	position: sticky;
	inset-block-start: var(--nova-plan-benefits-sticky-top, 88px);
	z-index: 2;
	display: flex;
	padding-block: var(--nova-plan-benefits-sticky-gap, 24px) 0;
	margin-block-start: calc(-1 * var(--nova-plan-benefits-sticky-gap, 24px));
}

/*
 * The white plate that hides the points travelling under the pills, painted by
 * a pseudo-element so it costs the layout nothing: padding on the bar itself
 * would push the pills out of line with the top of the photo beside them.
 *
 * It is drawn only while the bar is pinned — `is-stuck` comes from
 * novabp-plan-benefits.js — because at rest the plate would sit over the
 * halftone wash in the section's top-left corner and punch a white hole in it.
 * `z-index: -1` keeps it behind the pills but still inside the bar's own
 * stacking context, so it stays above the points regardless.
 */
.nova-plan-benefits__tabs-bar.is-stuck::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: -40px -20px;
	inset-inline: 0;
	background-color: var(--nova-tax-white);
}

.nova-plan-benefits__panels {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.nova-plan-benefits__media {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	opacity: 1;

	/*
	 * The photo pins level with the pills — the header's underside plus the same
	 * gap the tabs bar opens above itself — and, being start-aligned in a row as
	 * tall as the text column, travels until the body ends.
	 */
	position: sticky;
	inset-block-start: calc(
		var(--nova-plan-benefits-sticky-top, 88px) + var(--nova-plan-benefits-sticky-gap, 24px)
	);
	align-self: start;
}

/* ---------------------------------------------------------------------------
 * Tab switcher
 * ------------------------------------------------------------------------ */

.nova-plan-benefits__tabs {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	border: 1px solid var(--nova-plan-benefits-tabs-border, var(--nova-tax-border));
	border-radius: 100px;
	background-color: var(--nova-plan-benefits-tabs-bg, var(--nova-tax-surface));
}

/*
 * Restated font properties for the same reason the base sheet restates them on
 * headings: the Elementor global kit styles bare `button`, and a lone class
 * loses to it.
 */
.nova-plan-benefits .nova-plan-benefits__tab {
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	gap: 8px;
	min-width: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 100px;
	background-color: transparent;
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-plan-benefits-tab-color, var(--nova-tax-heading));
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.nova-plan-benefits .nova-plan-benefits__tab.is-active {
	background-color: var(--nova-plan-benefits-tab-active-bg, var(--nova-tax-white));
}

/* Figma draws no hover state; this is the lightest hint that the pill is live. */
.nova-plan-benefits .nova-plan-benefits__tab:not(.is-active):hover {
	background-color: rgb(255 255 255 / 0.6);
}

.nova-plan-benefits .nova-plan-benefits__tab:focus-visible {
	outline: 2px solid var(--nova-tax-green);
	outline-offset: 2px;
}

.nova-plan-benefits__tab .nova-tax-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.nova-plan-benefits__tab-label {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Panels
 * ------------------------------------------------------------------------ */

/*
 * Figma centres the tab's content in the 656px row rather than top-aligning it,
 * which is what keeps the shorter tab from leaving a hole under the pills.
 */
.nova-plan-benefits__panel {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
}

/* `hidden` is a display:none the flex rule above would otherwise beat. */
.nova-plan-benefits__panel[hidden] {
	display: none;
}

.nova-plan-benefits .nova-plan-benefits__panel-title {
	font-family: var(--nova-tax-font);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-heading);
}

/* ---------------------------------------------------------------------------
 * Points
 * ------------------------------------------------------------------------ */

.nova-plan-benefits__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Above the tablet tier the list is its own scroller: nine points do not fit
 * the 656px row, and letting the row grow instead would stretch the photo far
 * past anything the design draws. Below it the list is stacked above the photo
 * and scrolls with the page — a scroll area inside a scroll area is a trap on a
 * touch screen, and the rail driver in the JS follows the same split.
 *
 * A list shorter than the cap never scrolls, so tab 1's three points are
 * untouched by any of this.
 */
@media (min-width: 1025px) {
	.nova-plan-benefits__list {
		max-height: none;
		overflow-y: visible;
		padding-inline-end: 0;
	}
}

/*
 * The list has no gap of its own: the 40px between points is padding under each
 * point's text, so the rules — which stretch the full height of their row —
 * meet edge to edge and read as one continuous line down the column. A gap here
 * would break it into dashes.
 */
.nova-plan-benefits__item {
	display: flex;
	align-items: stretch;
	gap: 24px;
	opacity: var(--nova-plan-benefits-item-dim, 0.6);
	transition: opacity 0.3s ease;
}

/*
 * Exactly one point is being read at a time, and `is-active` is the only thing
 * that says which — the markup puts it on the first point and
 * novabp-plan-benefits.js moves it to whichever point crosses the middle of the
 * scroller, the same mechanism `.nova-tax-process__step` uses against the
 * viewport.
 */
.nova-plan-benefits__item.is-active,
.nova-plan-benefits__item:focus-within {
	opacity: 1;
}

.nova-plan-benefits__rule {
	flex: 0 0 2px;
	width: 2px;
	border-radius: 2px;
	background-color: var(--nova-plan-benefits-rule, var(--nova-tax-border));
	transition: background-color 0.3s ease;
}

/*
 * Figma marks the point being read with a navy rule (Primary/500, node
 * 2318:87680 — a 2 x 148 fill of #021137), not the green the eyebrow and CTAs
 * use. Green here reads as a success state and pulls the eye away from the copy.
 */
.nova-plan-benefits__item.is-active .nova-plan-benefits__rule,
.nova-plan-benefits__item:focus-within .nova-plan-benefits__rule {
	background-color: var(--nova-plan-benefits-rule-active, var(--nova-tax-primary));
}

/*
 * The dim and the rail crossfade are the whole point of the effect, but they are
 * motion tied to scrolling. Reduced motion keeps the state, drops the fade.
 */
@media (prefers-reduced-motion: reduce) {
	.nova-plan-benefits__item,
	.nova-plan-benefits__rule {
		transition: none;
	}
}

.nova-plan-benefits__item-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding-block-end: var(--nova-plan-benefits-item-gap, 40px);
}

.nova-plan-benefits__item:last-child .nova-plan-benefits__item-text {
	padding-block-end: 0;
}

.nova-plan-benefits .nova-plan-benefits__item-title {
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-heading);
}

.nova-plan-benefits__item-copy {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-body);
}

/* ---------------------------------------------------------------------------
 * Photo
 * ------------------------------------------------------------------------ */

/*
 * Figma strokes the frame with a 2px vertical gradient, which CSS has no single
 * property for. A transparent border over a border-box-origin gradient is the
 * standard way to get one — the photo covers the whole padding box, so only the
 * border edge shows the gradient and no second background layer is needed.
 *
 * The frame carries no padding: Figma paints the photo as the frame's own image
 * *fill*, which reaches the stroke on all four sides. (Node 2318:87695 declares
 * 16px of auto-layout padding, but the frame has no children for it to act on,
 * so nothing in the design is inset by it.) Padding here would instead widen the
 * gradient into an 18px band and shrink the photo by 32px in both axes.
 */
.nova-plan-benefits__figure {
	display: flex;
	flex: 1 1 auto;
	width: 100%;
	max-width: 560px;
	height: 656px;
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--nova-plan-benefits-media-radius, 20px);
	background-image: linear-gradient(
		180deg,
		var(--nova-plan-benefits-edge-from, #aab8d8) 0%,
		var(--nova-plan-benefits-edge-to, #dbe5fa) 100%
	);
	background-origin: border-box;

	/*
	 * Clips the photo to the padding box, whose corner radius is already the
	 * frame radius less the 2px border. This is what actually rounds the photo:
	 * Elementor's own frontend sheet ships `.elementor img { border-radius: 0 }`,
	 * and at (0,1,1) that beats any single class of ours, so a radius set on the
	 * `img` alone is silently dropped and the photo squares off over the corner
	 * of the gradient. Clipping from the parent sidesteps the specificity race
	 * entirely.
	 */
	overflow: hidden;
	opacity: 1;
}

.nova-plan-benefits__figure[hidden] {
	display: none;
}

/*
 * Doubled class to outrank `.elementor img` — see the note on the figure. The
 * clip above is what guarantees the corner; this keeps the radius on the image
 * itself so it is still right if the element is ever taken out of the frame.
 */
.nova-plan-benefits .nova-plan-benefits__image {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: calc(var(--nova-plan-benefits-media-radius, 20px) - 2px);
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * Figma supplies the 1440 frame only; everything below is an addition.
 * ------------------------------------------------------------------------ */

@media (max-width: 1366px) {
	/*
	 * The wash is measured off the 1440 frame's left edge. Below that the section
	 * gutter narrows, so anchoring it to the section edge keeps it in the same
	 * relationship to the content column it had at 1440.
	 */
	.nova-plan-benefits__watermark {
		inset-inline-start: 0;
	}

	.nova-plan-benefits__body {
		--nova-plan-benefits-body-gap: 48px;
	}
}

@media (max-width: 1024px) {
	.nova-plan-benefits__inner {
		--nova-plan-benefits-gap: 56px;
	}

	/*
	 * One column. The photo drops below the points rather than beside them —
	 * at half of a tablet's width it would be too small to read as a photograph
	 * and would squeeze the copy to four or five words a line. It keeps a fixed
	 * 4:3 box so it cannot inherit the height of whichever tab is open, and the
	 * row's min-height goes with the second column that created it.
	 */
	.nova-plan-benefits__body {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.nova-plan-benefits__col,
	.nova-plan-benefits__media {
		grid-column: 1;
		grid-row: auto;
	}

	.nova-plan-benefits__col {
		gap: 32px;
		min-height: 0;
	}

	/*
	 * Nothing pins below the desktop tier. Stacked, the photo is the last thing
	 * in the section, so there is nothing left for it to sit beside; and a pill
	 * track pinned over a page that is mostly this one section would eat a
	 * visible share of a phone screen for the whole scroll.
	 */
	.nova-plan-benefits__tabs-bar,
	.nova-plan-benefits__media {
		position: static;
	}

	.nova-plan-benefits__tabs-bar {
		padding-block: 0;
		margin-block-start: 0;
	}

	.nova-plan-benefits__figure {
		aspect-ratio: 4 / 3;
		max-width: 100%;
		height: auto;
	}

	.nova-plan-benefits .nova-plan-benefits__panel-title {
		font-size: 22px;
	}
}

@media (max-width: 767px) {
	.nova-plan-benefits__inner {
		--nova-plan-benefits-gap: 40px;
	}

	.nova-plan-benefits__body,
	.nova-plan-benefits__col {
		row-gap: 24px;
	}

	/*
	 * The two pills are ~480px of label side by side, so past this width they
	 * stop being a segmented control and become a stacked pair. The track keeps
	 * its fill and hairline; only the axis changes.
	 */
	.nova-plan-benefits__tabs {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		border-radius: 28px;
	}

	.nova-plan-benefits .nova-plan-benefits__tab {
		justify-content: flex-start;
		font-size: 18px;
	}

	.nova-plan-benefits__panel {
		gap: 24px;
	}

	.nova-plan-benefits__item {
		gap: 16px;
	}

	.nova-plan-benefits .nova-plan-benefits__item-title {
		font-size: 18px;
	}

	.nova-plan-benefits__figure {
		aspect-ratio: 3 / 2;
	}

	.nova-plan-benefits__watermark {
		width: 100%;
		height: 320px;
	}
}