/* Studio Setup — Testimonials: eight text-only quote cards in a carousel. Deliberately not reusing the
   shared .testi-* video-carousel component (Homepage/IFP/Clients) — its videos are
   Study'n'Learn's own customers, not SNL's (brain/pages/studio-setup.md). */
/* Dark background is the shared .dark-section-deep class (global.css) — same recipe
   as #support (homepage Customer Support), so the card/text colors below are dark-mode
   variants. Class applied in studio-setup.php's markup. */
.studio-testimonials {
  padding: calc(var(--space-section) + 16px) 0;
}
.studio-testimonials-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.studio-testimonials-head { text-align: center; margin-bottom: 40px; }
.studio-testimonials-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.studio-testimonials-head h2 { margin: 0 0 10px; color: #fff; }
.studio-testimonials-head p { margin: 0; font-size: var(--text-body-lg); color: rgba(255, 255, 255, 0.82); }

/* Carousel: a scroll-snap track (native swipe, scrolls without JS); studio-testimonials.js adds
   the prev/next buttons + dots and un-hides .studio-testimonial-controls. --cols cards per view.
   The track's vertical padding + matching negative margin leaves room for the card hover-lift
   and shadow, which an overflow container would otherwise clip. */
.studio-testimonial-carousel { --cols: 3; --gap: 24px; }
.studio-testimonial-track {
  list-style: none;
  display: flex;
  gap: var(--gap);
  margin: -8px 0 -28px;
  padding: 8px 0 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.studio-testimonial-track::-webkit-scrollbar { display: none; }
.studio-testimonial-track:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 18px; }
.studio-testimonial-card {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 32px 28px;
  background: #12182d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.studio-testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
}
.studio-testimonial-mark { width: 26px; height: 26px; color: var(--primary); opacity: 0.5; }
.studio-testimonial-quote { flex: 1; margin: 14px 0 24px; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.studio-testimonial-person { display: flex; align-items: center; gap: 12px; }
.studio-testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
.studio-testimonial-avatar [data-lucide] { width: 18px; height: 18px; }
.studio-testimonial-person strong { display: block; font-size: 0.9375rem; color: #fff; }
.studio-testimonial-person span:last-child { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }

.studio-testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; }
.studio-testimonial-controls[hidden] { display: none; }
.studio-testimonial-nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, opacity 0.25s ease;
}
.studio-testimonial-nav [data-lucide] { width: 20px; height: 20px; stroke-width: 2; }
.studio-testimonial-nav:hover:not(:disabled) {
  background: var(--text-gradient) border-box;
  border-color: transparent;
  transform: translateY(-2px);
}
.studio-testimonial-nav:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.studio-testimonial-nav:disabled { opacity: 0.35; cursor: default; }
.studio-testimonial-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.studio-testimonial-dot {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.studio-testimonial-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.28);
  transform: translate(-50%, -50%);
  transition: background 0.25s ease, width 0.25s ease;
}
.studio-testimonial-dot[aria-current='true']::before { width: 22px; background: var(--text-gradient); }
.studio-testimonial-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

@media (max-width: 899px) { .studio-testimonial-carousel { --cols: 2; } }
@media (max-width: 599px) { .studio-testimonial-carousel { --cols: 1; } }
@media (prefers-reduced-motion: reduce) {
  .studio-testimonial-card, .studio-testimonial-nav, .studio-testimonial-dot { transition: none; }
}