/* Testimonial Spotlight Carousel
   --------------------------------------------------------------- */

.tsp-carousel {
	--tsp-navy: #1b1e6e;
	--tsp-tan: #c08a52;
	--tsp-heading: #1b1e6e;
	--tsp-text-on-navy: #ffffff;
	--tsp-card-radius: 14px;
	--tsp-max-width: 1100px;

	/* quote mark sizing scales smoothly with viewport, never overflows the card area */
	--tsp-mark-size: clamp(40px, 7vw, 80px);
	--tsp-mark-overlap: clamp(14px, 2.2vw, 26px);
	/* guaranteed empty space on each side of the carousel for the quote-mark
	   bleed AND the arrows to live in, regardless of what container this
	   sits inside on the live site */
	--tsp-side-pad: clamp(40px, 6vw, 56px);

	max-width: var(--tsp-max-width);
	margin: 0 auto;
	padding: 0 var(--tsp-side-pad);
	box-sizing: border-box;
	position: relative;
}

.tsp-heading {
	text-align: center;
	color: var(--tsp-heading);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	margin: 0 0 clamp(24px, 4vw, 40px);
}

.tsp-stage {
	position: relative;
}

/* ---------------- Arrows ----------------
   Sit just outside the card's own edge (not the far edge of the whole
   container), vertically centered on the card. They stay close to the
   content they control instead of floating far away on wide layouts. */

.tsp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--tsp-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.tsp-arrow-prev {
	right: 100%;
	margin-right: 4px;
}

.tsp-arrow-next {
	left: 100%;
	margin-left: 4px;
}

.tsp-arrow svg {
	width: clamp(20px, 3vw, 30px);
	height: clamp(20px, 3vw, 30px);
	fill: none;
	stroke: var(--tsp-navy);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tsp-arrow:hover {
	transform: translateY(-50%) scale(1.12);
	opacity: 0.75;
}

.tsp-arrow:focus-visible {
	outline: 2px solid var(--tsp-navy);
	outline-offset: 3px;
}

/* ---------------- Track / slides ---------------- */

.tsp-track-wrap {
	overflow: hidden;
	transition: height 0.35s ease;
}

.tsp-track {
	display: flex;
	align-items: flex-start;
	transition: transform 0.5s ease;
}

.tsp-slide {
	flex: 0 0 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* ---------------- Card ---------------- */

.tsp-card {
	position: relative;
	background: var(--tsp-navy);
	color: var(--tsp-text-on-navy);
	border-radius: var(--tsp-card-radius);
	padding: clamp(28px, 5vw, 56px) clamp(28px, 6vw, 70px);
	box-sizing: border-box;
}

.tsp-quote-text {
	font-size: clamp(1rem, 2vw, 1.35rem);
	line-height: 1.6;
	margin: 0 0 1.25em;
	position: relative;
	z-index: 2;
}

.tsp-quote-text p {
	margin: 0 0 1em;
}

.tsp-quote-text p:last-child {
	margin-bottom: 0;
}

.tsp-attribution {
	font-weight: 700;
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	margin: 0;
	position: relative;
	z-index: 2;
}

/* ---------------- Quote marks: corner-overlap at every breakpoint ----------------
   Positioned with negative offsets equal to a fraction of their own size, so the
   ratio of "how much pokes past the card edge" stays constant as --tsp-mark-size
   scales with clamp(). They sit above the card in z-index but behind the text. */

.tsp-quote-mark {
	position: absolute;
	width: var(--tsp-mark-size);
	height: var(--tsp-mark-size);
	z-index: 3;
	pointer-events: none;
}

.tsp-quote-mark svg {
	width: 100%;
	height: 100%;
	fill: var(--tsp-tan);
}

.tsp-quote-mark-open {
	top: calc(var(--tsp-mark-overlap) * -1);
	left: calc(var(--tsp-mark-overlap) * -1);
}

.tsp-quote-mark-close {
	bottom: calc(var(--tsp-mark-overlap) * -1);
	right: calc(var(--tsp-mark-overlap) * -1);
	transform: rotate(180deg);
}

/* ---------------- Dots ---------------- */

.tsp-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(16px, 3vw, 28px);
}

.tsp-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(27, 30, 110, 0.25);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}

.tsp-dot.is-active {
	background: var(--tsp-navy);
	transform: scale(1.2);
}

.tsp-dot:focus-visible {
	outline: 2px solid var(--tsp-navy);
	outline-offset: 2px;
}

/* ---------------- Responsive adjustments ---------------- */

@media (max-width: 640px) {
	.tsp-carousel {
		--tsp-side-pad: 26px;
		--tsp-mark-size: clamp(34px, 11vw, 46px);
		--tsp-mark-overlap: clamp(10px, 3vw, 16px);
	}

	.tsp-card {
		padding: 32px 18px;
	}

	.tsp-arrow {
		padding: 4px;
	}

	.tsp-arrow-prev {
		margin-right: 2px;
	}

	.tsp-arrow-next {
		margin-left: 2px;
	}
}

@media (max-width: 420px) {
	.tsp-carousel {
		--tsp-side-pad: 20px;
	}

	.tsp-arrow svg {
		width: 16px;
		height: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsp-track {
		transition: none;
	}
	.tsp-track-wrap {
		transition: none;
	}
	.tsp-arrow {
		transition: none;
	}
}