/**
 * NovaBP Tax Planning — Who We Serve
 *
 * Section 5 of the Tax Planning page: one tinted tray split into a 580px intro
 * column — header above a pair of stacked image plates — and a list of audience
 * rows separated by hairlines.
 *
 * Depends on `novabp-tax-base` for tokens, the section shell and the eyebrow /
 * heading / lede primitives.
 *
 * Figma reference: node 2284:12650 (tray 2284:12651, image stack 2284:12662,
 * rows 2284:12666+, watermark 2284:12652)
 */

/*
 * The one section on the page that is not padded 80px, and the one that runs
 * wider than the 1280px measure. Figma pads this frame 40 all round because the
 * tray inside it carries its own 60px — so the vertical rhythm either side comes
 * from the neighbours, and the tray is 1360 wide rather than 1280.
 *
 * That extra 80px is not arbitrary: this section's content is a bordered tray,
 * not bare text, so it reads as a panel inset from the page edge rather than a
 * column that has broken its measure. Overriding both tokens here keeps the
 * override scoped to this section and leaves `.nova-tax-section__inner` doing
 * the centring exactly as it does everywhere else.
 */
.nova-plan-audience {
	--nova-tax-section-padding-y: 40px;
	--nova-tax-section-padding-x: 40px;
	--nova-tax-content-max: 1360px;

	background-color: var(--nova-plan-audience-bg, var(--nova-tax-white));
}

.nova-plan-audience__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/*
 * Laid out like the Tax Advisor section's `__foot-body`: `flex-start`, not
 * `stretch`, so the intro is only as tall as its own content, and the intro
 * pins while the rows scroll past it (see `__intro` below).
 */
.nova-plan-audience__tray {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 80px;
	padding: var(--nova-plan-audience-tray-padding, 60px);
	border: 1px solid var(--nova-plan-audience-tray-border, var(--nova-tax-border));
	border-radius: 28px;

	/*
	 * The watermark: the same 857x584 chevron the Tax Advisor "Who We Serve"
	 * panel carries (`.nova-tax-audience__panel`) — a 40px Primary/500 stroke at
	 * 2%, not the rounded rectangle the Figma node's reported `borderRadius`
	 * suggests, which is why it ships as exported artwork rather than as a
	 * bordered pseudo-element.
	 *
	 * Painting it into the tray's own background rather than as a positioned
	 * child also means the border box crops the part that hangs past the tray's
	 * right edge for free — rounded corners included. That crop used to be
	 * `overflow: hidden`, and dropping it is what lets the intro column pin: any
	 * value other than `visible` makes the tray a scroll container, and a sticky
	 * child then sticks to a scrollport exactly as tall as its own content, with
	 * nowhere to travel.
	 */
	background-color: var(--nova-plan-audience-tray-bg, var(--nova-tax-surface));
}

/*
 * Both offsets are negative-anchored to the corner the artwork hangs off, which
 * is what keeps it there as the tray resizes:
 *
 * `right -230px` is Figma's x 733 of the 1360-wide tray read from the other
 * end — 1360 - (733 + 857). Anchoring right rather than left is what keeps the
 * chevron behind the rows once the tray narrows instead of sliding off the crop.
 *
 * `bottom 0` replaces Figma's `top 326px` for the same reason in the other
 * axis. 326 was measured on a frame with a fixed row count; the tray's height
 * is really set by however many audience rows the author writes, so an offset
 * from the top leaves the artwork stranded near the header as the list grows.
 * Pinned to the bottom edge it stays in the corner it was drawn in whatever the
 * tray's height turns out to be. The 20px of slack inside the artwork's own
 * 584px box is why `0` reads as sitting on the bottom border rather than
 * cropped by it.
 */
.nova-plan-audience.is-watermarked .nova-plan-audience__tray {
	background-image: url("../images/tax-planning/audience-watermark.svg");
	background-repeat: no-repeat;
	background-position: right -230px bottom 0;
}

/* ---------------------------------------------------------------------------
 * Intro column
 * ------------------------------------------------------------------------ */

