/* ==========================================================================
   Call-to-action banner and testimonial cards (used on the Home page
   and at the bottom of every category/program page).
   ========================================================================== */
.cta-banner {
	background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
	border-radius: var(--radius-lg);
	padding: 60px;
	color: #fff;
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
	position: relative; overflow: hidden;
}
.cta-banner::after {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(circle at 85% 20%, rgba(217, 138, 61, 0.35), transparent 55%);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; margin-bottom: 0.3em; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta-banner p { color: #e4dfd0; margin-bottom: 0; max-width: 480px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* .btn-outline's default text is --color-primary-dark, meant for light
   backgrounds — nearly invisible against this banner's dark gradient.
   Several program pages patch this per-instance with an inline
   style="color:#fff;border-color:#fff;"; fixing it here instead so every
   .btn-outline inside a .cta-banner is legible without repeating that. */
.cta-banner .btn-outline {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
}
.cta-banner .btn-outline:hover {
	background: #fff;
	color: var(--color-primary-dark);
	border-color: #fff;
}

.testimonial-card {
	position: relative;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: 36px 32px 32px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-secondary);
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.testimonial-quote-mark {
	position: absolute; top: -6px; right: 20px;
	font-family: var(--font-heading);
	font-size: 5.5rem;
	line-height: 1;
	color: var(--color-secondary);
	opacity: 0.14;
	pointer-events: none;
}
.testimonial-card .stars { color: var(--color-secondary); letter-spacing: 2px; margin: 4px 0 14px; font-size: 0.95rem; }
.testimonial-card p { font-style: italic; color: var(--color-text); position: relative; z-index: 1; }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar {
	flex: none;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-heading); font-size: 1.2rem;
	color: #fff; font-weight: 700;
	box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 4px var(--color-border);
}
.testimonial-avatar--photo { object-fit: cover; background: var(--color-bg-alt); }
.testimonial-author strong { display: block; font-size: 0.98rem; }
.testimonial-author span { font-size: 0.8rem; color: var(--color-text-light); }

.testimonial-contact {
	margin-top: 44px;
	text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.testimonial-contact p { font-size: 1.05rem; color: var(--color-text); margin: 0; }
.testimonial-contact .btn svg { width: 18px; height: 18px; }