/* AQW Social Proof — User Reviews & KOL Voices
 * Tokens: spacing, radius, surface, shadow from layout-system.css
 * Dual-row infinite scroll (reviews), card grid (KOLs)
 * RTL-aware, reduced-motion fallback
 */

/* Common */
.sp-section { padding: clamp(64px, 11vw, 88px) 0; }
.sp-section .container { max-width: 100%; padding: 0; }
.sp-root { display: grid; gap: clamp(32px, 5vw, 48px); }

.sp-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.sp-head h2 { font-size: clamp(32px, 5vw, 48px); font-weight: 900; letter-spacing: -.03em; line-height: 1.12; }
.sp-head p { color: var(--muted); font-size: clamp(15px, 2vw, 17px); margin-top: 14px; line-height: 1.55; }

/* User Reviews — Dual-row infinite scroll */
.sp-reviews { display: grid; gap: 18px; overflow: hidden; }
.sp-track { display: flex; gap: 14px; width: max-content; }

@media (prefers-reduced-motion: no-preference) {
  .sp-track { animation: sp-scroll 180s linear infinite; }
  .sp-track[data-dir="reverse"] { animation-direction: reverse; }
  .sp-track:hover { animation-play-state: paused; }
}

@keyframes sp-scroll {
  to { transform: translateX(calc(-50% - 7px)); }
}

/* RTL flip */
html[dir="rtl"] .sp-track { animation-name: sp-scroll-rtl; }
@keyframes sp-scroll-rtl {
  to { transform: translateX(calc(50% + 7px)); }
}

.sp-review-card {
  min-width: 300px; max-width: 300px;
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(145deg, rgba(14,31,42,.85), rgba(8,20,29,.92));
  border: 1px solid rgba(255,255,255,.06);
  display: flex; gap: 11px; align-items: flex-start;
}

.sp-avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #245668, #2a3e69);
}

.sp-review-content { display: grid; gap: 5px; flex: 1; min-width: 0; }

.sp-review-header { display: flex; gap: 7px; align-items: center; }
.sp-review-author { font-size: 12px; font-weight: 700; color: #fff; }

.sp-review-text {
  font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.84);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Reduced motion fallback */
.sp-kols { display: grid; gap: 18px; }
.sp-kol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.sp-kol-card {
  padding: 16px; border-radius: 16px;
  background: linear-gradient(140deg, rgba(10,22,34,.92), rgba(7,16,27,.96));
  border: 1px solid rgba(255,255,255,.07);
  display: flex; gap: 12px; align-items: flex-start;
  transition: .25s;
}

.sp-kol-card:hover { transform: translateY(-2px); border-color: rgba(73,226,205,.25); }

.sp-kol-avatar {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #1e4d5f, #2a3769);
}

.sp-kol-content { display: grid; gap: 6px; flex: 1; min-width: 0; }

.sp-kol-header { display: flex; gap: 8px; align-items: center; }
.sp-kol-name { font-size: 13px; font-weight: 700; color: #fff; }

.sp-kol-platform {
  width: 18px; height: 18px; border-radius: 4px;
  background: rgba(73,226,205,.12); display: grid; place-items: center;
  font-size: 10px;
}

.sp-kol-text {
  font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.82);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .sp-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; overflow: visible; }
  .sp-track { display: contents; animation: none !important; }
}

/* Mobile */
@media (width < 768px) {
  .sp-review-card { min-width: 260px; max-width: 260px; }
  .sp-kol-grid { grid-template-columns: 1fr; }
}