/* Case Format Testimonial Slider
   Palette taken from the reference layout. */

.cts-section {
	--cts-bg:        #FBF7F0;
	--cts-card:      #FFFFFF;
	--cts-ink:       #12283C;
	--cts-gold:      #B0862F;
	--cts-star:      #C8992F;
	--cts-muted:     #98A0A6;
	--cts-dot:       #E4DCCE;
	--cts-avatar-1:  #2E5F52;
	--cts-avatar-2:  #0E2B26;
	--cts-serif:     "Fraunces", Georgia, "Times New Roman", serif;
	--cts-sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	background: var(--cts-bg);
	padding: clamp(40px, 6vw, 72px) 20px clamp(36px, 5vw, 60px);
	box-sizing: border-box;
}

.cts-section *,
.cts-section *::before,
.cts-section *::after { box-sizing: border-box; }

.cts-inner {
	max-width: 1160px;
	margin: 0 auto;
	text-align: center;
}

/* ---------- Slider shell ---------- */

.cts-slider {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.cts-viewport {
	overflow: hidden;
	padding: 6px 0 34px; /* room for the card shadow */
}

.cts-track {
	display: flex;
	transition: transform .55s cubic-bezier(.4, .02, .2, 1);
	will-change: transform;
}

.cts-slide {
	flex: 0 0 100%;
	min-width: 100%;
	padding: 0 4px;
}

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

.cts-section .cts-card {
	background: var(--cts-card);
	border: 0;
	border-radius: 26px;
	margin: 0;
	padding: clamp(36px, 5vw, 58px) clamp(24px, 5vw, 62px) clamp(34px, 4.5vw, 52px);
	box-shadow: 0 18px 40px -22px rgba(18, 40, 60, .22),
	            0 2px 6px rgba(18, 40, 60, .04);
	height: 100%;
}

/* Stars */

.cts-stars {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: clamp(24px, 3.5vw, 38px);
}

.cts-star {
	width: 22px;
	height: 22px;
	fill: var(--cts-star);
	display: block;
}

/* Quote */

.cts-section .cts-quote {
	margin: 0 0 clamp(28px, 4vw, 44px);
	font-family: var(--cts-serif);
	font-weight: 400;
	font-style: normal;
	font-size: clamp(1.05rem, 2.1vw, 1.6rem);
	line-height: 1.5;
	color: var(--cts-ink);
	text-align: center;
	font-optical-sizing: auto;
	font-variation-settings: "opsz" 32, "SOFT" 0, "WONK" 0;
	background: none;
	border: 0;
	border-left: 0;
	padding: 0;
	quotes: none;
}

.cts-section .cts-quote::before,
.cts-section .cts-quote::after { content: none; }

/* Attribution */

.cts-cite {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: center;
}

.cts-avatar {
	flex: 0 0 auto;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(140deg, var(--cts-avatar-1) 0%, var(--cts-avatar-2) 100%);
	display: block;
}

.cts-avatar .cts-avatar-img,
.cts-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.cts-cite-text {
	display: block;
	font-family: var(--cts-sans);
}

.cts-label {
	display: block;
	font-size: clamp(.95rem, 1.35vw, 1.05rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--cts-ink);
}

.cts-sub {
	display: block;
	margin-top: 4px;
	font-size: clamp(.9rem, 1.2vw, 1rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--cts-muted);
}

/* ---------- Dots ----------
   Themes style every <button>, so each property is reset explicitly. */

.cts-section .cts-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: clamp(16px, 2.2vw, 24px) 0 0;
	padding: 0;
	line-height: 0;
}

.cts-section .cts-dots .cts-dot {
	display: block;
	flex: 0 0 auto;
	width: 9px !important;
	height: 9px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--cts-dot) !important;
	background-image: none !important;
	box-shadow: none !important;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	text-indent: 0;
	text-transform: none;
	color: transparent;
	cursor: pointer;
	overflow: hidden;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color .25s ease, transform .25s ease;
}

.cts-section .cts-dots .cts-dot::before,
.cts-section .cts-dots .cts-dot::after { content: none !important; }

.cts-section .cts-dots .cts-dot:hover {
	background: #D8CBB0 !important;
	transform: none;
}

.cts-section .cts-dots .cts-dot.is-active {
	background: var(--cts-gold) !important;
	transform: scale(1.15);
}

.cts-section .cts-dots .cts-dot:focus,
.cts-section .cts-dots .cts-dot:active {
	outline: none;
	box-shadow: none !important;
}

.cts-section .cts-dots .cts-dot:focus-visible,
.cts-section .cts-arrow:focus-visible {
	outline: 2px solid var(--cts-gold);
	outline-offset: 3px;
}

/* ---------- Optional arrows ---------- */

.cts-section .cts-arrow {
	position: absolute;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: 0;
	appearance: none;
	-webkit-appearance: none;
	top: calc(50% - 14px);
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--cts-ink);
	box-shadow: 0 6px 18px -8px rgba(18, 40, 60, .35);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.cts-section .cts-arrow:hover { background: var(--cts-ink); color: #fff; }
.cts-arrow svg { width: 20px; height: 20px; }
.cts-prev { left: -64px; }
.cts-next { right: -64px; }

@media (max-width: 1060px) {
	.cts-prev { left: 4px; }
	.cts-next { right: 4px; }
}

/* ---------- Small screens ---------- */

@media (max-width: 620px) {
	.cts-cite {
		flex-direction: column;
		gap: 14px;
	}

	.cts-avatar { width: 58px; height: 58px; }
	.cts-star { width: 19px; height: 19px; }
}

/* ---------- Motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
	.cts-track { transition: none; }
	.cts-dot { transition: none; }
}