/* ==========================================================================
   Testimonials
   Client review cards and slider. HTML: template-parts/shared/testimonials.php
   ========================================================================== */

.testimonials__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 3);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 6px 2px 10px;
	scroll-behavior: smooth;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.is-grid .testimonials__track { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; }
.testimonial {
	--qc: #a78bfa;
	--qc2: #c026d3;
	scroll-snap-align: start;
	position: relative;
	margin: 0;
	padding: 22px 6px 6px;
	display: flex;
	flex-direction: column;
}
/* Speech bubble */
.testimonial__bubble {
	position: relative;
	flex: 1;
	padding: 34px 28px 26px;
	border-radius: 26px 26px 26px 8px;
	background:
		radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--qc) 22%, transparent), transparent 60%),
		linear-gradient(165deg, color-mix(in srgb, var(--qc) 12%, rgba(255, 255, 255, .05)), rgba(255, 255, 255, .02));
	border: 1px solid color-mix(in srgb, var(--qc) 35%, transparent);
	transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.testimonial__bubble::after { /* tail pointing to the author */
	content: "";
	position: absolute;
	left: 34px;
	bottom: -13px;
	width: 26px; height: 26px;
	background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--qc) 10%, #120b30) 50%);
	border-right: 1px solid color-mix(in srgb, var(--qc) 35%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--qc) 35%, transparent);
	transform: rotate(45deg);
	border-radius: 0 0 6px 0;
}
.testimonial__badge {
	position: absolute;
	top: -22px; left: 26px;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--qc), var(--qc2));
	color: #fff;
	box-shadow: 0 12px 28px -10px var(--qc2), 0 0 0 5px var(--bg);
	transform: rotate(-8deg);
	transition: transform .5s var(--ease);
}
.testimonial__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.testimonial__chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--qc) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--qc) 45%, transparent);
	color: color-mix(in srgb, var(--qc) 70%, #fff);
	font-size: .76rem;
	font-weight: 700;
	white-space: nowrap;
}
.testimonial blockquote { margin: 18px 0 0; }
.testimonial blockquote p { margin: 0; font-size: 1.04rem; line-height: 1.75; color: #ece8fb; }
.testimonial figcaption { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-left: 14px; }
.testimonial figcaption strong { display: block; color: #fff; font-family: var(--font-display); }
.testimonial figcaption small { color: color-mix(in srgb, var(--qc) 55%, var(--muted)); }
.testimonial .avatar { width: 52px; height: 52px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--qc); }
.testimonial .avatar--initials { background: linear-gradient(135deg, var(--qc), var(--qc2)); }
.testimonial:hover .testimonial__bubble { transform: translateY(-6px) rotate(-.6deg); border-color: var(--qc); box-shadow: 0 30px 60px -28px var(--qc); }
.testimonial:hover .testimonial__badge { transform: rotate(0) scale(1.08); }

@media (min-width: 1025px) {
	.testimonials__track > .testimonial:nth-child(3n+2) { margin-top: 34px; }
}

.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar--initials { display: grid; place-items: center; background: var(--grad-btn); font-family: var(--font-display); font-weight: 700; color: #fff; }
.stars { display: flex; gap: 3px; color: rgba(255, 255, 255, .2); }
.stars .is-on { color: var(--c-accent); }
.slider-controls { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }

@media (max-width: 1024px) {
	.is-grid .testimonials__track { grid-template-columns: repeat(2, 1fr); }
	.testimonials__track { grid-auto-columns: calc((100% - 24px) / 2); }
}

@media (max-width: 680px) {
	.is-grid .testimonials__track { grid-template-columns: 1fr; }
	.testimonials__track { grid-auto-columns: 88%; }
}