/* ==========================================================================
   Home "What Our Students Say" testimonial slider
   (template-parts/home/home-testimonials.php) — a single, large split-photo
   review box that auto-advances through every testimonial, one at a time,
   swapped by assets/js/testimonial-slider.js. Builds on the shared
   .testimonial-card / .testimonial-author / .testimonial-avatar styles
   already defined in components/cta-testimonials.css.
   ========================================================================== */
/* Every review sits in the same grid cell (row 1), so the slider is always
   as tall as the longest review — the page below, including the footer, no
   longer jumps up and down each time the review changes (reviews are
   different lengths). Hidden reviews keep their space but can't be seen,
   focused or read by screen readers; the dots sit in row 2. */
.testimonial-slider {
	max-width: 940px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.testimonial-slide { grid-row: 1; grid-column: 1; visibility: hidden; }
.testimonial-slide.is-active {
	visibility: visible;
	animation: testimonial-fade-in 500ms ease;
}
/* Each card fills the shared height, so shorter reviews don't leave a gap. */
.testimonial-slider .testimonial-card { height: 100%; }
.testimonial-dots { grid-row: 2; }
@keyframes testimonial-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.testimonial-slide.is-active { animation: none; }
}

/* Big split card: photo on one side, quote on the other. */
.testimonial-slider .testimonial-card {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.testimonial-media {
	position: relative;
	min-height: 380px;
}
.testimonial-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.testimonial-media .testimonial-avatar {
	position: absolute;
	left: 20px;
	bottom: 20px;
	width: 52px;
	height: 52px;
	font-size: 1.05rem;
	border: 3px solid var(--color-surface);
	box-shadow: var(--shadow-md);
}

.testimonial-body {
	position: relative;
	padding: 52px 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.testimonial-body::before {
	content: '\201C';
	position: absolute;
	top: 8px;
	left: 30px;
	font-family: var(--font-heading);
	font-size: 6rem;
	line-height: 1;
	color: var(--color-bg-alt);
	z-index: 0;
}
.testimonial-body > * {
	position: relative;
	z-index: 1;
}
.testimonial-body p {
	font-size: 1.08rem;
	line-height: 1.75;
}
.testimonial-slider .testimonial-author {
	display: block;
	margin-top: 22px;
}
.testimonial-slider .testimonial-author strong {
	font-size: 1.05rem;
}

.testimonial-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
}
.testimonial-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--color-border);
	cursor: pointer;
	transition: background var(--transition), transform var(--transition);
}
.testimonial-dot:hover { background: var(--color-secondary); }
/* The dot stays small, but the area a finger can hit is 24px wide on
   touch screens — the dots were too small to tap reliably on phones. */
.testimonial-dot { position: relative; }
.testimonial-dot::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 24px; height: 24px;
	transform: translate(-50%, -50%);
}
.testimonial-dot.is-active { background: var(--color-secondary); transform: scale(1.3); }