/* "Voices" quote cards and the stat strip beneath them. */

.voices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-4);
}

.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-sm);
}

.quote-card blockquote {
  font-size: var(--text-lg);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.quote-card figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  margin-top: var(--space-6);
  border-block: var(--hairline) solid var(--border);
}

/* dt must come before dd in the markup; column-reverse shows the number first. */
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
}

.stat dd {
  color: var(--primary);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat dt {
  max-width: 28ch;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}