/**
 * NovaBP Tax Planning — Our Comprehensive Tax Planning Service Offerings
 *
 * A centred header capped at 800px, a row of pill tabs, and under the selected
 * tab a green intro line above a three-column grid of photo cards. Each tab
 * closes on the navy gradient call to action, drawn either as a tall card
 * inside the grid (tab 1) or as a full-width band under it (tabs 2 and 3).
 *
 * Depends on `novabp-tax-base` for tokens and the eyebrow / heading / lede /
 * button primitives.
 *
 * Figma reference: node 2284:12789 (tab 1), 2284:13577 (tab 2), 2284:13664
 * (tab 3) — pill group 2292:14257, tall CTA card 2284:12844, band 2284:13657
 */

.nova-plan-services__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-plan-services-gap, 60px);
}

/*
 * Figma fixes the header column at 800px inside the 1280 measure. `max-width`
 * rather than `width` so it still collapses cleanly on a narrow viewport.
 */
.nova-plan-services__header {
	--nova-tax-header-max: 800px;
}

.nova-plan-services__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-plan-services-body-gap, 60px);
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Tabs
 *
 * Free-standing pills rather than pills inside a track — the design gives them
 * no shared background, only a 16px gap. They wrap on a narrow viewport, which
 * is why the row is a flex `wrap` rather than a grid: the three labels are very
 * different lengths and a grid would pad the short ones out to match.
 * ------------------------------------------------------------------------ */

.nova-plan-services__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	max-width: 100%;
}

/*
 * Scoped through `.nova-plan-services` and restating font/appearance for the
 * same reason the base sheet's buttons do: the Elementor Global Kit styles bare
 * `button` with its own family, background and padding.
 */
