/**
 * NovaBP Tax Advisor — Section 2, Why Choose
 *
 * Figma reference: node 319:2451 — a 600px intro column beside a 580px column of
 * white cards (330:6390, 352:582). The frame carries a designer note on the card
 * list: the cards reveal and stack on top of one another as the page scrolls.
 */

.nova-tax-benefits {
	background-color: var(--nova-tax-surface);
}

/*
 * `align-items: flex-start` matters twice over: it lets the intro column be
 * sticky (a stretched flex item has no free space to slide within), and it stops
 * the short intro from stretching to the full height of the card stack.
 */
.nova-tax-benefits__inner {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 100px;
}

/*
 * The intro pins while the cards scroll past it, which is what gives the
 * stacking sequence something fixed to read against.
 *
 * Sticky dies silently if any ancestor has `overflow` other than `visible`. If
 * this column ever stops pinning, check the Elementor container's Overflow
 * setting before anything in here.
 */
.nova-tax-benefits__intro {
	position: sticky;
	inset-block-start: var(--nova-tax-benefits-top, 120px);
	flex: 0 1 600px;
	min-width: 0;
}

/*
 * A grid rather than a column flex box, purely so `grid-auto-rows: 1fr` can hand
 * every card the height of the tallest. The cards pin on the same line and cover
 * one another, and a card shorter than the one beneath it would leave a strip of
 * that one showing under its bottom edge — up to 54px with this copy.
 */
.nova-tax-benefits__stack {
	display: grid;
	grid-auto-rows: 1fr;
	flex: 0 1 580px;
	gap: 60px;
	min-width: 0;
}

/*
 * The stacking itself. Every card pins at the same line, so each one arrives
 * over the one before it and covers it outright rather than leaving a strip of
 * it showing.
 *
 * The step is what would fan them out: each card rests `--i` steps further down
 * than the first, leaving exactly that much of the previous card visible. It
 * defaults to 0 for a full cover; raise it to reveal a header-height strip of
 * each card underneath (112px clears the header). `--i` is set inline per card
 * by the widget because CSS has no sibling index.
 *
 * The cards paint in document order, so a later card is already above an earlier
 * one and no z-index is needed.
 *
 * `--nova-tax-benefits-cover` is how much of this card the next one has taken,
 * 0 to 1, written on the element by novabp-tax-benefits.js. Both the opacity and
 * the shadow below read it, so a card dims and loses its lift as it goes under.
 *
 * It fades the whole way to nothing rather than to the 30% Figma 2056:3922
 * draws: with three cards deep, two dimmed layers behind the front one still
 * put their headings and body copy under its text, which is exactly the
 * collision the section has to avoid. `--nova-tax-benefits-faded` reopens the
 * question for an author who wants the layers to show through — the widget's
 * Covered Card Opacity control writes it.
 *
 * The `0` fallback on `--nova-tax-benefits-cover` is what applies when the
 * script does not run, and leaves the stack at full opacity.
 */
.nova-tax-benefits__card {
	position: sticky;
	inset-block-start: calc(
		var(--nova-tax-benefits-top, 120px) + var(--i, 0) * var(--nova-tax-benefits-step, 0px)
	);
	display: flex;
	flex-direction: column;
	padding: 8px;
	background-color: var(--nova-tax-white);
	border-radius: 20px;
	opacity: calc(
		1 - (1 - var(--nova-tax-benefits-faded, 0)) * var(--nova-tax-benefits-cover, 0)
	);

	/*
	 * Figma gives the two states different shadows — 0 1px 20px/5% in front,
	 * 0 6px 12px/3% behind — so both are declared and each alpha is faded against
	 * the other. No `transition`: the value already tracks the scroll frame by
	 * frame, and easing it on top would only make it lag the card it belongs to.
	 */
	box-shadow:
		0 1px 20px 0 rgb(0 0 0 / calc(0.05 * (1 - var(--nova-tax-benefits-cover, 0)))),
		0 6px 12px 0 rgb(0 0 0 / calc(0.03 * var(--nova-tax-benefits-cover, 0)));
}

/*
 * The right padding reserves the 100px slot the glyph is anchored over (16px of
 * head padding plus the slot) so a long title cannot run under the illustration.
 * The glyph itself is positioned against this box, not laid out inside it.
 */
.nova-tax-benefits__card-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 116px 24px 16px;
}

.nova-tax .nova-tax-benefits__card-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);
}

/*
 * Figma (2047:2893 / 2047:2894) hangs a 145.58x141.97 illustration off a 100px
 * slot at x-40 / y-74.17, so it overflows the head on three sides and rides
 * above the card's own top edge. Nothing clips it — the card carries no
 * `overflow`, and the design shows the green disc breaking the white corner.
 *
 * The offsets are re-expressed as "centred on the head, nudged 3px up": the
 * glyph's own centre lands 3.19px above the head's, which is the same placement
 * without hard-coding a number that only holds while the glyph is 142 tall.
 * `inset-inline-end` resolves against the head's padding box, so the reserved
 * right padding above moves the title without moving this.
 */
