/**
 * ja_nexora — Integrations page pixel-parity overlay
 * Loaded only when article 231 (.nx-page-integrations) is rendered.
 * Fixes token leaks from the base .nx-page-integrations block in _nexora.scss
 * where hardcoded dark-hex values produce wrong colours in light mode.
 *
 * SAFE: no shared scss recompile; addStyleSheet injection from default.php.
 * DO NOT edit template.css / _nexora.scss for these — use this file.
 *
 * Defects fixed:
 *   I1 – int-cat (desktop) / int-link: hardcoded #6B7196 (dark $text-dim) → token (light #888EA6)
 *        Mobile int-cat stays var(--color-primary) per .pen YngDP HNMy0 fill=#3B82F6 spec.
 *   I2 – int-mark accent colours: hardcoded dark-only hex → token (primary/secondary/accent-3)
 *   I3 – CTA card gradient accent-2 stop: hardcoded #6366F1 (dark) → token (light #5B57E0)
 *   I4 – card + filter hover border: --color-border-strong → $accent per .pen spec
 */

/* I1 – category label at desktop: text-dim token (light #888EA6, dark #6B7196)
   Mobile breakpoint overrides this back to var(--color-primary) per .pen YngDP spec */
@media (min-width: 768px) {
  .nx-page-integrations .int-cat {
    color: var(--color-text-dim) !important;
  }
}
/* I1 – arrow link: text-dim token both breakpoints (link is hidden on mobile, so safe) */
.nx-page-integrations .int-link {
  color: var(--color-text-dim) !important;
}

/* I2 – mark letter accent colours: replace dark-only hex with tokens */
.nx-page-integrations .int-mark.c-blue   { color: var(--color-primary)   !important; }
.nx-page-integrations .int-mark.c-indigo { color: var(--color-secondary)  !important; }
.nx-page-integrations .int-mark.c-emerald{ color: var(--color-accent-3)   !important; }

/* I3 – CTA card gradient: replace hardcoded #6366F1 with --color-secondary token
         so light mode uses #5B57E0 and dark uses #6366F1 automatically */
.nx-page-integrations .cta-card {
  background: radial-gradient(110% 120% at 50% 200%, var(--color-secondary), #0062FF 55%) !important;
}

/* I4 – card hover + filter hover: .pen says border → $accent, not --color-border-strong */
.nx-page-integrations .int-card:hover {
  border-color: var(--color-primary) !important;
}
.nx-page-integrations .int-filter:hover {
  border-color: var(--color-primary) !important;
}

/* I5 – mobile filter pills: single horizontal-scroll row, no wrap.
   .pen §7 "Filters: horizontal scroll row (don't wrap to many lines)".
   _nexora.scss line 5927 sets justify-content:flex-start + gap:10px but leaves
   flex-wrap:wrap (inherited from the desktop rule at line 5837), causing a 2-row
   layout at 390px. Override to nowrap + overflow-x:auto. [MG1] */
@media (max-width: 767.98px) {
  .nx-page-integrations .int-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px; /* prevent clipping of box-shadow on scrollable pills */
  }
  .nx-page-integrations .int-filters::-webkit-scrollbar {
    display: none;
  }
}

/* I6 – filter empty-state message (.pen §6 "Filter with 0 results:
   'No integrations in this category yet'"). Injected + toggled by the
   integrations filter JS in nexora.js; hidden until a filter matches 0 cards.
   Token-driven so it reads in both themes. [ES1] */
.nx-page-integrations .int-empty {
  margin: 0;
  padding: 48px 24px;
  text-align: center;
  font-family: Inter, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-muted);
}
.nx-page-integrations .int-empty[hidden] { display: none; }