.nova-plan-services .nova-plan-services__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 12px 24px;
	border: 0;
	border-radius: 100px;
	background-color: var(--nova-plan-services-tab-bg, #f5f6f8);
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	color: var(--nova-plan-services-tab-color, #020f32);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nova-plan-services .nova-plan-services__tab:hover {
	background-color: var(--nova-plan-services-tab-hover-bg, #e8eaf0);
}

.nova-plan-services .nova-plan-services__tab.is-active {
	background-color: var(--nova-plan-services-tab-active-bg, #021137);
	color: var(--nova-plan-services-tab-active-color, #ffffff);
}

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

.nova-plan-services__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
}

/* `hidden` is a display:none the flex rule above would otherwise beat. */
.nova-plan-services__panel[hidden] {
	display: none;
}

/*
 * A sentence introducing the tab, not a section label — so it prints as a
 * paragraph and the card titles below it stay the panel's first heading level.
 */
.nova-plan-services__intro {
	margin: 0;
	max-width: 1280px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: var(--nova-tax-green);
}

/*
 * Figma draws each tab as explicit rows of three. One grid produces the same
 * result, reflows on its own as the column count drops, and does not strand a
 * half-empty row when an editor adds or removes a card.
 */
.nova-plan-services__grid {
	display: grid;
	grid-template-columns: repeat(var(--nova-plan-services-columns, 3), minmax(0, 1fr));
	gap: var(--nova-plan-services-grid-gap, 24px);
	align-items: stretch;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Service cards
 * ------------------------------------------------------------------------ */

.nova-plan-services__card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	border: 1px solid var(--nova-plan-services-card-border, #dee3ee);
	border-radius: 20px;
	background-color: var(--nova-plan-services-card-bg, #ffffff);
}

/*
 * The photo is a background rather than an `<img>` because the design crops it
 * to a fixed plate. The widget's alt field prints as `.nova-tax-sr-only` text
 * inside the plate instead.
 *
 * The URL arrives as a custom property rather than an inline `background-image`
 * because WP Rocket's lazyload rewrites the latter into `data-bg` and hands the
 * restore to its own observer, which never runs for an element it did not also
 * mark — hence `data-skip-lazy` in the markup.
 */
.nova-plan-services__card-media {
	position: relative;
	min-height: var(--nova-plan-services-media-height, 220px);
	border-radius: 16px;
	background-color: #f7f7f7;
	background-image: var(--nova-plan-services-media);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.nova-plan-services__card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 12px;
}

.nova-plan-services .nova-plan-services__card-title {
	font-family: var(--nova-tax-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-heading);
}

.nova-plan-services__card-copy {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-body);
}

/* ---------------------------------------------------------------------------
 * Call to action
 *
 * One block, two shapes. `--card` takes a grid slot beside the services and
 * stacks its parts; `--band` runs the full width under the grid as a row. The
 * gradient, the pills and the button are identical in both.
 * ------------------------------------------------------------------------ */

.nova-plan-services__cta {
	position: relative;
	display: flex;
	overflow: hidden;
	border-radius: 16px;
	background-image: linear-gradient(
		var(--nova-plan-services-cta-angle, 146deg),
		var(--nova-plan-services-cta-from, #021137) var(--nova-plan-services-cta-from-stop, 0%),
		var(--nova-plan-services-cta-to, #06319d) var(--nova-plan-services-cta-to-stop, 100%)
	);
}

.nova-plan-services__cta--card {
	/*
	 * Measured off the Figma export of node 2284:12844 rather than taken from
	 * its gradient transform, for the reason the wash file documents: sampling
	 * the render along a 161deg axis shows #021137 holding flat to 26% and the
	 * ramp still short of #06319d at the card's far corner, which puts that
	 * stop past the end of the gradient line. The band variant keeps the old
	 * 146deg / 0-100% — its Figma frame is a different, much wider box.
	 */
	--nova-plan-services-cta-angle: 161deg;
	--nova-plan-services-cta-from-stop: 26%;
	--nova-plan-services-cta-to-stop: 116%;

	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 40px 28px;
	text-align: center;
}

.nova-plan-services__cta--band {
	align-items: center;
	gap: 60px;
	width: 100%;
	padding: 32px;
}

/*
 * The halftone Figma calls "Union", drawn inside the tall card at 20% and
 * bleeding past its right edge — hence `overflow: hidden` on the card.
 * Decorative, so it is `aria-hidden` in the markup and ignores pointer events
 * here.
 *
 * The 20% lives here and nowhere else. The Figma export bakes the same node
 * opacity into the artwork, so a file that still carries it lands at 0.04 and
 * reads as a blank card — `tax-planning/union-glow-white.svg` has it stripped.
 */
.nova-plan-services__cta-wash {
	position: absolute;
	/*
	 * Figma node 2284:12846 puts the wash at x123 / y73 of the card. An
	 * absolutely positioned box resolves its offsets against the padding box —
	 * which starts at the card's outer edge, not inside its 40/28 padding — so
	 * these are the design's numbers unchanged. The earlier 55/33 pulled the
	 * artwork up and left, taking its bright lower-right corner out of view.
	 */
	inset-block-start: 73px;
	inset-inline-start: 123px;
	z-index: 0;
	width: 480px;
	height: 369px;
	opacity: 0.2;
	background-image: var(--nova-plan-services-wash, none);
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.nova-plan-services__cta-stack {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* The card's copy grows into the space above the button, which keeps the
 * button on the card's bottom edge however tall the grid row gets. */
.nova-plan-services__cta--card .nova-plan-services__cta-stack {
	flex: 1 1 auto;
	align-items: center;
	align-self: stretch;
	padding-block-start: 20px;
}

.nova-plan-services__cta--band .nova-plan-services__cta-stack {
	flex: 1 1 auto;
	gap: 12px;
}

.nova-plan-services__cta-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nova-plan-services__cta--card .nova-plan-services__cta-head {
	align-items: center;
}

.nova-plan-services .nova-plan-services__cta-title {
	font-family: var(--nova-tax-font);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--nova-tax-white);
}

.nova-plan-services__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nova-plan-services__cta--card .nova-plan-services__chips {
	justify-content: center;
}

.nova-plan-services__chip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	border-radius: 100px;
	background-color: var(--nova-plan-services-chip-bg, rgb(255 255 255 / 0.1));
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-plan-services-chip-color, #ffffff);
}

.nova-plan-services__chip-icon {
	width: 20px;
	height: 20px;
}

.nova-plan-services .nova-plan-services__cta-btn {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
}

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

@media (max-width: 1200px) {
	.nova-plan-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nova-plan-services__inner {
		--nova-plan-services-gap: 48px;
		--nova-plan-services-body-gap: 40px;
	}

	.nova-plan-services .nova-plan-services__tab {
		min-height: 48px;
		padding: 10px 20px;
		font-size: 18px;
	}

	.nova-plan-services__intro {
		font-size: 20px;
	}

	.nova-plan-services .nova-plan-services__card-title {
		font-size: 20px;
	}

	.nova-plan-services__card-copy {
		font-size: 16px;
	}

	.nova-plan-services__cta--band {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.nova-plan-services .nova-plan-services__cta-title {
		font-size: 26px;
	}
}

@media (max-width: 767px) {
	.nova-plan-services__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 500px;
    	margin: 0 auto;
	}

	.nova-plan-services__chips {
		flex-direction: column;
	}

	.nova-plan-services__inner {
		--nova-plan-services-gap: 40px;
		--nova-plan-services-body-gap: 32px;
	}

	.nova-plan-services .nova-plan-services__tab {
		font-size: 16px;
	}

	.nova-plan-services__cta--card {
		padding: 28px 20px;
	}

	.nova-plan-services__cta--band {
		padding: 24px;
	}

	.nova-plan-services .nova-plan-services__cta-title {
		font-size: 22px;
	}

	.nova-plan-services__cta-wash {
		inset-inline-start: 0;
		width: 100%;
	}
}