/**
 * NovaBP Superannuation — Transparent Fee Structure
 *
 * Section 6 of the Superannuation page: a centred header capped at 800px, three
 * equal tinted cards each opening with a white icon tile, and a navy CTA closing
 * the section.
 *
 * Depends on `novabp-tax-base` for tokens and the eyebrow / heading / lede /
 * button primitives.
 *
 * Figma reference: node 2083:1675 (card 2088:4747, icon tile 2088:4748)
 */

.nova-super-fees__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-super-fees-gap, 60px);
}

.nova-super-fees__header {
	--nova-tax-header-max: 800px;
}

/*
 * Figma lays the cards out as a row of three `fill` frames. A grid keeps them
 * equal without relying on the copy being a similar length, and reflows on its
 * own as the column count drops.
 */
.nova-super-fees__grid {
	display: grid;
	grid-template-columns: repeat(var(--nova-super-fees-columns, 3), minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	width: 100%;
}

.nova-super-fees__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--nova-super-fees-card-border, var(--nova-tax-border));
	border-radius: 16px;
	background-color: var(--nova-super-fees-card-bg, var(--nova-tax-surface));
}

/*
 * 52x52 white 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.
 */
.nova-super-fees__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background-color: var(--nova-super-fees-icon-bg, var(--nova-tax-white));
	color: var(--nova-super-fees-icon-color, var(--nova-tax-primary));
}

.nova-super-fees__icon .nova-tax-icon {
	width: 28px;
	height: 28px;
}

.nova-super-fees__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

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

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

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

	.nova-super-fees__grid {
		--nova-super-fees-columns: 2;
	}
}

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

	.nova-super-fees__grid {
		--nova-super-fees-columns: 1;
	}

	.nova-super-fees__card {
		padding: 20px;
	}
}