/**
 * NovaBP Bookkeeping — Why Choose Our Bookkeeping Service
 *
 * Section 3 of the Bookkeeping page: a split header over a three-column grid of
 * white cards, each an icon tile above a title and a paragraph, on a tinted
 * band carrying an oversized rounded-rectangle watermark.
 *
 * Depends on `novabp-tax-base` for tokens and the section shell, the eyebrow /
 * heading / lede primitives and `.nova-tax-header--split`.
 *
 * Figma reference: node 2123:8039 (card 2123:8064, icon tile 2123:8065,
 * watermark 2127:8315)
 */

.nova-book-why {
	background-color: var(--nova-tax-surface);
	/*
	 * The watermark hangs 358px past the right edge of the 1440 frame, so without
	 * this it would widen the document and give the whole page a horizontal
	 * scrollbar.
	 */
	overflow: hidden;
}

.nova-book-why__inner {
	display: flex;
	flex-direction: column;
	gap: var(--nova-book-why-gap, 80px);
}

/*
 * The watermark: an 876x544 rounded rectangle outlined at 40px in Primary/500
 * and dropped to 2% opacity, positioned in Figma at x 922 / y 505 of the 1440
 * frame — 842 / 425 once the 80px gutter is taken off, which is what it is
 * measured from here since `__inner` is that content box.
 *
 * Drawn as a pseudo-element rather than an element on the page because it is
 * pure texture, and as a border rather than a background so the 40px stroke and
 * the 38.66px radius are both literal.
 */
.nova-book-why.is-watermarked .nova-book-why__inner {
	position: relative;
}

.nova-book-why.is-watermarked .nova-book-why__inner::before {
	content: "";
	position: absolute;
	inset-block-start: 425px;
	inset-inline-start: 842px;
	z-index: 0;
	width: 876px;
	height: 544px;
	border: 40px solid var(--nova-tax-primary);
	border-radius: 38.66px;
	opacity: 0.02;
	pointer-events: none;
}

/* Everything real sits above the watermark. */
.nova-book-why__header,
.nova-book-why__grid {
	position: relative;
	z-index: 1;
}

/*
 * Figma nests the six cards as two rows of three `fill` frames, both gaps 20. A
 * single grid gets the same result without the row wrappers, keeps the cards
 * equal however long the copy runs, and reflows on its own as the column count
 * drops.
 */
.nova-book-why__grid {
	display: grid;
	grid-template-columns: repeat(var(--nova-book-why-columns, 3), minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	width: 100%;
}

.nova-book-why__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	border: 1px solid var(--nova-book-why-card-border, var(--nova-tax-border));
	border-radius: 16px;
	background-color: var(--nova-book-why-card-bg, var(--nova-tax-white));
}

/*
 * 52x52 tile holding a 28px glyph. Figma pads it 6px 12px, which only matters
 * because the tile is a fixed square — centring the glyph gets the same result
 * and survives a taller icon. The tint and the card are the inverse of the
 * Superannuation fee cards, which is why this is not `.nova-tax-icon-box`.
 */
.nova-book-why__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background-color: var(--nova-book-why-icon-bg, var(--nova-tax-surface));
	color: var(--nova-book-why-icon-color, var(--nova-tax-primary));
}

.nova-book-why__icon .nova-tax-icon {
	width: 28px;
	height: 28px;
}

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

.nova-book-why .nova-book-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-book-why__card-copy {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-body);
}

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

@media (max-width: 1366px) {
	/*
	 * The watermark is measured off the 1280px design measure. Below that the
	 * content column narrows but the shape does not, so it walks across the cards
	 * instead of sitting behind their right edge — anchor it to the column's own
	 * right edge from here down.
	 */
	.nova-book-why.is-watermarked .nova-book-why__inner::before {
		inset-inline-start: auto;
		inset-inline-end: -438px;
	}
}

@media (max-width: 1024px) {
	.nova-book-why__grid {
		--nova-book-why-columns: 2;
	}
}

@media (max-width: 767px) {
	.nova-book-why__grid {
		--nova-book-why-columns: 1;
	}

	.nova-book-why__card {
		padding: 20px;
	}

	/* Nothing left for it to sit behind at this width. */
	.nova-book-why.is-watermarked .nova-book-why__inner::before {
		display: none;
	}
}