/* ==========================================================================
   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;
}

/* Country badge under the student's name. A pin + plain country name rather
   than a flag emoji: Windows has no flag glyphs, so emoji flags render there
   as bare letter pairs ("NP"). Inline-flex so the pin and the word never
   split across two lines. */
.testimonial-country {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	padding: 3px 11px 3px 8px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-bg-alt);
	color: var(--color-secondary);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.6;
	white-space: nowrap;
}
.testimonial-country__pin {
	width: 13px;
	height: 13px;
	flex: none;
	fill: currentColor;
}

.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); }