/* ==========================================================================
   Client Testimonials Slider
   Customise with CSS custom properties on .cts (or a parent):
   --cts-accent, --cts-font, --cts-heading-color, --cts-text-color,
   --cts-border, --cts-card-width, --cts-gap, --cts-max-width
   ========================================================================== */

.cts {
	--cts-accent: #1e3a8a;
	--cts-font: inherit;
	--cts-heading-color: #1a1c1c;
	--cts-text-color: #576071;
	--cts-border: #e2e2e2;
	--cts-card-width: 350px;
	--cts-gap: 40px;
	--cts-max-width: 1248px;
	/* Width of the in-focus area: two cards and the gap between them. */
	--cts-focus-width: calc(2 * var(--cts-card-width) + var(--cts-gap));
	/* Space either side of the focus area. Slides snap to its left edge, so the
	   focused cards sit centred with the neighbouring cards peeking in. */
	--cts-edge: max(16px, calc((100% - var(--cts-focus-width)) / 2));
	--cts-fade: #fff;
	--cts-blur: 0px; /* optional blur on the side cards; the design uses a clean fade */

	position: relative;
	font-family: var(--cts-font);
	color: var(--cts-text-color);
}

/* Header ------------------------------------------------------------------ */
.cts__header {
	max-width: 850px;
	margin: 0 auto 24px;
	padding: 0 24px;
	text-align: center;
}
.cts__eyebrow {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--cts-accent);
}
.cts .cts__heading {
	margin: 0 0 24px;
	font-family: var(--cts-font);
	font-size: 40px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--cts-heading-color);
}
.cts__intro {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--cts-text-color);
}

/* Track ------------------------------------------------------------------- */
.cts__viewport {
	position: relative;
}
/* Fade overlays over the peeking cards: transparent next to the focused
   cards, solid background colour at the outer edge. */
.cts__viewport::before,
.cts__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: max(0px, calc(var(--cts-edge) - var(--cts-gap) / 2));
	pointer-events: none;
	-webkit-backdrop-filter: blur(var(--cts-blur));
	backdrop-filter: blur(var(--cts-blur));
}
.cts__viewport::before {
	left: 0;
	background: linear-gradient(90deg, var(--cts-fade) 0%, var(--cts-fade) 30%, color-mix(in srgb, var(--cts-fade) 65%, transparent) 65%, color-mix(in srgb, var(--cts-fade) 30%, transparent) 100%);
}
.cts__viewport::after {
	right: 0;
	background: linear-gradient(270deg, var(--cts-fade) 0%, var(--cts-fade) 30%, color-mix(in srgb, var(--cts-fade) 65%, transparent) 65%, color-mix(in srgb, var(--cts-fade) 30%, transparent) 100%);
}
.cts .cts__track {
	display: flex;
	gap: var(--cts-gap);
	margin: 0;
	padding: 24px var(--cts-edge);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--cts-edge);
	scrollbar-width: none;
}
.cts__track::-webkit-scrollbar { display: none; }
.cts__track:focus-visible { outline: 2px solid var(--cts-accent); outline-offset: -2px; }

.cts .cts__slide {
	flex: 0 0 var(--cts-card-width);
	max-width: 85vw;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}
.cts .cts__slide::before { content: none; }

/* Card -------------------------------------------------------------------- */
.cts__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 24px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--cts-border);
	border-radius: 16px;
}
.cts__slide.is-featured .cts__card { border-color: var(--cts-accent); }
.cts__quote-icon { display: block; flex: 0 0 auto; margin-bottom: 16px; color: var(--cts-accent); }

.cts__rating { margin: 0 0 12px; font-size: 16px; line-height: 1; letter-spacing: 2px; color: #d6d9e0; }
.cts__star.is-on { color: #f5b301; }

.cts .cts__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--cts-font);
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	color: var(--cts-text-color);
	background: none;
	quotes: none;
}
.cts .cts__quote p { margin: 0 0 12px; font: inherit; color: inherit; }
.cts .cts__quote p:last-child { margin-bottom: 0; }
.cts .cts__quote::before,
.cts .cts__quote::after { content: none; }

.cts__author {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Author sits a fixed distance below the quote (Figma: 40px). */
	margin: 40px 0 0;
	padding: 0;
}
.cts__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; }
.cts__author-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 12px;
	border-left: 1px solid #c4c6d4;
}
.cts__name { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--cts-text-color); }
.cts__subtitle { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--cts-text-color); }

/* Controls ---------------------------------------------------------------- */
.cts__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}
.cts.is-static .cts__controls { display: none; }
.cts__dots { display: flex; gap: 8px; }
.cts .cts__dot {
	width: 8px;
	height: 8px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c4c6d4;
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.cts .cts__dot.is-active { background: var(--cts-accent); transform: scale(1.15); }
.cts .cts__dot:focus-visible,
.cts .cts__arrow:focus-visible { outline: 2px solid var(--cts-accent); outline-offset: 3px; }
.cts .cts__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--cts-accent);
	border-radius: 50%;
	background: #fff;
	color: var(--cts-accent);
	font-size: 18px;
	cursor: pointer;
}
.cts .cts__arrow:disabled { opacity: .35; cursor: default; }

.cts-empty { padding: 16px; border: 1px dashed #c4c6d4; text-align: center; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1024px) {
	.cts .cts__heading { font-size: 34px; }
}
/* Not enough room for two cards plus peeks: focus on one centred card. */
@media (max-width: 900px) {
	.cts { --cts-focus-width: var(--cts-card-width); --cts-gap: 24px; }
}
@media (max-width: 640px) {
	.cts { --cts-card-width: 290px; --cts-gap: 16px; }
	.cts .cts__heading { font-size: 28px; }
	.cts .cts__quote { font-size: 16px; }
	.cts__author { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.cts .cts__track { scroll-behavior: auto; }
	.cts .cts__dot { transition: none; }
}