.testimonial-card {
  background: var(--surface-alt);
  /* --radius-md (não --radius-lg): mesmo motivo do .results-card e do .map__embed iframe
     (ver components.css) — em shape.radius:'pill' (--radius-lg: 9999px), um card de altura
     variável (sem aspect-ratio fixo) vira um "blob"/moldura estranha em vez de cantos
     arredondados normais. */
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

/* Opcional (theme.testimonialsQuoteMark) — aspas decorativas grandes acima do texto. */
.testimonial-card__quote {
  display: block;
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: -8px;
}

.testimonial-card p { color: var(--fg); font-size: 1.02rem; margin-bottom: var(--space-2); }
.testimonial-card footer { display: flex; flex-direction: column; gap: 2px; }
.testimonial-card footer strong { font-family: var(--font-heading); font-size: 0.95rem; }
.testimonial-card footer span { color: var(--fg-muted); font-size: 0.85rem; }

/* mosaic: grade mostrando todos os depoimentos de uma vez */
.testimonials--mosaic .testimonials__track {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .testimonials--mosaic .testimonials__track { grid-template-columns: repeat(2, 1fr); }
}

/* carousel: scroll-snap horizontal, funciona sem JS por toque/scroll */
.testimonials--carousel .testimonials__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}

.testimonials--carousel .testimonials__track::-webkit-scrollbar { display: none; }

.testimonials--carousel .testimonial-card {
  flex: 0 0 min(85%, 420px);
  scroll-snap-align: start;
}

/* masonry: parede estilo Pinterest, colunas CSS — cards de altura variável ficam lado a lado
   sem espaço morto (diferente de mosaic, que é uma grade com todas as linhas na mesma altura). */
.testimonials--masonry .testimonials__track {
  column-count: 1;
  column-gap: var(--space-3);
}

@media (min-width: 640px) {
  .testimonials--masonry .testimonials__track { column-count: 2; }
}

@media (min-width: 1024px) {
  .testimonials--masonry .testimonials__track { column-count: 3; }
}

.testimonials--masonry .testimonial-card {
  break-inside: avoid;
  margin-bottom: var(--space-3);
}

.testimonials__controls {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}

.testimonials__controls button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: var(--surface);
}