/**
 * <MetricCard> — small label / large number / meta. Designed to live in
 * `.c-metric-grid`, a 3-column responsive CSS grid container.
 *
 * Markup:
 *   <div class="c-metric-grid">
 *     <article class="c-metric-card">
 *       <p class="c-metric-card__label">Calls this month</p>
 *       <p class="c-metric-card__value">142 <span class="c-metric-card__limit">/ 2000</span></p>
 *       <p class="c-metric-card__meta">Pro plan</p>
 *     </article>
 *     …
 *   </div>
 */

.c-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

@media (max-width: 639.98px) {
  .c-metric-grid {
    grid-template-columns: 1fr;
  }
}

.c-metric-card {
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.c-metric-card__label {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.c-metric-card__value {
  margin: 0 0 var(--space-xs);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--text-primary);
}

.c-metric-card__limit {
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--text-secondary);
}

.c-metric-card__meta {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--text-tertiary);
}