/**
 * NovaBP Home — Why Choose Us
 *
 * Section 4 of the Home page: a centred header capped at 800px over a bento of
 * one tall gradient panel and a set of tinted cards.
 *
 * Built on `novabp-tax-base` for the section shell, header stack and button.
 *
 * Figma reference: NOVABP - Landing Page (Copy), node 46:407
 * — header 46:408, panel 117:3508, side stack 117:3510, bottom row 46:437.
 */

.nova-home-advantage {
	--nova-home-advantage-gap: 20px;
	--nova-home-advantage-from: #021137;
	--nova-home-advantage-to: #06319d;
	--nova-home-advantage-angle: 210deg;
}

.nova-home-advantage__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

.nova-home-advantage__header {
	--nova-tax-header-max: 800px;
}

.nova-home-advantage__bento {
	display: flex;
	flex-direction: column;
	gap: var(--nova-home-advantage-gap);
	width: 100%;
}

/*
 * The panel and the side stack share the top row. `align-items: stretch` is
 * what lets the panel take its height from the stack beside it rather than from
 * its own copy, which is how Figma has the two ending on the same line.
 */
.nova-home-advantage__top {
	display: flex;
	align-items: stretch;
	gap: var(--nova-home-advantage-gap);
}

.nova-home-advantage__stack,
.nova-home-advantage__pair,
.nova-home-advantage__row {
	display: flex;
	gap: var(--nova-home-advantage-gap);
}

.nova-home-advantage__stack {
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

.nova-home-advantage__pair > *,
.nova-home-advantage__row > * {
	flex: 1 1 0;
	min-width: 0;
}

/* The lone card under the pair fills whatever height the panel leaves. */
.nova-home-advantage__stack > .nova-home-advantage__card {
	flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
 * Feature panel
 * ------------------------------------------------------------------------ */

.nova-home-advantage__panel {
	position: relative;
	display: flex;
	flex: 0 1 646px;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	min-width: 0;
	padding: 40px;
	overflow: hidden;
	border-radius: 20px;
	/*
	 * Figma's gradient handles run well past the frame, so only the first
	 * ~40% of the ramp is ever visible — the panel stays deep navy and the
	 * bottom-left corner lifts to about #041E62, nowhere near the end colour.
	 * CSS normalises the gradient line to the box, so the stops have to
	 * overshoot (32% → 193%, sampled off the Figma render at 646×636) to
	 * reproduce it. Plain `10% → 100%` paints the full ramp and washes the
	 * card out.
	 */
	background-image: linear-gradient(var(--nova-home-advantage-angle),
			var(--nova-home-advantage-from) 32%,
			var(--nova-home-advantage-to) 193%);
}

/*
 * The glyph bleeds off the top right at 10%. It is behind the copy, so it is
 * taken out of flow and given a negative z-index against the panel's own
 * stacking context — `overflow: hidden` above is what clips it.
 */
.nova-home-advantage__panel-glyph {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: -12px;
	width: 171px;
	height: 171px;
	color: var(--nova-tax-white);
	opacity: 0.1;
	pointer-events: none;
}

.nova-home-advantage__panel-body,
.nova-home-advantage__panel-copy {
	position: relative;
	display: flex;
	flex-direction: column;
}

.nova-home-advantage__panel-body {
	gap: 20px;
}

.nova-home-advantage__panel-copy {
	gap: 12px;
}

.nova-home-advantage .nova-home-advantage__panel-title {
	margin: 0;
	font-family: var(--nova-tax-font);
	font-size: 36px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	text-transform: none;
	color: rgb(255 255 255 / 0.99);
}

.nova-home-advantage__panel-text {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.99);
}

/* `align-self` rather than a wrapper: the button hugs its text inside a column
 * whose other children stretch. */
.nova-home-advantage .nova-home-advantage__panel-button {
	position: relative;
	align-self: flex-start;
}

/* ---------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------ */

.nova-home-advantage__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	border: 1px solid #dee3ee;
	border-radius: 16px;
	background-color: #f5f6f8;
}

.nova-home-advantage__card-plate {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background-color: var(--nova-tax-white);
	color: var(--nova-tax-primary);
}

.nova-home-advantage__card-plate .nova-tax-icon {
	width: 24px;
	height: 24px;
}

.nova-home-advantage__card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.nova-home-advantage .nova-home-advantage__card-title {
	margin: 0;
	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-home-advantage__card-text {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-body);
}

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

@media (max-width: 1366px) {
	.nova-home-advantage__inner {
		gap: 60px;
	}

	.nova-home-advantage__panel {
		flex-basis: 50%;
	}

	.nova-home-advantage .nova-home-advantage__panel-title {
		font-size: 30px;
	}
}

@media (min-width: 1025px) and (max-width: 1300px) {
	.nova-home-advantage__panel {
		flex-basis: 42% !important;
		padding: 32px 28px;
	}

	.nova-home-advantage .nova-home-advantage__panel-title {
		font-size: 26px;
	}

	.nova-home-advantage__panel-text {
		font-size: 16px;
		line-height: 1.45;
	}
}

@media (max-width: 1024px) {
	.nova-home-advantage__inner {
		gap: 48px;
	}

	/*
	 * Below the tablet break the top row unwinds: the panel goes full width and
	 * the side stack follows it, so every card keeps a readable measure instead
	 * of being squeezed into a half column.
	 */
	.nova-home-advantage__top {
		flex-direction: column;
	}

	.nova-home-advantage__panel {
		flex-basis: auto;
		padding: 32px;
	}

	.nova-home-advantage__row {
		flex-wrap: wrap;
	}

	.nova-home-advantage__row > * {
		flex: 1 1 calc(50% - var(--nova-home-advantage-gap));
	}
}

@media (max-width: 767px) {
	.nova-home-advantage__inner {
		gap: 32px;
	}

	.nova-home-advantage__pair,
	.nova-home-advantage__row {
		flex-direction: column;
	}

	.nova-home-advantage__row > * {
		flex-basis: auto;
	}

	.nova-home-advantage__panel {
		gap: 24px;
		padding: 24px;
	}

	.nova-home-advantage .nova-home-advantage__panel-title {
		font-size: 24px;
	}

	.nova-home-advantage__panel-text {
		font-size: 16px;
	}

	.nova-home-advantage__panel-glyph {
		width: 120px;
		height: 120px;
	}
}