/**
 * components/page-cta.css — Shared Bottom-of-Page CTA Section
 *
 * Replaces the near-identical .svc-cta / .tax-cta / .bsa-cta /
 * .vcfo-cta / .ca-cta / .about-cta rules that existed in each
 * page CSS file. All page CTAs now render via partials/page-cta.php.
 */

/* =====================================================
   SECTION WRAPPER
   ===================================================== */

.mjc-page-cta {
	background:  var(--gradient-hero);
	padding:     var(--space-8) 0;
	text-align:  center;
	color:       var(--color-white);
}


/* =====================================================
   CONTENT
   ===================================================== */

.mjc-page-cta__heading {
	font-family: var(--font-heading);
	font-size:   1.875rem;   /* 30px — matches previous page-specific CTAs */
	font-weight: var(--fw-bold);
	color:       var(--color-white);
	line-height: var(--lh-h3);
	margin:      0 auto;
}

.mjc-page-cta__subtext {
	font-family: var(--font-body);
	font-size:   var(--text-body-lg);
	color:       var(--color-white-muted);
	line-height: var(--lh-body-lg);
	margin:      var(--space-5) auto 0;
	max-width:   60ch;
}

.mjc-page-cta__buttons {
	display:         flex;
	justify-content: center;
	gap:             var(--space-5);
	margin-top:      var(--space-7);
	flex-wrap:       wrap;
}


/* =====================================================
   RESPONSIVE — MOBILE (768px and below)
   ===================================================== */

@media (max-width: 768px) {
	.mjc-page-cta {
		padding: var(--space-7) 0;
	}

	.mjc-page-cta__heading {
		font-size: var(--text-h3);   /* 24px on mobile */
	}

	.mjc-page-cta__subtext {
		font-size:  var(--text-body);
		margin-top: var(--space-4);
	}

	.mjc-page-cta__buttons {
		flex-direction: column;
		align-items:    center;
		gap:            var(--space-3);
		margin-top:     var(--space-6);
	}

	.mjc-page-cta__buttons .mjc-btn {
		width:     100%;
		max-width: 320px;
	}
}