/* testimonials.css — trust-strip + review cards for Massage By Mike.
   Additive only: reuses theme vars from styles.css so dark mode flips for free. */
.t-strip{ --t-gap:18px; margin:8px 0; }
.t-strip[hidden]{display:none}
.t-heading{
  font-family:var(--font-title);
  color:var(--title-text);
  font-size:clamp(22px,3.2vw,30px);
  text-align:center;
  margin:0 0 22px;
}
.t-track{
  display:flex; gap:var(--t-gap);
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:6px 4px 14px;
  scrollbar-width:thin; scrollbar-color:var(--rust) transparent;
}
.t-track:focus-visible{outline:3px solid var(--focus,var(--rust));outline-offset:3px;border-radius:12px}
.t-track::-webkit-scrollbar{height:8px}
.t-track::-webkit-scrollbar-track{background:transparent}
.t-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.t-track:hover::-webkit-scrollbar-thumb{background:var(--rust)}
.t-card{
  flex:0 0 clamp(248px,78vw,320px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:12px;margin:0;
  background:var(--card-bg,var(--surface,#fff));
  border:1px solid var(--line,var(--cream-border));
  border-radius:14px; padding:22px 22px 20px;
  box-shadow:var(--shadow-card,0 6px 22px rgba(60,40,20,.10));
  transition:transform .25s ease, box-shadow .25s ease;
}
.t-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover,0 12px 34px rgba(60,40,20,.16)); }
.t-stars{display:inline-flex;gap:2px;font-size:18px;line-height:1}
.t-star{color:var(--line,#d9c9b4)}
.t-star.is-on{color:var(--gold,#C8B896)}
.t-quote{ margin:0; font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--body-text); flex:1; }
.t-attr{ font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--title-text); }
.t-attr .t-loc{ font-weight:400; color:var(--muted,var(--body-text)); }
@media (min-width:760px){
  .t-track{ justify-content:center; flex-wrap:wrap; overflow-x:visible; scroll-snap-type:none; }
  .t-card{flex:0 1 300px}
}
@media (max-width:480px){
  .t-card{flex-basis:clamp(240px,84vw,300px);padding:20px 18px 18px}
  .t-heading{margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .t-card{transition:none}
  .t-card:hover{transform:none}
}