/*
 * Pins while the audience rows scroll past, same as the Tax Advisor quote/photo
 * aside and the Why Choose and FAQ intros. Sticky dies silently if any ancestor
 * has `overflow` other than `visible` — if this ever stops pinning, check the
 * tray's background note above and the Elementor container's Overflow setting
 * before anything in here.
 */
.nova-plan-audience__intro {
	position: sticky;
	inset-block-start: var(--nova-plan-audience-top, 120px);
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--nova-plan-audience-intro-width, 580px);
	max-width: var(--nova-plan-audience-intro-width, 580px);
	gap: 120px;
}

/*
 * The image block. Figma (node 2284:12662) draws a 540x300 box with two plates
 * hung off it, both out of flow so the pair overlaps the way it is drawn:
 *
 *   node          | box (relative to the 540x300 media box)
 *   --------------|------------------------------------------------------
 *   photo 12664   | x -6, y -26, 552 x 332 — the frame is 540x320 at y -20
 *                 |   and Figma draws its 6px stroke *outside* the frame
 *   plate 12663   | 536 x 336 rotated 3deg, centred 18.8 left / 22.6 above
 *                 |   the photo's centre — tinted #DEE3EE at 30%
 *
 * The plate's rotation is **counter-clockwise**: Figma reports only the
 * rotated node's bounding box (x -25.22, y -64.28, 552.86 x 363.45), which is
 * the same for either direction, but the exported artwork has the top edge
 * rising to the right and the left edge leaning right as it descends. So the
 * plate reads as a tint peeling off the top-left, its top-right corner just
 * clearing the photo and its bottom-right corner tucked behind it — not the
 * bottom-right shadow a clockwise turn gives.
 *
 * Everything here is a percentage of the media box rather than the px Figma
 * quotes, so the whole device scales as one when the column narrows or the
 * tray stacks. The px each percentage stands for, at the 540x300 reference:
 *
 *   photo  inset-block-start -8.667% = -26   inset-inline -1.111% = -6
 *          height 110.667%           =  332  (width falls out at 552)
 *   plate  inset-block-start -16.867% = -50.6  inset-inline-start -3.111% = -16.8
 *          width 99.26%              =  536  height 112% = 336
 *
 * The media box keeps Figma's 300px height (via `aspect-ratio`, not a fixed
 * height, so it can scale) rather than growing to the photograph — the 120px
 * gap above it is measured from that box, and the overhang eating into the gap
 * is the effect.
 */
.nova-plan-audience__media {
	position: relative;
	width: 100%;
	max-width: 540px;
	aspect-ratio: 540 / 300;
}

.nova-plan-audience__media::before {
	content: "";
	position: absolute;
	inset-block-start: -16.867%;
	inset-inline-start: -3.111%;
	width: 99.26%;
	height: 112%;
	border-radius: 20px;
	background-color: #DEE3EE;
	opacity: 0.3;
	transform: rotate(-3deg);
	transform-origin: center center;
	pointer-events: none;
	z-index: 0;
}

