/*
  Testimonial bar: a horizontally scrolling row of client results.
  Themes restyle it by setting these on .tbar:
    --tb-bg, --tb-card, --tb-text, --tb-muted, --tb-accent, --tb-border,
    --tb-radius, --tb-av (avatar background), --tb-av-text, --tb-pad, --tb-title-font
*/
.tbar {
  position: relative;
  padding: var(--tb-pad, clamp(56px, 7vw, 88px) 0);
  background: var(--tb-bg, transparent);
  overflow: hidden;
}
.tbar-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto clamp(24px, 3vw, 36px); padding: 0 20px; text-align: center; }
.tbar-kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tb-muted, #777); }
.tbar-title { margin: 0; font-family: var(--tb-title-font, inherit); font-weight: var(--tb-title-weight, 500); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.025em; color: var(--tb-text, #111); }
.tbar-rating { font-size: 13px; color: var(--tb-muted, #777); }
.tbar-rating b { color: var(--tb-accent, #111); letter-spacing: 2px; font-weight: 400; margin-right: 6px; }

.tbar-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tbar-track { --gap: 16px; display: flex; gap: var(--gap); width: max-content; padding: 4px 0; animation: tbar-scroll var(--tb-speed, 60s) linear infinite; }
.tbar-viewport:hover .tbar-track { animation-play-state: paused; }
@keyframes tbar-scroll { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

.tcard {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(340px, 80vw);
  margin: 0;
  padding: 20px 22px;
  border-radius: var(--tb-radius, 16px);
  background: var(--tb-card, #f4f4f6);
  border: 1px solid var(--tb-border, transparent);
  text-align: left;
}
.tcard-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tcard-result { font-weight: 600; font-size: 15.5px; line-height: 1.3; letter-spacing: -0.01em; color: var(--tb-accent, #111); }
.tcard-stars { flex: none; font-size: 11px; letter-spacing: 1.5px; color: var(--tb-accent, #111); opacity: 0.85; }
.tcard blockquote { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tb-text, #111); }
.tcard figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.tcard-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--tb-av-text, #fff); background: var(--tb-av, var(--tb-accent, #111)); }
.tcard figcaption b { display: block; font-size: 13px; font-weight: 600; color: var(--tb-text, #111); }
.tcard figcaption small { display: block; font-size: 12px; color: var(--tb-muted, #777); }

@media (prefers-reduced-motion: reduce) {
  .tbar-track { animation: none; }
  .tbar-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}