/**
 * NovaBP Tax Planning — A More Collaborative Approach to Tax Strategy
 *
 * Section 4 of the Tax Planning page: a centred header over a row that pairs a
 * 2x2 grid of tinted cards with a fixed 400px photo panel, and a centred CTA
 * below. The photo panel is bottom-weighted — a dark wash rises from its foot
 * and the two ticked promises sit in it.
 *
 * Depends on `novabp-tax-base` for tokens, the section shell, the eyebrow /
 * heading / lede primitives, `.nova-tax-card--surface`, `.nova-tax-icon-box`
 * and the buttons.
 *
 * Figma reference: node 2251:1531 (card grid 2251:1587, card 2251:1543,
 * photo panel 2251:1555, promises 2251:1556)
 */

.nova-plan-why {
	background-color: var(--nova-plan-why-bg, var(--nova-tax-white));
}

.nova-plan-why__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-plan-why-gap, 60px);
}

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

/*
 * Figma sizes the card grid 825 and the photo 400 with a 24px gap — 1249 of the
 * 1280 measure, the remainder falling out of the grid's own rounding. The photo
 * keeps its literal width and the grid takes whatever is left, so the pair
 * fills the measure exactly at any width instead of leaving a 31px gutter.
 */
.nova-plan-why__body {
	display: flex;
	align-items: stretch;
	gap: 24px;
	width: 100%;
}

.nova-plan-why__grid {
	display: grid;
	grid-template-columns: repeat(var(--nova-plan-why-columns, 2), minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
}

.nova-plan-why__card {
	/* `.nova-tax-card--surface` supplies the fill, hairline, radius and padding. */
	height: 100%;
}

.nova-plan-why__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}

.nova-plan-why .nova-plan-why__card-title {
	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-tax-heading);
}

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

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

/*
 * The photograph is painted as a background rather than an `<img>` because the
 * promises sit inside the panel and the dark wash has to stack between the two.
 * That leaves no `alt` attribute, so the widget's alt field prints as a
 * `.nova-tax-sr-only` span instead — the pattern `novabp-tax-base` documents.
 */
.nova-plan-why__media {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 0 0 var(--nova-plan-why-media-width, 400px);
	width: var(--nova-plan-why-media-width, 400px);
	min-height: var(--nova-plan-why-media-min-height, 420px);
	padding: 20px 20px 32px;
	border: 3px solid var(--nova-plan-why-media-border, var(--nova-tax-border));
	border-radius: 16px;
	background-color: #f7f7f7;
	background-image: var(--nova-plan-why-media-image, none);

	/*
	 * The focal point, not a fixed value: the bundled photograph is portrait
	 * (563x800) and the panel turns landscape once it spans the full measure on
	 * tablet, so `cover` has to throw away most of the frame's height — centred,
	 * that lands on the subjects' chests and cuts their heads off. The widget's
	 * Photo Focal Point control drives this per device and anchors the crop to
	 * the top from tablet down. It has to be a control rather than a media query
	 * here: Elementor prints its per-element CSS at four classes of specificity,
	 * which any rule in this file loses to.
	 */
	background-position: var(--nova-plan-why-media-position, center);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

/*
 * Figma stacks the wash above the photograph inside the same frame, rising from
 * opaque at 3% to clear at 61%. A pseudo-element keeps it off the padding box
 * so it reaches the panel's rounded edge while the promises stay inset.
 */
.nova-plan-why__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		0deg,
		var(--nova-plan-why-scrim-from, rgb(1 0 22 / 1)) 3%,
		var(--nova-plan-why-scrim-to, rgb(1 0 22 / 0)) 61%
	);
	pointer-events: none;
}

.nova-plan-why__promises {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.nova-plan-why__promise {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-plan-why-promise-color, var(--nova-tax-white));
}

.nova-plan-why__promise .nova-tax-icon {
	width: 24px;
	height: 24px;
}

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

@media (max-width: 1366px) {
	/*
	 * The photo is the only fixed width in the row, so at a narrower measure it
	 * is what squeezes the cards. Giving back 40px keeps the card copy on the
	 * same number of lines it holds at 1440.
	 */
	.nova-plan-why__body {
		--nova-plan-why-media-width: 360px;
	}
}

@media (max-width: 1024px) {
	.nova-plan-why__inner {
		--nova-plan-why-gap: 48px;
	}

	/*
	 * The photo cannot hold its two promises side by side much under 360px, and
	 * the cards cannot hold their copy under about 300px. Below 1024 the row
	 * becomes a stack: the grid keeps its two columns at full measure and the
	 * photo runs the full width beneath it as a band.
	 */
	.nova-plan-why__body {
		flex-direction: column;
		gap: 20px;
	}

	/*
	 * Figma draws the panel 400x420 — very nearly square (2284:12641). Running it
	 * across the full measure with a squat fixed height meant `cover` had to
	 * scale the photograph up several times over to fill a 3:1 band and threw
	 * away most of the frame, which is what made the image read as blown up once
	 * the panel was on its own. An aspect ratio ties the band's height to
	 * whatever width it lands on instead, so the crop stays close to what the
	 * photograph can actually give: 3/2 here, 4/3 on a phone.
	 *
	 * 3/2 rather than a wider band because the photograph is portrait: the panel
	 * is wider than the image can fill, so `cover` scales it on the width and the
	 * band's height decides how much of the frame survives. At 16/9 that was 40%
	 * of it and the two faces filled the crop edge to edge; 3/2 gives back
	 * another 100px of the frame and lets them sit in some room.
	 *
	 * The 420px floor has to get out of the ratio's way, and that cannot be done
	 * from here — Photo Minimum Height is an Elementor control, so its value is
	 * printed at four classes of specificity and beats anything in this file. Its
	 * tablet and mobile defaults are 0 in the widget instead.
	 */
	.nova-plan-why__media {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 3 / 2;
	}
}

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

	.nova-plan-why__grid {
		--nova-plan-why-columns: 1;
	}

	.nova-plan-why__media {
		aspect-ratio: 4 / 3;
		padding: 20px 16px 24px;
	}

	.nova-plan-why__promises {
		justify-content: flex-start;
		gap: 12px;
	}

	.nova-plan-why__promise {
		font-size: 18px;
	}
}