/* ═══════════════════════════════════════════════════════════
   COLAB — services.css
   Section 05 — CAPABILITIES
   Theme:  .section--light (warm cream — rhythm continues)
   Layout: Stacked mobile, 2x2 grid desktop.
   Purpose: Tool-driven outcomes (Phase 1 positioning).
            NOT services. NOT systems. NOT automation.
            Show what the operator can DO with the tools.
   STATUS: DONE ✓
   ═══════════════════════════════════════════════════════════ */

/* ─── SECTION HEADER ────────────────────────────────────── */
.cap__headline {
  margin-top: var(--space-sm);
  color: var(--light-text);
}

.cap__body {
  color: var(--light-muted);
  margin-top: var(--space-sm);
  max-width: 52ch;
}

/* ─── CAPABILITIES GRID ─────────────────────────────────── */
.cap__grid {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 600px) {
  .cap__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cap__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

/* ─── CAPABILITY CARD ───────────────────────────────────── */
.cap-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  /* .card base handles bg, border, radius, hover */
}

/* ─── ICON SLOT ─────────────────────────────────────────── */
.cap-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.15);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

.cap-card__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Graceful hide when icon missing — onerror fires in HTML */
.cap-card__icon:empty {
  display: none;
}

/* ─── OUTCOME LABEL ─────────────────────────────────────── */
.cap-card__outcome {
  font-family: 'Syne', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--light-text);
  line-height: 1.25;
}

/* ─── BODY ──────────────────────────────────────────────── */
.cap-card__desc {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--light-muted);
  line-height: 1.65;
  flex: 1;
}

/* ─── TOOL SOURCE TAG ───────────────────────────────────── */
.cap-card__source {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--orange);
  text-shadow: var(--glow-text);
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* ─── SECTION FOOTER ────────────────────────────────────── */
.cap__footer {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
}

/* btn--outline override for light section */
.section--light .btn--outline {
  color: var(--light-text);
  border-color: rgba(26, 16, 8, 0.25);
}

.section--light .btn--outline:hover {
  color: var(--orange);
  border-color: var(--orange);
  box-shadow: var(--glow-border);
}