/* ---------- a11y helper ---------- */
.testimonials-section .vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.testimonials-section .wrap {
	padding: 0 20px;
}

/* ---------- grid & layout ---------- */
.testimonials-section .testimonial-row {
	position: relative;
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: start;
	/* final computed gap */
	column-gap: 3rem;
	/* keep dots/button from shifting */
	width: 100%;
	margin-top: 2rem;
}

/* ---------- profile column ---------- */
.testimonials-section .profile {
	text-align: center;
}

.testimonials-section .avatar {
	width: 200px;
	height: 200px;
	margin: 0 auto 16px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff top center/cover no-repeat;
	box-shadow: inset 0 2px 16px rgba(0, 0, 0, .15);
}

.testimonials-section .profile-name {
	font-weight: 500;
	font-size: 18px;
	letter-spacing: .2px;
}

/* ---------- quote panel ---------- */
.testimonials-section .panel {
	position: relative;
	background: #eeeeee;
	border-radius: 6px;
	padding: clamp(18px, 2.8vw, 28px) clamp(18px, 3vw, 34px) clamp(18px, 3vw, 28px) clamp(18px, 6vw, 54px);
	align-self: center;
	justify-self: start;
	/* keeps consistent spacing in fixed-width layouts */
	margin-bottom: 2rem;
}

.testimonials-section .panel::before {
	content: "\201C";
	position: absolute;
	left: -0.25em;
	top: 0;
	font: 900 clamp(80px, 9vw, 140px)/1 Georgia, "Times New Roman", Times, serif;
	color: #8c232d;
}

.testimonials-section .quote {
	color: #222;
	font-style: italic;
}

.testimonials-section p#quote.quote {
	margin: 0 !important;
}

/* ---------- fade-in helper ---------- */
.testimonials-section .fade {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s ease, transform .35s ease;
}

.testimonials-section .fade.in {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- dots ---------- */
.testimonials-section .dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.testimonials-section .dot {
	width: 10px;
	height: 10px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: #c9c9c9;
	cursor: pointer;
}

.testimonials-section .dot[aria-current="true"] {
	background: #8c232d;
	transform: scale(1.1);
}

/* ---------- CTA ---------- */
.testimonials-section .cta {
	margin-top: 1rem;
	text-align: right;
}

.testimonials-section .cta a {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	background: #8c232d;
	color: #fff;
	text-decoration: none;
	padding: 14px 24px;
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: .2px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

.testimonials-section .cta a:hover {
	background: #5e1f2b;
}

.testimonials-section .cta a:focus-visible {
	outline: 3px solid #222;
	outline-offset: 3px;
}

/* ---------- fixed-width quote row to lock dots/button position ---------- */
.testimonials-section .panel .quote {
	display: block;
	max-width: none;
	white-space: normal;
}

.testimonials-section .slider-dots,
.testimonials-section .testimonials-btn {
	width: 36rem;
}

/* Desktop: avatar (200px) + gap (4rem) + panel (56rem) */
@media (min-width: 981px) {
	.testimonials-section .testimonial-row {
		max-width: none;
		width: calc(200px + 4rem + 56rem);
		margin-left: 0;
		margin-right: 0;
		justify-items: stretch;
	}
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
	.testimonials-section .testimonial-row {
		grid-template-columns: 220px 1fr;
		grid-template-areas:
			"profile panel"
			"dots dots"
			"cta cta";
	}

	.testimonials-section .profile {
		grid-area: profile;
	}

	.testimonials-section .panel {
		grid-area: panel;
	}

	.testimonials-section .dots {
		grid-area: dots;
		margin-bottom: 2rem;
	}

	.testimonials-section .cta {
		grid-area: cta;
		justify-self: end;
	}
}

@media (max-width: 980px) and (orientation: landscape) {
	.testimonials-section .testimonial-row {
		row-gap: 0;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		justify-items: stretch;
	}
}

@media (max-width: 680px) {
	.testimonials-section .testimonial-row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"profile"
			"panel"
			"dots"
			"cta";
	}

	.testimonials-section .profile {
		text-align: center;
	}

	.testimonials-section .avatar {
		width: 180px;
		height: 180px;
	}

	.testimonials-section .cta {
		/* centers the button within the grid */
		justify-self: center;
		/* centers the text/button inside .cta */
		text-align: center;
	}
}