/* ============================================================
   invern/custom.css — page-specific CSS for Invern only.
   Never touched by scripts/sync-shared-sites.sh. Shared design-
   system CSS lives in base.css (packages/shared-styles).
   ============================================================ */

/* invern (and loom) render .usecase-pain as display:block; nablr and the
   shared baseline don't set this. Not universal enough to promote to
   base.css, so kept as a page-local supplement to the shared rule. */
.usecase-pain { display: block; }

/* ---------- Problem: stat callouts (non-percentage figures, no proportional bar) ---------- */
.stat-callout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.stat-callout {
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.stat-callout-value { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--text-primary); }
.stat-callout-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.4rem; }

/* icon-badge margin override for usecase-card: extends the shared
   .trust-card .icon-badge rule in base.css with invern's own
   additional card type (invern is the only site using icon-badge
   inside .usecase-card). */
.usecase-card .icon-badge { margin: 0 0 0.75rem; }

/* ---------- Trust: badge strip ----------
   Loom's .badge-strip/.badge-ring/.badge-label are hardcoded for its dark
   compliance band (cream ring/text on navy). Invern's trust section is a
   light card section, not a band-dark, so those literal cream/navy values
   would render near-invisible here. Kept the same structural classes and
   layout, but recolored via the existing theme tokens so it reads correctly
   in both light and dark mode instead of copying the dark-band colors verbatim. */
.badge-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  margin: 2rem 0 2.25rem;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 120px;
  text-align: center;
}

.badge-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-default);
  flex-shrink: 0;
}

.badge-ring svg { width: 24px; height: 24px; color: var(--interactive); }

.badge-label { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }

.badge-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--success-text);
}

/* band-dark usecase-card treatment: identical to loom's copy, but not
   promoted to base.css since nablr doesn't use usecase-card inside a
   band-dark section — kept page-local rather than shared-but-unused. */
.band-dark .usecase-card {
  background: rgba(242, 237, 228, 0.05);
  border-color: rgba(242, 237, 228, 0.18);
}
.band-dark .usecase-name { color: #F2EDE4; }
.band-dark .usecase-pain { color: rgba(242, 237, 228, 0.65); }
.band-dark .usecase-icon { color: #9BADBD; }

.usecase-grid.two-col { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 480px) {
  .usecase-grid.two-col { grid-template-columns: 1fr; }
}

/* stat-callout-grid responsive columns — supplements base.css's
   shared breakpoints for .metric-strip etc. without duplicating them */
@media (max-width: 800px) {
  .stat-callout-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .stat-callout-grid { grid-template-columns: 1fr; }
}