/**
 * NovaBP Tax Planning — Why Clients Trust Us
 *
 * Section 7 of the Tax Planning page: a centred header, the testimonial slider,
 * a hairline rule, and a two-column certifications block.
 *
 * The slider itself is *not* restyled here. Its markup carries the
 * `nova-testimonials__*` classes and `novabp-testimonials.css` already draws it
 * to the same measurements this frame uses — 160px thumbs, a 404px card with a
 * 4px border and 24px radius, a 6x320 scrollbar. This file only supplies the
 * shell those three blocks sit in.
 *
 * Depends on `novabp-tax-base` for the tokens and the eyebrow / heading / lede
 * primitives, and on `novabp-testimonials` for the slider.
 *
 * Figma reference: node 2284:12725 (slider 2284:12735, certifications 2284:12770)
 */

.nova-plan-trust__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-plan-trust-gap, 80px);
}

.nova-plan-trust__header {
	--nova-tax-header-max: 800px;
}

/*
 * The lede here is Text/Text Body rather than the 80% navy the shared primitive
 * defaults to.
 */
.nova-plan-trust .nova-tax-lede {
	color: var(--nova-plan-trust-lede, var(--nova-tax-body));
}

/*
 * Figma insets the slider and the certifications row 180px inside the 1440
 * frame, which is a 1080px measure — narrower than the 1280 the section itself
 * is capped at. Both rows carry it, so the two stay in the same column.
 */
.nova-plan-trust__slider-wrap,
.nova-plan-trust__rule,
.nova-plan-trust__certs {
	width: 100%;
	max-width: var(--nova-plan-trust-row-max, 1080px);
	margin-inline: auto;
}

.nova-plan-trust__rule {
	height: 1px;
	background-color: var(--nova-tax-border);
}

/* ---------------------------------------------------------------------------
 * Certifications & credentials
 * ------------------------------------------------------------------------ */

.nova-plan-trust__certs {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--nova-plan-trust-certs-gap, 60px);
}

/*
 * Fixed at 400px rather than a share of the row: the heading breaks after
 * "Certifications" by design, and a proportional column would move that break
 * around as the row width changes.
 */
.nova-plan-trust__certs-intro {
	display: flex;
	flex: 0 0 var(--nova-plan-trust-intro-width, 400px);
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	max-width: 100%;
}

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

/*
 * Header/xl/Semibold. Two-class scope and the explicit font-family /
 * text-transform for the same reason `novabp-tax-base` does it on its headings:
 * the Elementor Global Kit styles bare `h2`/`h3`, which outranks a lone class
 * and would impose Lato and Title Case.
 */
.nova-plan-trust .nova-plan-trust__certs-title {
	font-family: var(--nova-tax-font);
	font-size: var(--nova-plan-trust-certs-title-size, 40px);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--nova-plan-trust-certs-title, var(--nova-tax-heading));
}

.nova-plan-trust__certs-lede {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-plan-trust-lede, var(--nova-tax-body));
}

.nova-plan-trust__cert-list {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: var(--nova-plan-trust-cert-gap, 12px);
	min-width: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

/*
 * Figma fills the row with a white → 15%-white gradient and strokes it with a
 * matching stroke → transparent gradient, so the pill fades out to the right
 * against the section's Base/BG ground. A border cannot take a gradient
 * directly; painting the fill into the padding box and the stroke into the
 * border box over a transparent 1px border gets both, and keeps the radius.
 */
.nova-plan-trust__cert {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	padding: var(--nova-plan-trust-cert-padding, 20px 24px);
	border: 1px solid transparent;
	border-radius: var(--nova-plan-trust-cert-radius, 20px);
	background:
		linear-gradient(
			90deg,
			var(--nova-plan-trust-cert-bg, var(--nova-tax-white)) 0%,
			rgb(255 255 255 / 0.15) 100%
		) padding-box,
		linear-gradient(
			90deg,
			var(--nova-plan-trust-cert-border, var(--nova-tax-border)) 0%,
			rgb(222 227 238 / 0) 100%
		) border-box;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

/*
 * The same lift the slider thumbs use, so the two halves of the section feel
 * like one component rather than a static list under an interactive one.
 */
.nova-plan-trust__cert:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgb(2 15 50 / 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.nova-plan-trust__cert {
		transition: none;
	}

	.nova-plan-trust__cert:hover {
		transform: none;
	}
}

/*
 * A 60px square with `contain`: the three marks are all differently
 * proportioned bitmaps and Figma sits each inside the same box rather than
 * stretching it.
 */
.nova-plan-trust__cert-logo {
	display: block;
	flex: 0 0 auto;
	width: var(--nova-plan-trust-logo-size, 60px);
	height: var(--nova-plan-trust-logo-size, 60px);
	object-fit: contain;
}

/* Header/sm/Semibold. */
.nova-plan-trust__cert-label {
	font-size: var(--nova-plan-trust-cert-label-size, 24px);
	font-weight: 600;
	line-height: 1.5;
	color: var(--nova-plan-trust-cert-label, var(--nova-tax-heading));
}

/* ---------------------------------------------------------------------------
 * 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-plan-trust__inner {
		--nova-plan-trust-gap: 64px;
	}
}

@media (max-width: 1024px) {
	.nova-plan-trust__inner {
		--nova-plan-trust-gap: 48px;
	}

	/*
	 * A 400px intro beside the pills leaves the labels roughly 200px, which
	 * wraps "SMSF Specialist Advisors" onto three lines. The intro goes back on
	 * top and the pills take the full measure.
	 */
	.nova-plan-trust__certs {
		flex-direction: column;
		align-items: stretch;
		--nova-plan-trust-certs-gap: 32px;
	}

	.nova-plan-trust__certs-intro {
		--nova-plan-trust-intro-width: auto;
	}

	.nova-plan-trust {
		--nova-plan-trust-certs-title-size: 32px;
	}
}

@media (max-width: 767px) {
	.nova-plan-trust__inner {
		--nova-plan-trust-gap: 40px;
	}

	.nova-plan-trust {
		--nova-plan-trust-certs-title-size: 26px;
		--nova-plan-trust-cert-padding: 16px;
		--nova-plan-trust-logo-size: 48px;
		--nova-plan-trust-cert-label-size: 18px;
	}

	.nova-plan-trust__certs-lede {
		font-size: 16px;
	}

	.nova-plan-trust__cert {
		gap: 12px;
	}
}