/**
 * NovaBP Home — Hero
 *
 * Section 1 of the Home page: a 640px copy column beside a 580px block of three
 * panels — a navy credential card over a portrait and a green statistic.
 *
 * Built on `novabp-tax-base` for the section shell, header stack and button.
 *
 * Figma reference: NOVABP - Landing Page (Copy), node 3:2982
 * — copy 15:6350, card 37:2883, accent 37:2888, portrait 37:2890,
 *   statistic 37:2908, watermark 16:8509.
 */

.nova-home-hero {
	--nova-home-hero-panel-height: 560px;

	position: relative;
	overflow: hidden;
}

/*
 * The watermark bleeds off the top left of the section, so it is measured
 * against the section box and clipped by the `overflow: hidden` above rather
 * than being sized to fit. `z-index: 0` keeps it under the inner measure, which
 * takes a stacking context of its own below.
 *
 * Unlike the other section watermarks (`cta-watermark.svg`,
 * `audience-watermark.svg`), `hero-watermark.svg` ships fully opaque — the fade
 * lives here and in the widget's Watermark Opacity control so authors can tune
 * it. Don't bake `opacity` back into the asset: the two multiply and the mark
 * disappears (0.04 x 0.04).
 */
.nova-home-hero__watermark {
	position: absolute;
	z-index: 0;
	inset-block-start: -107px;
	inset-inline-start: -161px;
	width: 781px;
	height: 537px;
	background-image: var(--nova-home-hero-watermark, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.04;
	pointer-events: none;
}

.nova-home-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 60px;
}

.nova-home-hero__copy {
	flex: 0 1 640px;
	min-width: 0;
}

/*
 * Figma draws the standfirst as Header/sm/Bold — 24/1.5/700 in the heading
 * colour — sitting inside the lede group above the body copy, so it is a
 * paragraph rather than a heading tag: it repeats the headline's claim and
 * would only add noise to the document outline.
 */
.nova-home-hero__subheading {
	font-family: var(--nova-tax-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--nova-tax-heading);
}

/* ---------------------------------------------------------------------------
 * Panels
 * ------------------------------------------------------------------------ */

.nova-home-hero__panels {
	display: flex;
	flex: 0 1 580px;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	min-width: 0;
	height: var(--nova-home-hero-panel-height);
}

.nova-home-hero__card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 24px;
	overflow: hidden;
	border-radius: 16px;
	background-color: var(--nova-tax-primary);
}

.nova-home-hero__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

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

.nova-home-hero__card-subtitle {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.7);
}

/*
 * Figma pins the mark at x449 inside a 580px card — 28px shy of the padding
 * box on the right. An inline-end inset holds that relationship when the card
 * narrows, where a left offset would drift into the copy.
 */
.nova-home-hero__accent {
	position: absolute;
	inset-block-start: 32px;
	inset-inline-end: 28px;
	width: 103px;
	height: 64px;
	background-image: var(--nova-home-hero-accent, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.nova-home-hero__lower {
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	gap: 16px;
	min-height: 0;
}

.nova-home-hero__portrait {
	position: relative;
	flex: 0 1 316px;
	min-width: 0;
	border-radius: 16px;
	background-color: #f7f7f7;
	background-image: var(--nova-home-hero-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.nova-home-hero__stat {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: 40px 28px;
	border-radius: 16px;
	background-color: #35a82f;
	min-width: 160px;
}

.nova-home-hero__stat-value {
	font-family: var(--nova-tax-font);
	font-size: 60px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: rgb(255 255 255 / 0.99);
}

.nova-home-hero__stat-label {
	font-family: var(--nova-tax-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.99);
}

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

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

	.nova-home-hero__copy,
	.nova-home-hero__panels {
		flex-basis: 50%;
	}

	.nova-home-hero__card-title {
		font-size: 28px;
	}

	.nova-home-hero__stat-value {
		font-size: 48px;
	}

	.nova-home-hero__stat-label {
		font-size: 22px;
	}
}

@media (max-width: 1024px) {

	/*
	 * The pair stacks below the tablet break. The panel column gives up its
	 * fixed height here rather than at the mobile break, because two columns of
	 * panels at half width already run taller than 480px.
	 */
	.nova-home-hero__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.nova-home-hero__copy,
	.nova-home-hero__panels {
		flex-basis: auto;
	}

	.nova-home-hero {
		--nova-home-hero-panel-height: auto;
	}

	.nova-home-hero__lower {
		min-height: 320px;
	}

	.nova-home-hero__subheading {
		font-size: 22px;
	}
}

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

	.nova-home-hero__card {
		flex-direction: column;
		padding: 20px;
	}

	/*
	 * The mark sits over the corner of a card that is now much shorter, where it
	 * would land on the title. It is decorative, so it goes.
	 */
	.nova-home-hero__accent {
		display: none;
	}

	.nova-home-hero__lower {
		flex-direction: column;
		min-height: 0;
	}

	.nova-home-hero__portrait {
		flex-basis: auto;
		min-height: 260px;
	}

	.nova-home-hero__stat {
		gap: 8px;
		padding: 24px 20px;
	}

	.nova-home-hero__card-title,
	.nova-home-hero__stat-value {
		font-size: 36px;
	}

	.nova-home-hero__card-subtitle,
	.nova-home-hero__stat-label {
		font-size: 18px;
	}

	.nova-home-hero__subheading {
		font-size: 20px;
	}

	.nova-home-hero__watermark {
		inset-block-start: -60px;
		inset-inline-start: -120px;
		width: 480px;
		height: 330px;
	}
}