/* Nerdschmie.de Desktop Design Phase 4 – KPI / Fact Card V1 */
.nsd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: var(--nsd-space-3);
  align-items: stretch;
}

body.nsd .nsd-kpi-grid .nsd-kpi-card {
  min-width: 0;
  min-height: 0;
  padding: var(--nsd-space-4);
  border: 1px solid var(--nsd-border-subtle);
  border-radius: var(--nsd-radius-card);
  background: var(--nsd-color-surface-soft);
  color: var(--nsd-color-text);
  box-shadow: none;
}

body.nsd .nsd-kpi-grid .nsd-kpi-card > strong,
body.nsd .nsd-kpi-grid .nsd-kpi-card > strong a {
  color: var(--nsd-color-text);
  font-size: clamp(1rem, .94rem + .18vw, 1.12rem);
  line-height: 1.25;
  font-weight: 760;
}

body.nsd .nsd-kpi-grid .nsd-kpi-card > span:last-child,
body.nsd .nsd-kpi-grid .nsd-kpi-card .ns-event-distance__label {
  color: var(--nsd-color-text-muted);
  font-size: var(--nsd-type-meta-size);
  line-height: 1.4;
}

body.nsd .nsd-kpi-grid .nsd-kpi-card .ns-event-glance-icon {
  color: var(--nsd-color-accent);
  opacity: .8;
  font-size: 1rem;
}

body.nsd .nsd-kpi-grid .nsd-kpi-card--action {
  background: rgba(13,18,17,.72);
}

body.nsd .nsd-kpi-grid .nsd-kpi-card--action button:focus-visible,
body.nsd .nsd-kpi-grid .nsd-kpi-card a:focus-visible {
  outline: var(--nsd-focus-width) solid var(--nsd-focus-color);
  outline-offset: var(--nsd-focus-offset);
}

/* DJ detail had its own larger glance cards; Phase 4 maps them to the same compact core. */
body.nsd .nsd-dj-detail .nsd-kpi-grid .nsd-kpi-card {
  padding: var(--nsd-space-4);
  border-color: var(--nsd-border-subtle);
  border-radius: var(--nsd-radius-card);
  background: var(--nsd-color-surface-soft);
}