/* final-cta.css — Final CTA section component
 *
 * HTML: .final-cta > .container > .final-cta__inner >
 *   h2.final-cta__headline
 *   p.final-cta__subheadline
 *   .final-cta__actions (.btn--primary + .btn--secondary)
 *
 * Used at the bottom of every page.
 * Dark green background, centered layout, gold accents.
 */

/* ─── Section wrapper ───────────────────────────────────── */

.final-cta {
	background-color: var(--green-dark);
	padding: var(--space-xl) 0;
	position: relative;
	overflow: hidden;
	text-align: center;
}

/* Radial gradient decoration */
.final-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		ellipse 80% 50% at 50% 100%,
		rgba(200, 169, 106, 0.08) 0%,
		transparent 70%
	);
	pointer-events: none;
}

/* ─── Inner content (constrained width) ─────────────────── */

.final-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ─── Headline ──────────────────────────────────────────── */

.final-cta__headline {
	font-family: var(--font-serif);
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 600;
	color: var(--white);
	line-height: 1.1;
	margin-bottom: 1rem;
}

.final-cta__headline em {
	font-style: italic;
	color: var(--gold);
}

/* ─── Subheadline ───────────────────────────────────────── */

.final-cta__subheadline {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 300;
	color: rgba(247, 247, 245, 0.6);
	line-height: 1.75;
	margin-bottom: 2.5rem;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

/* ─── Actions ───────────────────────────────────────────── */

.final-cta__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Ghost button override for dark background context */
.final-cta__actions .btn--secondary,
.final-cta__actions .btn--ghost {
	background-color: transparent;
	color: rgba(247, 247, 245, 0.8);
	border-color: rgba(247, 247, 245, 0.2);
}

.final-cta__actions .btn--secondary:hover,
.final-cta__actions .btn--ghost:hover {
	border-color: var(--gold);
	color: var(--gold);
}

/* ─── Responsive ────────────────────────────────────────── */

@media ( max-width: 640px ) {

	.final-cta {
		padding: var(--space-lg) 0;
	}

	.final-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.final-cta__actions .btn {
		width: 100%;
		text-align: center;
	}
}