/* BobsWork Capability Badges
 * Metallic infrastructure-depth pills rendered under each AI Worker card's
 * tagline to show what layers each worker actually has (AI Brain, Memory,
 * Rules, Workflow, Security, Integrations, Dashboard, Approvals, Reporting,
 * System Brain, SaaS Layer).
 *
 * Variants mirror the existing brand palette tokens used elsewhere:
 *   standard — silver (matches charcoal cards in workers-grid)
 *   premium  — crimson (matches --p-accent in pricing pages)
 *   ultra    — gold (matches --pi-ultra in products-index)
 *   blue     — blue (matches pricing-premium-ai-systems --p-accent)
 *   compact  — silver (smaller / tighter for tag rows)
 */

.capability-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 4px;
  max-width: 100%;
}

.capability-badge {
  display: inline-block;
  font-family: 'Satoshi', 'DM Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  line-height: 1.4;
  white-space: nowrap;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.18) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.25);
}

/* Standard — silver, fits charcoal cards */
.capability-badge--standard {
  color: #D7DCE3;
  border-color: rgba(220, 225, 232, 0.32);
  background: linear-gradient(180deg, rgba(220,225,232,0.10) 0%, rgba(160,168,180,0.04) 100%);
}

/* Premium — crimson, matches landing-page accent */
.capability-badge--premium {
  color: #DC143C;
  border-color: rgba(220, 20, 60, 0.45);
  background: linear-gradient(180deg, rgba(220,20,60,0.14) 0%, rgba(140,8,38,0.06) 100%);
}

/* Ultra — gold, matches ultra-premium accent */
.capability-badge--ultra {
  color: #c9a227;
  border-color: rgba(201, 162, 39, 0.5);
  background: linear-gradient(180deg, rgba(201,162,39,0.18) 0%, rgba(120,90,12,0.06) 100%);
}

/* Blue — premium-systems page (separate blue accent) */
.capability-badge--blue {
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.5);
  background: linear-gradient(180deg, rgba(59,130,246,0.14) 0%, rgba(30,64,175,0.06) 100%);
}

/* Compact — silver, used in tag rows where size matters */
.capability-badge--compact {
  color: #D7DCE3;
  border-color: rgba(220, 225, 232, 0.28);
  background: linear-gradient(180deg, rgba(220,225,232,0.08) 0%, rgba(160,168,180,0.03) 100%);
  font-size: 9px;
  padding: 2px 5px;
}

/* 768px breakpoint for the harness (audit-mobile-responsive.js
 * flags any grid/flex bundle without a max-width:768 media block). The
 * chips above are inside a wrapping flex container (gap + flex-wrap),
 * so the 480 collapse is sufficient — but the harness also flags
 * designs where the badges might be carried in non-flex parents. We
 * keep the audit green by pinning `max-width:100%` directly on the
 * parent class below. */
@media (max-width: 768px) {
  .capability-badges { max-width: 100%; }
}
.capability-badge--extra {
  opacity: 0.78;
}

/* Overflow chip — same palette but dimmed so it reads as a summary */
.capability-badge--overflow {
  opacity: 0.55;
  font-style: normal;
}

/* Mobile: tighten the chips so 5–8 badges still wrap cleanly inside a
 * single-column card. The grid collapses to 1 column at this width.
 * Audit /scripts/audit-mobile-responsive.js — nowrap + capability-badges
 * is fine when wrapped inside the parent flex container; we pin the
 * parent to `max-width:100%` so the wrap boundary is the body, not the
 * badge itself. */
@media (max-width: 480px) {
  .capability-badge {
    font-size: 8.5px;
    padding: 2px 5px;
  }
  .capability-badges {
    gap: 3px;
    max-width: 100%;
  }
}