/**
 * NovaBP Tax Advisor — Section 1, Hero
 *
 * Figma reference: node 319:2109 — a 40px-inset photographic card (353:1818,
 * 1360x620, radius 20) under a 234deg navy gradient, with the white social
 * proof card (2019:924) floating over its lower right.
 */

/*
 * This section is an inset card, not a full-bleed band, so its padding is the
 * card frame rather than the page gutter — 40px on all four sides at the width
 * Figma draws it, which is deliberately narrower than the 80px gutter the
 * full-bleed sections use. From the tablet tier down the inline axis switches to
 * --nova-gutter-x (style.css) so the card edge lines up with every other
 * section; the block axis keeps its own smaller scale.
 */
.nova-tax-hero {
	width: 100%;
	padding: 40px;
	background-color: var(--nova-tax-white);
}

/*
 * The card is the hero's real frame: 1440 - 2x40 = 1360 at the width the design
 * was drawn at, so it runs wider than the 1280 content measure the other
 * sections use. Capping it here keeps the inset even past a 1440 viewport.
 */
.nova-tax-hero__card {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 40px;
	width: 100%;
	max-width: 1360px;
	min-height: 620px;
	margin-inline: auto;
	padding: 40px 60px;
	border-radius: 20px;

	/*
	 * Image and gradient ride on the same background shorthand so the gradient
	 * always paints above the photograph, whatever order the custom properties
	 * resolve in. `--nova-tax-hero-image` is set inline by the widget; the
	 * `none` fallback keeps the gradient alone valid when no image is picked.
	 *
	 * The overlay follows Figma node 2047:2846, the redraw that lightens the
	 * card. Its numbers are measured off the exported frame rather than read
	 * from Figma's gradient transform: that transform is expressed in the
	 * square normalised space Figma paints fills in, so converting it to a CSS
	 * angle without correcting for the card's 1360x620 aspect lands ~20deg out
	 * and starts the ramp far too early. Inverting the export against the
	 * untouched photograph gives the values used here — a flat 0.2 tint over
	 * most of the frame, ramping to solid navy only in the last stretch of the
	 * bottom-left corner (fit residual < 0.04 alpha across 374 samples).
	 *
	 * The start stop is a variable so the Elementor "Gradient Start Position"
	 * control can tune how light the photograph reads without a code change.
	 */
	background-image:
		linear-gradient(
			var(--nova-tax-hero-overlay-angle, 234deg),
			var(--nova-tax-hero-overlay-from, rgb(0 1 35 / 0.2)) var(--nova-tax-hero-overlay-start, 46%),
			var(--nova-tax-hero-overlay-to, rgb(0 1 35 / 1)) 98%
		),
		var(--nova-tax-hero-image, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.nova-tax-hero__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.nova-tax .nova-tax-hero__title {
	font-size: 52px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nova-tax-white);
}

/*
 * The copy is measured to the clear left side of the photograph rather than
 * allowed to fill the card. It has to be: since 2047:2846 lightened the overlay
 * to a flat 0.2 tint, the subject is no longer buried under navy, and anything
 * that runs past him reads over him instead of over the window behind him.
 *
 * The two caps differ because the blocks sit at different heights. Measured off
 * the 1357x619 photograph, which maps ~1:1 onto the 1360-wide card:
 *
 *   - the heading sits level with the window and his shoulder, clear until
 *     ~x780, so from the 60px card padding it can measure 700px;
 *   - the lede and button sit level with the document he is holding, which
 *     starts at ~x530, so they take 460px.
 *
 * That 460px supersedes the 600px Figma fixes on the second paragraph, and it
 * is applied to the whole lede group rather than to `--narrow` alone so the
 * first paragraph cannot run wide when its authored line break is removed. The
 * ragged two-block shape Figma reads with survives because the heading still
 * measures wider than the body.
 */
.nova-tax-hero__content .nova-tax-header {
	--nova-tax-header-max: 700px;
}

.nova-tax-hero__content .nova-tax-header__lede {
	max-width: 600px;
}

/* ---------------------------------------------------------------------------
 * Social proof card
 * ------------------------------------------------------------------------ */

/*
 * Positioned by percentage rather than the raw Figma pixel offsets so it keeps
 * its place on the photograph as the card flexes: x942 of 1360 is 69.3%, y349
 * of 620 is 56.3%.
 *
 * Those percentages address this box's TOP-LEFT corner, matching how Figma
 * reports `locationRelativeToParent`. There is deliberately no
 * `translate(-50%, -50%)` here — centring the box on that point moved it ~165px
 * left and ~110px up from where the design puts it.
 */
.nova-tax-hero__stat {
	position: absolute;
	inset-block-start: 56.3%;
	inset-inline-start: 69.3%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: max-content;
	max-width: 340px;
	padding: 16px 24px 24px;
	background-color: var(--nova-tax-white);
	border: 6px solid rgb(255 255 255 / 0.2);
	border-radius: 16px;

	/*
	 * The 6px ring is drawn outside the white body in Figma. `background-clip`
	 * stops the white background bleeding under the translucent border, which
	 * would otherwise render it opaque and lose the frosted edge.
	 */
	background-clip: padding-box;
}

.nova-tax-hero__stat-figure {
	display: flex;
	flex-direction: column;
}

.nova-tax-hero__stat-value {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--nova-tax-heading);
}

