/**
 * NovaBP Superannuation — Hero
 *
 * Section 1 of the Superannuation page: a two-column intro (headline left,
 * lede + CTAs right, bottom-aligned) with a halftone dot texture bleeding off
 * the top right, sitting above a full-width photographic banner whose lower
 * edge carries two glass credential pills.
 *
 * Depends on `novabp-tax-base` for the shared tokens and the eyebrow / heading
 * / lede / button primitives — the Superannuation sections are drawn from the
 * same design system as the Tax Advisor ones, so they reuse those classes
 * rather than restating the values.
 *
 * Figma reference: node 2088:3588 (banner 2088:4176, pills 2088:4222/4236)
 */

/* ---------------------------------------------------------------------------
 * Shell — the section frame is a column with a 60px gap between the intro row
 * and the banner.
 * ------------------------------------------------------------------------ */

.nova-super-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--nova-super-hero-gap, 60px);
}

/* ---------------------------------------------------------------------------
 * Intro row
 *
 * Figma nests this as row(gap 110)[ row(gap 80)[ column ], column ] — the inner
 * row only ever holds one child, so it collapses to a plain two-column split.
 * Both columns are `fill`, i.e. equal width, bottom-aligned.
 * ------------------------------------------------------------------------ */

.nova-super-hero__top {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: var(--nova-super-hero-columns-gap, 110px);
}

.nova-super-hero__lead,
.nova-super-hero__aside {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
}

/*
 * The eyebrow + headline block. Figma draws it as a fixed-width child inside
 * the fill-width left column, so the column keeps its half of the measure while
 * the headline wraps at a narrower one — Superannuation and Bookkeeping leave
 * the two equal (`none`), Tax Planning (node 2284:11337) pins it to 540px.
 */
.nova-super-hero__title-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: var(--nova-super-hero-title-max, none);
}

.nova-super-hero__aside {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

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

.nova-super-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/*
 * Halftone texture. Figma parks it at x 786.25 of the 1280 content measure and
 * y -116, so it bleeds above the section's own padding — expressed as a
 * percentage so it keeps its place as the measure narrows.
 *
 * It sits *behind* the columns rather than over them. In Figma it is the last
 * child of the row and therefore paints on top, but at 30% it is texture, not
 * content, and dots crossing the CTA labels would only cost legibility.
 */
/*
 * `halftone-dots.svg` is cropped to this exact box (viewBox
 * `407.7 519.48 493.75 383.17`), so the element and the artwork are the same
 * size and `100% 100%` paints it 1:1 — each dot lands at the 2.36px Figma draws
 * it at. The box dimensions and the asset's viewBox are a matched pair: change
 * one and the dots scale off-spec. The earlier `100% auto` fitted the SVG's
 * untrimmed 981x1178 export into this 494px box and shrank every dot to 50.4%.
 */
.nova-super-hero__pattern {
	position: absolute;
	z-index: 0;
	inset-block-start: -116px;
	inset-inline-end: 0;
	width: 493.75px;
	height: 383.17px;
	background-image: var(--nova-super-hero-pattern);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Banner
 * ------------------------------------------------------------------------ */

/*
 * The photograph is a background rather than an <img> because the pills sit on
 * top of it and the gradient has to sit between the two. `--nova-super-hero-
 * banner-image` is set inline by the widget from the media control.
 */
.nova-super-hero__banner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--nova-super-hero-banner-height, 480px);
	padding: 0;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--nova-tax-primary);
	background-image:
		linear-gradient(
			var(--nova-super-hero-scrim-angle, 180deg),
			var(--nova-super-hero-scrim-from, rgb(0 0 15 / 0)) 50%,
			var(--nova-super-hero-scrim-to, rgb(0 0 15 / 0.9)) 100%
		),
		var(--nova-super-hero-banner-image, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.nova-super-hero__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 32px 40px;
}

/*
 * Glass pill. The border and the fill are the same 20% white in Figma; keeping
 * both means the edge still reads once the blur lightens what is behind it.
 */
.nova-super-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 28px;
	border: 1px solid var(--nova-super-hero-badge-border, rgb(255 255 255 / 0.2));
	border-radius: 100px;
	background-color: var(--nova-super-hero-badge-bg, rgb(255 255 255 / 0.2));
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.nova-super-hero__badge-icon {
	width: 28px;
	height: 28px;
	color: var(--nova-super-hero-badge-icon, #ffffff);
}

/*
 * The Bookkeeping hero draws the same pill with a plain 10px dot instead of an
 * icon (Figma node 2115:5442). It reads off the badge icon colour so a single
 * control drives whichever marker the pill is set to.
 */
.nova-super-hero__badge-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--nova-super-hero-badge-icon, #ffffff);
}

.nova-super-hero__badge-label {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-super-hero-badge-text, rgb(255 255 255 / 0.99));
}

/* ---------------------------------------------------------------------------
 * Responsive — Figma supplies desktop only; these mirror the breakpoints in
 * novabp-tax-base.css so the two tiers stay in step.
 * ------------------------------------------------------------------------ */

@media (max-width: 1366px) {
	.nova-super-hero__top {
		--nova-super-hero-columns-gap: 64px;
	}

	.nova-super-hero__pattern {
		width: 400px;
		height: 310px;
	}
}

@media (max-width: 1024px) {
	.nova-super-hero__inner {
		--nova-super-hero-gap: 40px;
	}

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

	.nova-super-hero__aside {
		gap: 32px;
	}

	.nova-super-hero__pattern {
		inset-block-start: -80px;
		inset-inline-end: -40px;
		width: 320px;
		height: 250px;
	}

	.nova-super-hero__banner {
		--nova-super-hero-banner-height: 380px;
	}

	.nova-super-hero__badges {
		gap: 16px;
		padding: 24px;
	}

	.nova-super-hero__badge-label {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.nova-super-hero__inner {
		--nova-super-hero-gap: 32px;
	}

	.nova-super-hero__pattern {
		display: none;
	}

	.nova-super-hero__banner {
		--nova-super-hero-banner-height: 300px;
	}

	/*
	 * Two pills side by side leave room for about four words each on a phone.
	 * Stacking them keeps each label on one line, and `stretch` makes the pair
	 * a consistent width instead of ragged.
	 */
	.nova-super-hero__badges {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 20px 16px;
	}

	.nova-super-hero__badge {
		justify-content: center;
		padding: 10px 20px;
	}

	.nova-super-hero__badge-icon {
		width: 24px;
		height: 24px;
	}

	.nova-super-hero__badge-label {
		font-size: 16px;
	}
}