/*
 * Testimonials. Figma 2048:42332 desktop: bento grid 520 / 284 / 384, rows 268,
 * third card spans both rows. 556:14304 mobile: 320px cards in a swipe slider + dots.
 */

.testimonials__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

.testimonials__head { max-width: 680px; }
.testimonials__head .section-head__text { font: var(--f-body-xs); }

.testimonials__rating { gap: 6px; padding: 7px 9px; font: var(--f-subtitle-s); white-space: normal; }
.testimonials__rating .icon:first-child { color: var(--c-secondary); }
.testimonials__rating strong { font-weight: 800; }

/* Grid (desktop) */
.testimonials__grid {
	display: grid;
	grid-template-columns: minmax(0, 520fr) minmax(0, 284fr) minmax(0, 384fr);
	grid-template-rows: repeat(2, minmax(268px, auto));
	gap: 16px;
}

.testimonial--tall { grid-column: 3; grid-row: 1 / span 2; }

.testimonial__body {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 19px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-l);
	background: var(--c-bg-white);
}

.testimonial__stars {
	--icon-size: 24px;
	display: flex;
	gap: 4px;
	margin-bottom: 24px;
	color: var(--c-border-light);
}

.testimonial__stars .is-on { color: var(--c-secondary); }

.testimonial__quote { font: var(--f-body-s); color: var(--c-text-dark); }
.testimonial__quote strong { font-weight: 800; color: var(--c-primary); }

.testimonial--wide .testimonial__quote { font: var(--f-body-m); }
.testimonial--tall .testimonial__quote { font: 400 20px/26px var(--font); }

.testimonial__author {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
}

.testimonial__name { font: var(--f-subtitle-m); color: var(--c-text-dark); }

.testimonial__avatar {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--c-bg-purple);
}

.testimonials__dots { display: none; }

/* Tablet: two equal columns, tall card spans none */
@media (min-width: 768px) and (max-width: 1100px) {
	.testimonials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
	.testimonial--tall { grid-column: auto; grid-row: auto; }
	.testimonial { min-height: 268px; }
}

/* Mobile: swipe slider */
@media (max-width: 767px) {
	.testimonials__top { margin-bottom: 24px; }

	.testimonials .testimonials__grid {
		display: flex;
		gap: 16px;
		margin-inline: calc(-1 * var(--gutter));
		padding: 0 var(--gutter);
		scroll-padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.testimonials__grid::-webkit-scrollbar { display: none; }

	.testimonial { flex: none; width: 320px; max-width: calc(100vw - 2 * var(--gutter) - 24px); scroll-snap-align: start; }
	.testimonial__stars { margin-bottom: 12px; }
	.testimonial__quote,
	.testimonial--wide .testimonial__quote,
	.testimonial--tall .testimonial__quote { font: var(--f-body-s); min-height: 132px; }

	.testimonials__dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 24px;
	}

	.testimonials__dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--c-border-light);
		transition: background-color .2s ease;
	}

	.testimonials__dot[aria-current="true"] { background: var(--c-secondary); }
}