/* ═══════════════════════════════════════════════════════════════════
   Components: Metric Cards & Grids
   ═══════════════════════════════════════════════════════════════════ */

.metric-grid,
.split-grid,
.case-grid,
.knowledge-grid,
.source-grid,
.feature-grid {
  display: grid;
  gap: var(--fluid-grid-gap);
}

.metric-grid { margin-top: 20px; }

.metric-grid article,
.fy-metric-card {
  padding: 20px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(25, 38, 43, 0.08);
  box-shadow: 0 12px 36px rgba(23, 37, 56, 0.1);
}

.metric-grid strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.28rem;
}

.metric-grid span { color: var(--color-ink-soft); font-size: 14px; }

.fy-metric-card {
  min-height: 132px;
}

.fy-metric-card span,
.fy-metric-card em {
  display: block;
  color: var(--color-ink-soft);
  font-style: normal;
}

.fy-metric-card strong {
  display: block;
  margin: 8px 0;
  font-family: var(--font-mono);
  font-size: 2rem;
}

.fy-metric-card.safe strong    { color: var(--color-success); }
.fy-metric-card.warning strong { color: var(--color-warning); }
.fy-metric-card.danger strong  { color: var(--color-danger); }

/* Grids using auto-fit for responsiveness */
.feature-grid,
.feature-grid.three-up,
.action-band,
.metric-grid,
.fy-metric-grid,
.fy-admin-metrics,
.pricing-grid,
.guardian-grid,
.guardian-features,
.avatar-provider-grid,
.knowledge-grid,
.case-grid,
.source-grid,
.sketch-grid,
.contact-grid,
.toolbar-grid,
.helper-list,
.analyze-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--fluid-grid-gap);
}

/* Dual card layout */
.dual-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

/* Responsive: collapse to single column */
@media (max-width: 940px) {
  .metric-grid,
  .split-grid,
  .dual-card,
  .feature-grid,
  .feature-grid.three-up,
  .knowledge-grid,
  .case-grid,
  .source-grid,
  .toolbar-grid,
  .fy-metric-grid,
  .fy-admin-metrics {
    grid-template-columns: 1fr;
  }
}