/* ==========================================================================
   Card - Reasons
   Displays why a thing appears in the feed (recent rec, stats, etc.)
   ========================================================================== */

/* Reason section - fills remaining space */
.card__reason {
  flex: 1;
}

/* ==========================================================================
   Card - Reason Area
   ========================================================================== */

/* Reason Area - fills remaining space in inner container */
.card__reason-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  min-height: 0;
}

.card__main-reason {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-primary);
  font-size: var(--text-card-reason-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-card-reason-line-height);
  letter-spacing: var(--text-card-reason-letter-spacing);
  color: var(--np-color-on-surface);
}

.card__reason-icon .material-symbols-outlined {
  font-size: var(--size-icon-xl);
  font-variation-settings: "wght" 200, "OPSZ" 40;
}

.card__stats-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.card__stat-item {
  font-family: var(--font-primary);
  font-size: var(--text-card-stats-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-card-stats-line-height);
  color: var(--np-color-on-surface-variant);
}