/*
 * Shared card chrome used by stats, problem cards, feature cards,
 * review cards, and post cards. Each component picks its own padding
 * via a body class.
 */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}

.card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}