/*
 * Testimonials — homepage [mr_testimonials], light glass-morphism section
 * with floating particles + 3-col static review grid. Matches reference.
 * @package log-core
 */

.log-test-glass.test-glass-section {
	position: relative;
	padding: 90px 0 100px;
	overflow: hidden;
	background: linear-gradient(115deg, var(--blush-100) 0%, #dce6d2 32%, #e1d9b8 62%, var(--sage-400) 100%);
}

.log-test-glass::before,
.log-test-glass::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .35;
	pointer-events: none;
}

.log-test-glass::before { width: 340px; height: 340px; background: var(--sage-500); top: -80px; left: -100px; }
.log-test-glass::after { width: 300px; height: 300px; background: var(--sage-600); bottom: -100px; right: -80px; }

.log-review-particle {
	position: absolute;
	color: var(--sage-700);
	opacity: 0;
	animation: log-review-particle-drift 8s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

.log-review-particle .icon { width: 16px; height: 16px; }
.log-review-particle.alt { color: var(--plum-500); }
.log-review-particle.sm .icon { width: 11px; height: 11px; }
.log-review-particle.lg .icon { width: 22px; height: 22px; }

@keyframes log-review-particle-drift {
	0% { opacity: 0; transform: translateY(0) rotate(0deg); }
	12% { opacity: .5; }
	50% { opacity: .35; transform: translateY(-120px) rotate(150deg); }
	100% { opacity: 0; transform: translateY(-200px) rotate(260deg); }
}

@media (max-width: 640px) {
	.log-review-particle { display: none; }
}

/* ── Head ── */
.test-glass-head {
	position: relative;
	text-align: center;
	color: var(--ink-900);
	z-index: 1;
}

.test-glass-head .eyebrow { display: flex; justify-content: center; }

.test-glass-head h2 {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(30px, 4vw, 44px);
	color: var(--plum-950);
	margin: 0;
}

.test-glass-head h2 em { font-style: italic; color: var(--plum-600); }

/* ── Grid + cards ── */
.review-slider-wrap { position: relative; margin-top: 54px; z-index: 1; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.review-card {
	position: relative;
	background: var(--white);
	border: 1px solid rgba(31, 58, 52, .1);
	border-radius: var(--r-lg);
	padding: 30px 26px 26px;
	box-shadow: 0 10px 26px -14px rgba(31, 58, 52, .18);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
	overflow: hidden;
}

.review-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 28px 50px -18px rgba(31, 58, 52, .26);
	border-color: rgba(138, 106, 46, .4);
}

.review-card::before {
	content: '\201C';
	position: absolute;
	top: 2px;
	right: 20px;
	font-family: var(--display);
	font-size: 76px;
	line-height: 1;
	color: var(--blush-100);
	z-index: 0;
	pointer-events: none;
}

.review-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }

.review-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--sage-500), var(--plum-600));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--display);
	font-weight: 700;
	font-size: 18px;
	flex-shrink: 0;
	box-shadow: 0 8px 18px rgba(45, 80, 72, .22);
	transition: transform .35s var(--ease);
}

.review-card:hover .review-avatar { transform: scale(1.08) rotate(-6deg); }
.review-name { display: block; font-weight: 700; font-size: 14px; color: var(--ink-900); }
.review-loc { display: block; font-size: 11.5px; color: var(--sage-700); font-weight: 600; margin-top: 2px; }
.review-stars { position: relative; z-index: 1; display: flex; gap: 2px; color: var(--sage-600); margin-top: 15px; }
.review-stars .icon { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.review-quote { position: relative; z-index: 1; margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--ink-700); min-height: 100px; }

.review-verified {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	background: var(--blush-100);
	color: var(--plum-700);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .02em;
	padding: 6px 12px;
	border-radius: var(--r-pill);
}

.review-verified .icon { width: 10px; height: 10px; }

/* ── Nav / dots / mobile ── */
.review-nav-btn {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--white);
	border: 1.4px solid var(--line);
	box-shadow: var(--shadow-sm);
	align-items: center;
	justify-content: center;
	color: var(--ink-700);
	z-index: 5;
	transition: all .25s var(--ease);
}

.review-nav-btn.prev { left: -6px; }
.review-nav-btn.next { right: -6px; }
.review-nav-btn .icon { width: 16px; height: 16px; }
.review-nav-btn[disabled] { opacity: .35; pointer-events: none; }

.review-dots { display: none; justify-content: center; gap: 7px; margin-top: 16px; }
.review-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(31, 58, 52, .22); border: none; padding: 0; cursor: pointer; transition: all .3s var(--ease); }
.review-dot.active { background: var(--plum-700); width: 20px; border-radius: 99px; }

.review-swipe-hint {
	display: none;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--ink-700);
	letter-spacing: .04em;
	margin-top: 8px;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.review-swipe-hint .icon { width: 12px; height: 12px; color: var(--sage-700); }

@media (max-width: 980px) {
	.review-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
	.review-grid {
		grid-template-columns: 1fr;
		display: flex;
		overflow-x: auto;
		gap: 14px;
		scroll-snap-type: x mandatory;
		padding: 18px 2px 26px;
		margin: 0;
		scrollbar-width: none;
		mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
	}
	.review-grid::-webkit-scrollbar { display: none; height: 0; }
	.review-card { scroll-snap-align: start; flex: 0 0 78%; padding: 24px 20px 22px; }
	.review-quote { min-height: auto; font-size: 12.5px; }
	.review-nav-btn { display: flex; }
	.review-dots { display: flex; }
	.review-swipe-hint { display: flex; }
}

@media (max-width: 420px) {
	.review-card { flex: 0 0 84%; }
}