/* ═══════════════════════════════════════════════════════════
   ATOM: Pill
   Small rectangular keyword badges. Light blue background,
   blue text. Displayed in flex rows between headlines and
   body copy to add color and scannable structure.
   Based on the proof-pill pattern from FCI Messaging Architecture.
   ═══════════════════════════════════════════════════════════ */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}

.pill-row--center {
  justify-content: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-blue);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: var(--radius-sm);
  line-height: var(--leading-snug);
  white-space: nowrap;
}

/* ── Color variants ──────────────────────────────────────── */

.pill--sky {
  color: var(--color-sky);
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.18);
}

.pill--emerald {
  color: var(--color-emerald);
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.18);
}

.pill--amber {
  color: var(--color-amber);
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.18);
}

.pill--violet {
  color: var(--color-violet);
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.18);
}

/* On dark backgrounds (hero dark, closing CTA) — light pills */
.section--blue .pill,
.hero .pill {
  color: var(--color-sky-light);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Light mode hero uses bright blue — light blue pills */
[data-theme="light"] .hero .pill {
  color: var(--color-blue-dark);
  background: rgba(186, 230, 253, 0.8);
  border-color: rgba(186, 230, 253, 0.85);
}

/* Closing CTA stays blue in both themes */
[data-theme="light"] .section--blue .pill {
  color: var(--color-white);
  background: rgba(30, 58, 110, 0.85);
  border-color: rgba(30, 58, 110, 0.9);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero .pill {
    color: var(--color-blue-dark);
    background: rgba(186, 230, 253, 0.8);
    border-color: rgba(186, 230, 253, 0.85);
  }
  :root:not([data-theme="dark"]) .section--blue .pill {
    color: var(--color-white);
    background: rgba(30, 58, 110, 0.85);
    border-color: rgba(30, 58, 110, 0.9);
  }
}

/* ── Light theme ─────────────────────────────────────────── */

[data-theme="light"] .pill {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.15);
}

[data-theme="light"] .pill--sky {
  background: rgba(14, 165, 233, 0.06);
  border-color: rgba(14, 165, 233, 0.15);
}

[data-theme="light"] .pill--emerald {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.15);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pill {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.15);
  }
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
  .pill {
    font-size: var(--text-xs);
    padding: 5px 10px;
  }

  .pill-row {
    gap: var(--space-1);
  }
}