/* ============================================================
   CLS TESTIMONIAL — .cls-testimonial
   Commercial Leasing & Sales page — fade slider with dot nav
   ============================================================ */

/* ----------------------------------------------------------
   Base (mobile-first)
---------------------------------------------------------- */

.cls-testimonial {
	background: var(--color-gray-alt);
}

.cls-testimonial__inner {
	max-width: 800px;
	margin-inline: auto;
	padding-block: var(--section-py-sm);
	padding-inline: var(--container-pad);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
	text-align: center;
}

/* Decorative closing quote mark
---------------------------------------------------------- */

.cls-testimonial__quote-mark {
	font-size: 12rem;
	font-weight: var(--weight-black);
	color: var(--color-white);
	line-height: 0.6;
	margin-bottom: -2rem;
	user-select: none;
}

/* Slider — all slides overlap in the same grid cell; GSAP handles opacity
---------------------------------------------------------- */

.cls-testimonial__slider {
	display: grid;
	width: 100%;
}

.cls-testimonial__slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
	visibility: hidden;
	opacity: 0;
}

.cls-testimonial__slide--active {
	visibility: visible;
	opacity: 1;
}

/* Quote text
   Figma: ~18px, italic, --color-text, generous line-height
---------------------------------------------------------- */

.cls-testimonial__quote {
	font-size: var(--size-md);
	font-style: italic;
	font-weight: var(--weight-regular);
	color: var(--color-text);
	line-height: 1.75;
	margin: 0;
}

/* Author row — avatar + name/role side by side
---------------------------------------------------------- */

.cls-testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	text-align: left;
}

/* Avatar — small circle
---------------------------------------------------------- */

.cls-testimonial__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	flex-shrink: 0;
}

.cls-testimonial__author-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

/* Author name
---------------------------------------------------------- */

.cls-testimonial__author-name {
	font-size: 0.9375rem;
	font-weight: var(--weight-bold);
	color: var(--color-text);
	margin: 0;
}

/* Author role
---------------------------------------------------------- */

.cls-testimonial__author-role {
	font-size: var(--size-xs);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
	margin: 0;
}

/* Navigation dots
---------------------------------------------------------- */

.cls-testimonial__dots {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.cls-testimonial__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: var(--color-gray-mid);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}

.cls-testimonial__dot--active {
	background: var(--color-primary);
	transform: scale(1.3);
}

.cls-testimonial__dot:hover:not(.cls-testimonial__dot--active) {
	background: var(--color-gray);
}

/* ----------------------------------------------------------
   Desktop (≥ 992px)
---------------------------------------------------------- */

@media (min-width: 992px) {

	.cls-testimonial__inner {
		padding-block: var(--section-py);
	}

	.cls-testimonial__quote {
		font-size: var(--size-md-lg);
	}

}