/**
 * NovaBP Superannuation — Advisory Services
 *
 * Section 2 of the Superannuation page: a centred header capped at 800px, a
 * two-row / three-column card grid mixing photo cards with one gradient
 * "highlight" card that lists its points as white rows, and a navy gradient CTA
 * panel closing the section.
 *
 * Depends on `novabp-tax-base` for tokens and the eyebrow / heading / lede /
 * button primitives.
 *
 * Figma reference: node 2088:2912 (highlight card 2088:2932, CTA 2088:4478)
 */

.nova-super-services__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-super-services-gap, 80px);
}

/*
 * Figma fixes the header column at 800px inside the 1280 measure. `max-width`
 * rather than `width` so it still collapses cleanly on a narrow viewport.
 */
.nova-super-services__header {
	--nova-tax-header-max: 800px;
}

/*
 * Figma draws this as two explicit rows of three. One grid produces the same
 * result, reflows on its own as the column count drops, and does not strand a
 * half-empty row when an editor adds or removes a card.
 */
.nova-super-services__grid {
	display: grid;
	grid-template-columns: repeat(var(--nova-super-services-columns, 3), minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Cards
 *
 * Both variants share the 8px outer padding, 20px radius and the 12px-padded
 * text block; only the surface and the lower half differ. `space-between`
 * pushes the photo (or the list) to the bottom so cards of unequal copy length
 * still line their images up.
 * ------------------------------------------------------------------------ */

.nova-super-services__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--nova-super-services-card-gap, 20px);
	padding: 8px;
	border: 1px solid var(--nova-super-services-card-border, #dee3ee);
	border-radius: 20px;
	background-color: var(--nova-super-services-card-bg, #ffffff);
}

.nova-super-services__card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 12px;
}

.nova-super-services__card-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nova-super-services .nova-super-services__card-title {
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-heading);
}

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

/*
 * Figma runs the second row of cards at 18px held back to 80%, against 16px in
 * the first — longer copy, given more room. Chosen per card, so it is a
 * modifier rather than a row rule.
 */
.nova-super-services__card-copy--lg {
	font-size: 18px;
	color: rgb(53 65 95 / 0.8);
}

/*
 * The photo is a background rather than an <img> because the design crops it to
 * a fixed 240px plate. The widget's alt field prints as `.nova-tax-sr-only`
 * text inside the card instead.
 *
 * The URL arrives as a custom property rather than an inline `background-image`
 * because WP Rocket's lazyload rewrites the latter into `data-bg` and hands the
 * restore to its own observer — see the wealth card for the full note.
 */
.nova-super-services__card-media {
	min-height: var(--nova-super-services-media-height, 240px);
	border-radius: 12px;
	background-color: #f7f7f7;
	background-image: var(--nova-super-services-media);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* ---------------------------------------------------------------------------
 * Highlight card
 *
 * Figma paints a vertical gradient fill *and* a vertical gradient stroke. A
 * gradient border needs two layers: `background-image` carries both, with
 * `padding-box` for the fill and `border-box` for the stroke, and the border
 * itself goes transparent so the second layer shows through.
 * ------------------------------------------------------------------------ */

.nova-super-services__card--highlight {
	--nova-super-services-card-gap: 0;

	border-color: transparent;
	background-color: transparent;
	background-image:
		linear-gradient(
			0deg,
			var(--nova-super-services-highlight-from, #d7e1f6) 0%,
			var(--nova-super-services-highlight-to, #ffffff) 100%
		),
		linear-gradient(
			0deg,
			var(--nova-super-services-highlight-border-from, #96b5f9) 0%,
			var(--nova-super-services-highlight-border-to, #dbe5fa) 100%
		);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.nova-super-services__card--highlight .nova-super-services__card-body {
	gap: 12px;
}

.nova-super-services__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nova-super-services__list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border-radius: 12px;
	background-color: var(--nova-super-services-list-bg, #ffffff);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-body);
}

.nova-super-services__list-lead {
	font-weight: 600;
	color: var(--nova-tax-heading);
}

/* ---------------------------------------------------------------------------
 * CTA panel
 * ------------------------------------------------------------------------ */

.nova-super-services__cta {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	width: 100%;
	padding: 40px;
	border-radius: 20px;
	background-image: linear-gradient(
		var(--nova-super-services-cta-angle, 140deg),
		var(--nova-super-services-cta-from, #021137) 0%,
		var(--nova-super-services-cta-to, #06319d) 100%
	);
}

.nova-super-services__cta-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.nova-super-services__cta-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nova-super-services .nova-super-services__cta-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-white);
}

.nova-super-services__cta-copy {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.9);
}

.nova-super-services__cta .nova-tax-btn {
	flex: 0 0 auto;
}

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

@media (max-width: 1024px) {
	.nova-super-services__inner {
		--nova-super-services-gap: 48px;
	}

	.nova-super-services__grid {
		--nova-super-services-columns: 2;
	}

	.nova-super-services__card-media {
		--nova-super-services-media-height: 200px;
	}

	.nova-super-services__cta {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 32px;
	}

	.nova-super-services__cta-copy {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.nova-super-services__inner {
		--nova-super-services-gap: 40px;
	}

	.nova-super-services__grid {
		--nova-super-services-columns: 1;
	}

	.nova-super-services__card--highlight {
		--nova-super-services-card-gap: 24px;
	}

	.nova-super-services__card-media {
		--nova-super-services-media-height: 180px;
	}

	.nova-super-services__cta {
		padding: 24px;
	}

	.nova-super-services .nova-super-services__cta-title {
		font-size: 22px;
	}

	.nova-super-services__cta-copy {
		font-size: 16px;
	}
}