.nova-tax-hero__stat-label {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-heading);
}

/* 1px hairline that fades out at both ends — Figma 2019:933 at 30% opacity. */
.nova-tax-hero__stat-rule {
	display: block;
	width: 100%;
	height: 1px;
	background-image: linear-gradient(
		90deg,
		rgb(2 15 50 / 0) 0%,
		rgb(2 15 50 / 1) 50%,
		rgb(2 15 50 / 0) 100%
	);
	opacity: 0.3;
}

.nova-tax-hero__stat-proof {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.nova-tax-hero__avatars {
	display: flex;
	align-items: center;
}

.nova-tax-hero__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	overflow: hidden;
	background-color: var(--nova-tax-surface);
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 100px;
}

/*
 * Figma sets a -12px gap on the row. A negative flex gap is invalid, so the
 * overlap is applied as a negative margin on every avatar after the first —
 * same result, and the leading edge stays flush with the rule above.
 */
.nova-tax-hero__avatar + .nova-tax-hero__avatar {
	margin-inline-start: -12px;
}

.nova-tax-hero__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nova-tax-hero__avatar--badge {
	background-color: var(--nova-tax-green);
	border-color: var(--nova-tax-white);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--nova-tax-white);
}

/* Figma node 2047:2869 — a 16px Plus centred in the 36px disc. */
.nova-tax-hero__badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}

.nova-tax-hero__badge-icon svg {
	width: 100%;
	height: 100%;
}

.nova-tax-hero__rating {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nova-tax-hero__stars {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--nova-tax-green);
}

.nova-tax-hero__star {
	width: 14px;
	height: 14px;
}

/*
 * The shipped star is a stroked outline, but Figma draws these five as solid
 * green (2019:1208-1212 are STAR nodes with a Secondary/500 fill). Filling the
 * path here rather than editing star.svg keeps the outline version available to
 * anything else that picks the same icon.
 */
.nova-tax-hero__star svg path {
	fill: currentColor;
}

.nova-tax-hero__reviews {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--nova-tax-heading);
}

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

/*
 * The proof card stops floating at 1280px rather than waiting for 768px. Its
 * position is a percentage of the card, so as the card narrows the box keeps
 * sliding toward the right padding while the headline beside it grows taller —
 * below 1280 that leaves it crowding the card edge and sitting over the copy.
 *
 * Returning it to the flow needs the card stacked as well: the stat is the
 * card's only other child, and in the row layout `position: static` would set it
 * beside the copy rather than under it. This is the same treatment 767px used to
 * introduce, moved up; the 767 block below now only carries what is specific to
 * phone width.
 */
@media (max-width: 1280px) {
	.nova-tax-hero__card {
		flex-direction: column;
		gap: 32px;
	}

	.nova-tax-hero__stat {
		position: static;
		width: 100%;
		max-width: none;
	}

	/*
	 * The copy caps deliberately do NOT release here. Stacking makes the card
	 * much taller than the photograph's 2.19 aspect, so `cover` crops the sides
	 * and walks the subject further left, not right — at a 1200x800 card his
	 * document lands around x407 instead of x530. Widening the measure at this
	 * tier would put text over him sooner than it does on desktop.
	 */
}

@media (max-width: 1024px) {
	.nova-tax-hero {
		padding: 24px var(--nova-gutter-x);
	}

	.nova-tax-hero__card {
		min-height: 520px;
		padding: 40px;
	}

	.nova-tax .nova-tax-hero__title {
		font-size: 40px;
	}

	/*
	 * Only the padding tightens here. The 300px cap this rule used to carry was
	 * sized for the floating box; from 1280px down the stat is in the flow and
	 * spans the card, so a cap would just strand it against the left edge.
	 */
	.nova-tax-hero__stat {
		padding: 12px 20px 20px;
	}

	.nova-tax-hero__stat-value {
		font-size: 30px;
	}

	.nova-tax-hero__lede--narrow {
		max-width: 400px;
	}
}

/*
 * The card already stacks by this width — see the 1280px block. What phone width
 * adds is dropping the 620px floor, which at this size only pads the card out
 * below its own content.
 */
@media (max-width: 767px) {
	.nova-tax-hero {
		padding: 16px var(--nova-gutter-x);
	}

	.nova-tax-hero__card {
		min-height: 0;
		padding: 32px 24px;
	}

	.nova-tax .nova-tax-hero__title {
		font-size: 32px;
	}
}