/*
 * RAXE Integrations Page — Layout & Responsive
 * Grids for integration cards, attribution chips, honesty notes.
 * Depends on: tokens.css, base.css, components/cards.css, components/badges.css
 */

/* ── Section intro (left-aligned header block) ── */
.int-head {
  margin-bottom: var(--space-8);
  max-width: 640px;
}

/* ── Card grids ── */
.int-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.int-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.int-card {
  padding: var(--space-6);
}

.int-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2);
}

.int-card p {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* ── Card head row: name + chips ── */
.int-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.int-card-head h3 {
  margin-bottom: 0;
}

/* ── Attribution / status chips (mono, page-scoped) ── */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-default);
  white-space: nowrap;
}

.chip-live {
  color: var(--teal);
  background: rgba(0, 229, 192, 0.10);
  border-color: rgba(0, 229, 192, 0.25);
}

.chip-explicit {
  color: var(--teal);
  background: rgba(0, 229, 192, 0.06);
  border-color: rgba(0, 229, 192, 0.20);
}

.chip-ingest {
  color: var(--cyan);
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.20);
}

.chip-inferred {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.28);
}

.chip-validated {
  color: var(--cyan);
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.20);
}

.chip-request {
  color: var(--text-dim);
  background: transparent;
  border-color: var(--border-default);
}

.chip-correlated {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.28);
}

.chip-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── Say/do hook line under a section H2 (mirrors solutions .uc-hook) ── */
.int-hook {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--cyan);
  margin-top: var(--space-4);
}

/* ── Honesty note (amber-edged aside) ── */
.int-note {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--border-amber);
  background: rgba(245, 158, 11, 0.04);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  max-width: 720px;
}

.int-note strong {
  color: var(--text-primary);
}

/* ── Hero proof strip ── */
.int-proof {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.int-proof-sep {
  color: var(--text-ghost);
}

/* ── CTA button row ── */
.int-cta-row {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — Tablet (max-width: 1024px)
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .int-grid-3,
  .int-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — Mobile (max-width: 768px)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .int-grid-3,
  .int-grid-4 {
    grid-template-columns: 1fr;
  }

  .int-card {
    padding: var(--space-5);
  }
}