/* ==========================================================================
   NovaBP Related Articles Component Styles
   Matching Figma 314:8614 (Single Blog Post — Related Articles + Bottom CTA)
   ========================================================================== */

.nova-related {
	display: flex;
	flex-direction: column;
	gap: 48px;
	width: 100%;

	/* A full-bleed band, so both axes come straight from the shared gutter
	   tokens (style.css): 80/80 desktop, 64/40 tablet, 48/16 mobile. */
	padding: var(--nova-gutter-y) var(--nova-gutter-x);
	box-sizing: border-box;
	background-color: #F5F6F8;
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Shared 1280px content column. The section keeps its full-bleed grey
   background; the header, card grid and CTA band are each capped and centred
   inside it. */
.nova-related > * {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* --- Shared: eyebrow + buttons --- */
.nova-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #09A500;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
/* The design system's tick glyph, not a drawn rectangle. It is 3.5x11 in Figma
   and carries its own 2px round stroke, so the box only has to give it room —
   no width/height on the SVG — and the colour comes from `currentColor`. */
.nova-eyebrow__bar {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	width: 4px;
	height: 11px;
	color: #09A500;
}
.nova-eyebrow__bar svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* `.nova-related` prefix on every link and heading rule below: the Elementor
   kit ships `.elementor-kit-N a { color: … }` and `.elementor-kit-N h2 / h3
   { font: Lato 900 capitalize … }`, which outrank a lone class and would
   otherwise repaint the buttons navy and re-typeset the headings. */
.nova-related .nova-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .2s ease;
}
.nova-related .nova-btn:hover,
.nova-related .nova-btn:focus-visible {
	filter: brightness(1.15);
}
.nova-related .nova-btn svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.nova-related .nova-btn--primary {
	height: 52px;
	padding: 0 24px;
	background-color: #021137;
	color: #FFFFFF;
}
.nova-related .nova-btn--secondary {
	height: 52px;
	padding: 12px 24px;
	background-color: #09A500;
	color: #FFFFFF;
}
.nova-related .nova-btn--primary:hover,
.nova-related .nova-btn--primary:focus-visible,
.nova-related .nova-btn--secondary:hover,
.nova-related .nova-btn--secondary:focus-visible {
	color: #FFFFFF;
}

/* --- Section header --- */
.nova-related__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
}
.nova-related__head-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}
.nova-related .nova-related__title {
	margin: 0;
	color: #021137;
	font-family: inherit;
	font-size: 52px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

/* --- Cards grid ---
   `nova-rcard`, not `nova-card`: the blog listing owns `.nova-card*` in
   novabp-blog.css, which the single-post page also loads (novabp-post-hero
   depends on it). Same names at the same specificity meant the listing's own
   hover-reveal `.nova-card__arrow` rules won and clobbered these. */
.nova-related__grid {
	display: flex;
	align-items: stretch;
	gap: 24px;
}
.nova-rcard {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	border: 1px solid #DEE3EE;
	border-radius: 20px;
	background-color: #FFFFFF;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}
/* Hover skin — the blue gradient wash + gradient border. Painted by a
   pseudo-element rather than swapping `background-image`/`border-color` on the
   card itself: gradients don't interpolate, so a direct swap snaps, and the
   card's own border/background are driven by Elementor style controls that
   would then have to be overridden. `inset: -1px` makes the overlay cover the
   1px border too, so the grey resting border disappears under it. */
.nova-rcard::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 0;
	border: 1px solid transparent;
	border-radius: 21px;
	background-image:
		linear-gradient(180deg, #D7E1F6 0%, #FFFFFF 100%),
		linear-gradient(180deg, #96B5F9 0%, #DBE5FA 100%);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}
.nova-rcard > * {
	position: relative;
	z-index: 1;
}
.nova-rcard:hover,
.nova-rcard:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(2, 17, 55, .08);
}
.nova-rcard:hover::before,
.nova-rcard:focus-visible::before {
	opacity: 1;
}
.nova-rcard__media {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	height: 240px;
	padding: 16px;
	border-radius: 16px;
	background-color: #DEE3EE;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.nova-rcard__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 16px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	color: #021137;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}
/* Revealed with the hover skin above. Kept in the DOM (not toggled with
   `display`) so the pill above it never reflows on hover. */
.nova-rcard__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 100px;
	background-color: #FFFFFF;
	opacity: 0;
	transform: translateY(-4px) scale(.92);
	transition: opacity .25s ease, transform .25s ease;
}
.nova-rcard:hover .nova-rcard__arrow,
.nova-rcard:focus-visible .nova-rcard__arrow {
	opacity: 1;
	transform: none;
}
.nova-rcard__arrow svg {
	width: 24px;
	height: 24px;
	fill: #021137;
}
.nova-rcard__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 12px;
}
.nova-rcard__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #35415F;
	opacity: .8;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}
.nova-rcard__dot {
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #C2C6CF;
}
.nova-rcard__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.nova-related .nova-rcard__title {
	margin: 0;
	color: #020F32;
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}
.nova-rcard__excerpt {
	margin: 0;
	color: #35415F;
	opacity: .8;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

/* --- Bottom CTA --- */
.nova-related__cta {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px 0;
}
.nova-cta-card {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 60px;
	width: 100%;
	max-width: 1080px;
	padding: 60px;
	box-sizing: border-box;
	border: 1px solid #DEE3EE;
	border-radius: 28px;

	/*
	 * Figma declares this fill as `linear-gradient(180deg, #020E2F 22%, #062C95
	 * 100%)`, but that 100% is the end of the *gradient handle*, which runs well
	 * past the bottom of the card — the card only ever shows the first ~48% of
	 * the ramp. Taking the declared stops literally makes the bottom of the card
	 * far bluer than the design: sampling Figma's own render of node 2284:13489
	 * (and of the original card, node 314:8614, which is identical) gives #041C60
	 * at the bottom edge, not #062C95.
	 *
	 * So the end stop is the colour the ramp has actually reached where the card
	 * ends. The two stops are custom properties because `Nova_Cta_Card_Widget`
	 * exposes them as per-instance Elementor controls — the single-post Related
	 * Articles CTA, which has no such controls, takes these defaults.
	 */
	background-image: linear-gradient(
		180deg,
		var(--nova-cta-card-bg-from, #020E2F) 22%,
		var(--nova-cta-card-bg-to, #041C60) 100%
	);
}
/*
 * Two oversized logo marks bleeding off opposite corners of the card. Both are
 * the same 640x448 export in the brand green at 5% opacity — the opacity is
 * baked into the SVG — so it ships as one asset painted as two background
 * layers rather than two identical files. The card's `overflow: hidden` crops
 * the bleed.
 *
 * The offsets come from the design's 1080x430 card: the top-left mark sits at
 * x=-388, y=-145, and the bottom-right one at x=587, y=220, which clears the
 * right edge by 147px. That second mark is anchored to the bottom rather than
 * to Figma's top so it stays in the corner when the live card runs taller than
 * the design's — the same reasoning as the tax contact watermark.
 */
.nova-cta-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		url("../images/cta-watermark.svg"),
		url("../images/cta-watermark.svg");
	background-repeat: no-repeat;
	background-position: left -388px top -145px, right -147px bottom -238px;
	background-size: 640px 448px;
	pointer-events: none;
}
.nova-cta-card__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	width: 100%;
	max-width: 800px;
}
.nova-cta-card__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}
.nova-cta-card__head-top {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.nova-related .nova-cta-card__title {
	margin: 0;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 40px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: -0.02em;
	text-transform: none;
	text-align: center;
}
.nova-cta-card__desc {
	margin: 0;
	color: #FFFFFF;
	opacity: .8;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
	.nova-related .nova-related__title {
		font-size: 40px;
	}
	.nova-cta-card {
		padding: 48px 32px;
	}
}
@media (max-width: 1024px) {
	.nova-related__grid {
		flex-wrap: wrap;
	}
	.nova-rcard {
		flex: 1 1 calc(50% - 12px);
	}
}
@media (max-width: 767px) {
	.nova-related {
		gap: 32px;
	}
	.nova-related__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.nova-related .nova-related__title {
		font-size: 30px;
	}
	.nova-related__grid {
		flex-direction: column;
	}
	.nova-rcard {
		flex: 1 1 auto;
	}
	.nova-related__cta {
		padding: 24px 0 0;
	}
	.nova-cta-card {
		padding: 32px 20px;
		border-radius: 20px;
	}
	.nova-cta-card::after {
		background-position: left -233px top -87px, right -88px bottom -143px;
		background-size: 384px 269px;
	}
	.nova-related .nova-cta-card__title {
		font-size: 28px;
	}
	.nova-cta-card__desc {
		font-size: 16px;
	}
	/* A label like "Schedule My Free Health Check" is wider at 18px/nowrap than
	   the card is at 390px, so it ran off the screen. On mobile the button stops
	   sizing to its label: it fills the card, wraps onto a second line when it
	   still has to, and grows in height rather than overflowing. */
	.nova-related .nova-cta-card__inner > .nova-btn,
	.nova-related .nova-cta-card__action {
		align-self: stretch;
	}
	.nova-related .nova-cta-card .nova-btn {
		width: 100%;
		height: auto;
		min-height: 52px;
		padding: 12px 20px;
		font-size: 16px;
		white-space: normal;
		text-align: center;
	}
}