.nova-tax-benefits__card-slot {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 10px;
	width: var(--nova-tax-benefits-glyph-width, 146px);
	height: var(--nova-tax-benefits-glyph-height, 142px);
	transform: translateY(-50%) translateY(-15px);
}

/*
 * The glyph comes from one of three places: the theme's icon set, an SVG
 * uploaded through the widget, or an icon font. Elementor inlines an uploaded
 * SVG, which `.nova-tax-icon svg` in the base stylesheet already stretches; the
 * other two need sizing of their own so every source fills the same slot.
 */
.nova-tax-benefits__card-glyph {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--nova-tax-primary);
}

.nova-tax-benefits__card-glyph i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: var(--nova-tax-benefits-glyph-height, 142px);
	line-height: 1;
}

/* Only reached if SVG uploads are off and Elementor links the file instead. */
.nova-tax-benefits__card-glyph img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Gradient fill and gradient border in one declaration: the first layer paints
 * inside the padding box, the second fills the border box and shows through the
 * transparent border. Reproduces the Figma 180deg tint fading to nothing plus
 * the hairline that fades out with it.
 */
/*
 * `flex: 1` so the panel takes up whatever height the equalised card has spare —
 * without it a short card ends in a band of bare white below the gradient.
 */
.nova-tax-benefits__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 40px;
	padding: 20px;
	border: 1px solid transparent;
	border-radius: 16px;
	z-index: 10;
	background-image:
		linear-gradient(180deg, rgb(245 246 248 / 1) 9%, rgb(245 246 248 / 0.15) 100%),
		linear-gradient(180deg, rgb(222 227 238 / 1) 0%, rgb(222 227 238 / 0) 100%);
	background-origin: padding-box, border-box;
	background-clip: padding-box, border-box;
}

.nova-tax-benefits__card-text {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-lede);
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (min-width: 1025px) and (max-width: 1200px) {
	.nova-tax-benefits__inner {
		gap: 48px;
	}

	.nova-tax-benefits__card-head {
		padding: 22px 118px 22px 16px;
	}

	.nova-tax-benefits__card-slot {
		--nova-tax-benefits-glyph-width: 114px;
		--nova-tax-benefits-glyph-height: 111px;
		inset-inline-end: 6px;
		transform: translateY(-50%) translateY(-11px);
	}

	.nova-tax .nova-tax-benefits__card-title {
		font-size: 18.5px;
	}
}

@media (max-width: 1024px) {
	.nova-tax-benefits__inner {
		flex-direction: column;
		gap: 48px;
	}

	/*
	 * Once the columns stack vertically the intro sits above the cards, so
	 * pinning it would park a 600px block over them for the whole scroll.
	 */
	.nova-tax-benefits__intro {
		position: static;
		flex: 1 1 auto;
		width: 100%;
	}

	.nova-tax-benefits__stack {
		flex: 1 1 auto;
		gap: 32px;
		width: 100%;
	}

	.nova-tax-benefits__card-head {
		padding: 22px 120px 22px 16px;
	}

	.nova-tax-benefits__card-slot {
		--nova-tax-benefits-glyph-width: 124px;
		--nova-tax-benefits-glyph-height: 120px;

		transform: translateY(-50%) translateY(-10px);
	}

	.nova-tax .nova-tax-benefits__card-title {
		font-size: 19px;
	}

	.nova-tax-benefits__card-text {
		font-size: 17px;
	}
}

/*
 * On a phone the cards are nearly as tall as the viewport, so a pinned stack
 * would trap the reader on one card at a time. They scroll normally instead.
 */
@media (max-width: 767px) {
	/*
	 * Equal heights only exist to make one pinned card cover the last. Nothing
	 * pins here, so they would only pad the short cards out with empty gradient.
	 */
	.nova-tax-benefits__stack {
		grid-auto-rows: auto;
		gap: 20px;
	}

	.nova-tax-benefits__card {
		position: static;
		padding: 8px;
		border-radius: 18px;
	}

	/*
	 * The illustration scales nicely on mobile; the right padding reserves
	 * ample space so the title has room and the glyph never bleeds into text.
	 */
	.nova-tax-benefits__card-head {
		padding: 16px 96px 16px 14px;
	}

	.nova-tax-benefits__card-slot {
		--nova-tax-benefits-glyph-width: 92px;
		--nova-tax-benefits-glyph-height: 89px;
		inset-inline-end: 6px;
		transform: translateY(-50%) translateY(-8px);
	}

	.nova-tax .nova-tax-benefits__card-title {
		font-size: 17px;
		line-height: 1.35;
	}

	.nova-tax-benefits__card-body {
		padding: 18px 16px;
		gap: 20px;
		border-radius: 14px;
	}

	.nova-tax-benefits__card-text {
		font-size: 15.5px;
		line-height: 1.45;
	}
}

/*
 * Pinning is motion the reader did not ask for. Honouring the OS setting turns
 * the stack back into a plain list.
 */
@media (prefers-reduced-motion: reduce) {
	.nova-tax-benefits__intro,
	.nova-tax-benefits__card {
		position: static;
	}
}