/* JS Testimonials – base styles. Everything here can be overridden from the widget's Style tab. */

/* ---------- Layout: carousel + arrows + dots ---------- */
.js-testimonials-wrap {
	--js-per-view: 3;
	--js-gap: 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "carousel";
	align-items: center;
	column-gap: 16px;
	row-gap: 20px;
}

@media (max-width: 1024px) {
	.js-testimonials-wrap { --js-per-view: 2; }
}

@media (max-width: 767px) {
	.js-testimonials-wrap { --js-per-view: 1; }
}

.js-testimonials-wrap--dots {
	grid-template-areas: "carousel" "dots";
}

.js-testimonials-wrap--sides {
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "prev carousel next";
}

.js-testimonials-wrap--sides.js-testimonials-wrap--dots {
	grid-template-areas: "prev carousel next" ". dots .";
}

.js-testimonials-wrap--below {
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "carousel carousel carousel" "prev dots next";
}

/* ---------- Viewport & slides (CSS does the sizing) ---------- */
.js-testimonials-viewport {
	grid-area: carousel;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.js-testimonials-viewport::-webkit-scrollbar {
	display: none;
}

.js-testimonials-viewport:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.js-testimonials-track {
	display: flex;
	gap: var(--js-gap);
}

.js-testimonials-slide {
	display: flex;
	flex: 0 0 calc((100% - (var(--js-per-view) - 1) * var(--js-gap)) / var(--js-per-view));
	min-width: 0;
	scroll-snap-align: start;
}

.js-testimonials-wrap.is-dragging .js-testimonials-viewport {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

/* ---------- Card ---------- */
.js-testimonial {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 32px;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #e3e6ea;
	border-radius: 8px;
}

.js-testimonial__title {
	margin: 0 0 12px;
	font-size: 1.2rem;
	line-height: 1.3;
}

.js-testimonial__text {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	font-style: normal;
	line-height: 1.65;
	color: #4a5059;
}

.js-testimonial__text p:last-child {
	margin-bottom: 0;
}

/* Keep client details at the bottom so cards line up */
.js-testimonial__client {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
}

.js-testimonial__name {
	font-weight: 600;
}

.js-testimonial__designation {
	font-size: 0.875em;
	color: #6b717a;
}

/* ---------- Arrows (extra specificity to beat theme button styles) ---------- */
.js-testimonials-wrap .js-testimonials-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 1px solid #d5d9de;
	border-radius: 50%;
	background: #ffffff;
	color: #1f2328;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}

.js-testimonials-wrap .js-testimonials-arrow:hover,
.js-testimonials-wrap .js-testimonials-arrow:focus {
	background: #1f2328;
	border-color: #1f2328;
	color: #ffffff;
}

.js-testimonials-wrap .js-testimonials-arrow:focus-visible {
	outline: 2px solid #1f2328;
	outline-offset: 3px;
}

.js-testimonials-wrap .js-testimonials-arrow:disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.js-testimonials-wrap .js-testimonials-arrow svg {
	width: 18px;
	height: 18px;
}

.js-testimonials-prev { grid-area: prev; }
.js-testimonials-next { grid-area: next; }

/* ---------- Dots (24px tap target, visible dot drawn with ::before) ---------- */
.js-testimonials-dots {
	grid-area: dots;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0;
}

.js-testimonials-wrap .js-testimonials-dot,
.js-testimonials-wrap .js-testimonials-dot:hover,
.js-testimonials-wrap .js-testimonials-dot:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

.js-testimonials-wrap .js-testimonials-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c4c9cf;
	transition: background-color .2s, transform .2s;
}

.js-testimonials-wrap .js-testimonials-dot[aria-current="true"]::before {
	background: #1f2328;
	transform: scale(1.25);
}

.js-testimonials-wrap .js-testimonials-dot:focus-visible {
	outline: 2px solid #1f2328;
	outline-offset: -2px;
	border-radius: 50%;
}

/* ---------- Mobile: side arrows move below ---------- */
@media (max-width: 767px) {
	.js-testimonials-wrap--sides,
	.js-testimonials-wrap--sides.js-testimonials-wrap--dots {
		grid-template-areas: "carousel carousel carousel" "prev dots next";
	}
	.js-testimonial {
		padding: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-testimonials-viewport { scroll-behavior: auto; }
	.js-testimonials-wrap .js-testimonials-arrow,
	.js-testimonials-wrap .js-testimonials-dot::before { transition: none; }
}

/* ---------- All slides fit: hide navigation (kept last on purpose) ---------- */
.js-testimonials-wrap.is-static {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "carousel";
}

.js-testimonials-wrap.is-static .js-testimonials-arrow,
.js-testimonials-wrap.is-static .js-testimonials-dots {
	display: none;
}