/**
 * NovaBP Bookkeeping — Clear, Fixed-Fee Bookkeeping Pricing (section 7)
 *
 * Centred header, a two-column row of feature cards beside a photo panel, and a
 * closing button. The cards themselves are `.nova-tax-card--surface` and their
 * icon tiles `.nova-tax-icon-box`, both from `novabp-tax-base.css` — this file
 * only arranges them and dresses the panel.
 *
 * Figma reference: node 2165:8801
 */

.nova-book-pricing {
	--nova-book-pricing-bg: var(--nova-tax-white);
	--nova-book-pricing-gap: 60px;
	--nova-book-pricing-inset: 60px;
	--nova-book-pricing-column-gap: 24px;
	--nova-book-pricing-panel-h: 420px;
	--nova-book-pricing-panel-border: var(--nova-tax-border);
	--nova-book-pricing-wash: #010016;

	background-color: var(--nova-book-pricing-bg);
}

.nova-book-pricing__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-book-pricing-gap);
}

.nova-book-pricing__header {
	--nova-tax-header-max: 800px;
}

/* ---------------------------------------------------------------------------
 * Row
 * ------------------------------------------------------------------------ */

.nova-book-pricing__row {
	display: flex;
	align-items: stretch;
	gap: var(--nova-book-pricing-column-gap);
	width: 100%;
	padding-inline: var(--nova-book-pricing-inset);
}

/*
 * `min-width: 0` on both halves: flex items floor at their content width
 * without it, and the panel's background has no intrinsic width to floor at
 * while the cards' longest word does — which is how a 50/50 pair silently
 * becomes 60/40.
 */
.nova-book-pricing__cards,
.nova-book-pricing__panel {
	flex: 1 1 0;
	min-width: 0;
}

.nova-book-pricing__cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * Beside the cards the panel takes its height from them — Figma sizes the left
 * column `hug` and the panel `fill`, which is what `align-items: stretch` on
 * the row already does. So the height control below is the *stacked* height,
 * applied only once the row has broken; a floor here would instead push the
 * row taller than the cards need.
 */

.nova-book-pricing__card-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* ---------------------------------------------------------------------------
 * Photo panel
 *
 * Two background layers: the wash on top so the promises stay legible, the
 * photograph beneath it. Figma gives the panel a 3px border rather than the
 * hairline the cards get.
 * ------------------------------------------------------------------------ */

.nova-book-pricing__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px 20px 32px;
	background-color: #f7f7f7;
	background-image:
		linear-gradient(0deg, var(--nova-book-pricing-wash) 3%, rgb(0 0 0 / 0) 61%),
		var(--nova-book-pricing-media);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border: 3px solid var(--nova-book-pricing-panel-border);
	border-radius: 16px;
}

.nova-book-pricing__promises {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nova-book-pricing__promise {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-white);
}

.nova-book-pricing__promise .nova-tax-icon {
	width: 24px;
	height: 24px;
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * Figma supplies desktop only. Everything below 1440 is an addition.
 * ------------------------------------------------------------------------ */

@media (max-width: 1366px) {
	.nova-book-pricing {
		--nova-book-pricing-inset: 24px;
	}

	.nova-book-pricing__promise {
		font-size: 20px;
	}
}

@media (max-width: 1024px) {
	.nova-book-pricing {
		--nova-book-pricing-inset: 0px;
		--nova-book-pricing-panel-h: 360px;
	}

	/*
	 * Two half-width columns leave the second card — the longest copy in the
	 * section — a measure it cannot hold, so the row stacks and the panel takes
	 * the full width beneath the cards.
	 */
	.nova-book-pricing__row {
		flex-direction: column;
	}

	/* Standing alone the panel has no sibling to take its height from. */
	.nova-book-pricing__panel {
		min-height: var(--nova-book-pricing-panel-h);
	}

	.nova-book-pricing__promise {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.nova-book-pricing {
		--nova-book-pricing-panel-h: 320px;
	}

	.nova-book-pricing__panel {
		padding: 20px 16px 24px;
		border-width: 2px;
	}

	/*
	 * Three promises across never fit a phone. Stacked and left-aligned they
	 * read as the checklist they are rather than three stranded centred lines.
	 */
	.nova-book-pricing__promises {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.nova-book-pricing__promise {
		font-size: 16px;
	}

	.nova-book-pricing__promise .nova-tax-icon {
		width: 20px;
		height: 20px;
	}
}