/**
 * NovaBP Superannuation — Meet Our Expert
 *
 * Section 3 of the Superannuation page: the standard eyebrow / heading / lede
 * stack on the left, and on the right a fixed-width pair of 400px-tall cards —
 * a portrait carrying a frosted nameplate, and a navy pull-quote panel with an
 * oversized quote glyph behind it.
 *
 * Depends on `novabp-tax-base` for tokens and the header primitives — the
 * left-hand stack maps onto `.nova-tax-header` exactly (40 › 20 › 8 / 8), so it
 * reuses those classes instead of restating the gaps.
 *
 * Figma reference: node 2088:4589 (portrait 2088:4662, quote 2088:4683)
 */

.nova-super-expert__inner {
	display: flex;
	align-items: start;
	gap: var(--nova-super-expert-gap, 80px);
}

.nova-super-expert__intro {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Figma draws this heading at 48/1.5 with -0.02em tracking rather than the
 * 52/1.3 of `.nova-tax-heading`, so it overrides those three properties. Two
 * classes to outscore the Global Kit's bare-tag `h2` rule, same as the base
 * stylesheet explains.
 */
.nova-super-expert .nova-super-expert__title {
	font-size: 48px;
	line-height: 1.5;
	letter-spacing: -0.02em;
}

/*
 * The card pair is `hug` in Figma — 302 + 24 + 302 — so it keeps its intrinsic
 * width while the intro column takes the remainder.
 */
.nova-super-expert__cards {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	gap: 24px;
	min-height: var(--nova-super-expert-card-height, 400px);
}

.nova-super-expert__card {
	display: flex;
	flex-direction: column;
	width: var(--nova-super-expert-card-width, 302px);
	padding: 8px;
	border-radius: 12px;
}

/* ---------------------------------------------------------------------------
 * Portrait card
 * ------------------------------------------------------------------------ */

/*
 * Figma draws the portrait at a fixed 302x400. Holding that as an aspect ratio
 * rather than a height keeps the crop identical once the card width changes —
 * stacked tiers let the cards share the row, and a fixed height would letterbox
 * or squash the photo there.
 */
.nova-super-expert__portrait {
	justify-content: flex-end;
	aspect-ratio: 302 / 400;
	background-color: #f7f7f7;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.nova-super-expert__plate {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-radius: 12px;
	background-color: var(--nova-super-expert-plate-bg, rgb(255 255 255 / 0.96));
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.nova-super-expert__identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

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

.nova-super-expert__role {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--nova-tax-body);
}

.nova-super-expert__rule {
	width: 40px;
	height: 2px;
	background-color: var(--nova-super-expert-rule, var(--nova-tax-green));
}

.nova-super-expert__blurb {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--nova-tax-lede);
}

/* ---------------------------------------------------------------------------
 * Quote card
 * ------------------------------------------------------------------------ */

.nova-super-expert__quote {
	position: relative;
	overflow: hidden;
	background-color: var(--nova-super-expert-quote-bg, var(--nova-tax-primary));
}

/*
 * Figma parks the glyph at x 167 / y 20 of the 302x400 card, at 117x82 with a
 * 4px green stroke held at 20%. It is decoration behind the copy, so it takes
 * the lower stacking layer and no accessible name.
 */
.nova-super-expert__quote-glyph {
	position: absolute;
	z-index: 0;
	inset-block-start: 20px;
	inset-inline-start: 167px;
	width: 117px;
	height: 82px;
	color: var(--nova-tax-green);
	opacity: 0.2;
	pointer-events: none;
}

.nova-super-expert__quote-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
}

.nova-super-expert__quote-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nova-super-expert .nova-super-expert__quote-title {
	font-family: var(--nova-tax-font);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-white);
}

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

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

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

@media (max-width: 1366px) {
	.nova-super-expert__inner {
		--nova-super-expert-gap: 48px;
	}

	.nova-super-expert .nova-super-expert__title {
		font-size: 42px;
	}
}

@media (max-width: 1024px) {
	.nova-super-expert__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.nova-super-expert .nova-super-expert__title {
		font-size: 36px;
	}

	/*
	 * Stacked, the pair is no longer competing with the intro for width. The
	 * portrait holds its designed 302px rather than splitting the row evenly —
	 * its aspect-ratio is what sets the row height, so a wider card would push
	 * the row well past 400px and leave the quote card half empty. The quote
	 * takes the leftover width instead.
	 */
	.nova-super-expert__portrait {
		flex: 0 0 auto;
	}

	.nova-super-expert__quote {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.nova-super-expert__quote-glyph {
		inset-inline-start: auto;
		inset-inline-end: 20px;
	}
}

@media (max-width: 767px) {
	.nova-super-expert .nova-super-expert__title {
		font-size: 30px;
	}

	.nova-super-expert__portrait {
		margin: 0 auto;
	}

	/*
	 * One column — both cards take the full width, so the 302px anchor and the
	 * 400px row floor are both dropped and each card sizes to its own content.
	 */
	.nova-super-expert__cards {
		--nova-super-expert-card-width: auto;

		flex-direction: column;
		min-height: 0;
	}

	.nova-super-expert .nova-super-expert__quote-title {
		font-size: 24px;
	}

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