.nova-plan-audience__photo {
	position: absolute;
	inset-block-start: -8.667%;
	inset-inline: -1.111%;
	z-index: 1;
	height: 110.667%;
	border: 6px solid var(--nova-plan-audience-photo-border, #cbd1de);
	border-radius: 20px;
	background-color: var(--nova-tax-surface);
	background-image: var(--nova-plan-audience-photo, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* ---------------------------------------------------------------------------
 * Audience rows
 * ------------------------------------------------------------------------ */

/*
 * `flex-basis: 0`, not `auto`: the rows hold long paragraphs, so an auto basis
 * makes the list claim a content width far wider than the row can give it and
 * the shrink that follows comes out of the intro column instead.
 */
.nova-plan-audience__list {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	padding-inline: 40px 20px;
}

.nova-plan-audience__row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding-block: 20px;
}

/*
 * Figma puts a 1px rule between rows as its own rectangle. A border on all but
 * the last row is the same line without the spare elements, and it survives an
 * author adding or removing a row.
 */
.nova-plan-audience__row + .nova-plan-audience__row {
	border-block-start: 1px solid var(--nova-plan-audience-rule, var(--nova-tax-border));
}

/*
 * 56x56 white tile holding a 32px glyph — larger than the 52/28 pair the card
 * sections use, which is why this is not `.nova-tax-icon-box`.
 */
.nova-plan-audience__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background-color: var(--nova-plan-audience-icon-bg, var(--nova-tax-white));
	color: var(--nova-plan-audience-icon-color, var(--nova-tax-primary));
}

.nova-plan-audience__icon .nova-tax-icon {
	width: 32px;
	height: 32px;
}

.nova-plan-audience__row-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

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

.nova-plan-audience__row-copy {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	/* Figma paints this Text/Text Body at 80% layer opacity; baked in. */
	color: var(--nova-plan-audience-row-copy, rgb(53 65 95 / 0.8));
}

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

@media (max-width: 1366px) {
	.nova-plan-audience__tray {
		--nova-plan-audience-intro-width: 480px;

		gap: 48px;
	}

	/* The 120px push-apart is more than a shortened column can carry. */
	.nova-plan-audience__intro {
		gap: 80px;
	}

	.nova-plan-audience__list {
		padding-inline: 20px 0;
	}
}

@media (max-width: 1024px) {
	/*
	 * The 40px inset above is a desktop relationship — it only reads as "panel
	 * inset from the page" while the page gutter is wider than it. From the
	 * tablet tier down the gutter is 40px or less, so hand the inline axis back
	 * to the shared token and let the tray sit flush with every other section.
	 */
	.nova-plan-audience {
		--nova-tax-section-padding-x: var(--nova-gutter-x);
	}

	.nova-plan-audience__inner {
		gap: 56px;
	}

	/*
	 * The rows cannot hold an 18px paragraph beside a 56px tile much under
	 * 420px, and the intro's photograph stops reading under about 400px. Below
	 * 1024 the tray becomes a stack: intro on top, rows beneath, both at the
	 * full measure.
	 */
	.nova-plan-audience__tray {
		--nova-plan-audience-tray-padding: 40px;

		flex-direction: column;
		gap: 40px;
	}

	/*
	 * Sticky comes off with the second column: stacked, the intro sits above the
	 * rows rather than beside them, so pinning it would park the header and
	 * photograph over most of the screen for the whole length of the list.
	 *
	 * `max-width` has to be released alongside the basis, or the stacked column
	 * stays capped at the laptop control's 480px.
	 */
	.nova-plan-audience__intro {
		position: static;
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		/*
		 * The 120px push-apart only earns its keep in a full-height column, but
		 * this cannot fall to the 40px the rest of the stack uses either: the
		 * plate's topmost corner clears the media box by 64px at the reference
		 * width, so anything under ~72px puts a tinted rectangle through the
		 * lede. 80px keeps the same clearance the desktop column has.
		 */
		gap: 80px;
	}

	/*
	 * The image keeps its 540px cap rather than running the full width of the
	 * stacked tray: the plate's overhang is a fixed share of the media box, so
	 * a box twice as wide overhangs twice as far, and the device stops reading
	 * as a plate behind a photograph and starts reading as a misaligned band.
	 */

	.nova-plan-audience__list {
		padding-inline: 0;
	}
}

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

	.nova-plan-audience__tray {
		--nova-plan-audience-tray-padding: 20px;

		border-radius: 20px;
	}

	/*
	 * A phone-width tray leaves the media box around 310px across, and at
	 * Figma's 9:5 that is a 172px letterbox with five people in it. 4:3 gets
	 * the photograph back to roughly the height it has on a laptop; the plate
	 * follows it because every offset in the block is a percentage.
	 */
	.nova-plan-audience__media {
		aspect-ratio: 4 / 3;
	}

	/* Scaled down, the plate clears the box by ~47px rather than 64px. */
	.nova-plan-audience__intro {
		gap: 64px;
	}

	/* The tile and the copy no longer share a row at this width. */
	.nova-plan-audience__row {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.nova-plan-audience .nova-plan-audience__row-title {
		font-size: 20px;
	}

	.nova-plan-audience__row-copy {
		font-size: 16px;
	}

	/* Nothing left for it to sit behind at this width. */
	.nova-plan-audience.is-watermarked .nova-plan-audience__tray {
		background-image: none;
	}
}