/* ============================================================
   product-coe.css — shared "AI Center of Excellence" theme for
   product detail pages. Mirrors the components introduced on
   products/lms-platform.html (tabbed panels, differentiators
   strip, who-it's-for cards, compliance status matrix).
   Uses the global tokens from main.css (--primary, --ink, --muted,
   --surface, --bg, --primary-h, --primary-hl).
   ============================================================ */

/* ── Differentiators strip (under hero) ───────────────────── */
.pc-valueprop { background: var(--surface); border-bottom: 1px solid var(--primary-hl); }
.pc-valueprop .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; padding: 1.25rem 0; }
.pc-valueprop span { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: var(--primary-h); }
.pc-valueprop span::before { content: "\25C6"; color: var(--primary); margin-right: 0.5rem; font-size: 0.7em; vertical-align: middle; }

/* ── Tabbed feature panels ────────────────────────────────── */
.pc-tabs-wrap { max-width: 1000px; margin: 2.5rem auto 0; }
.pc-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--primary-hl); }
.pc-tab { padding: 0.85rem 1.25rem; font-size: 0.95rem; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color 0.2s, border-color 0.2s; font-family: inherit; }
.pc-tab:hover { color: var(--ink); }
.pc-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.pc-panel { display: none; background: var(--surface); border: 1px solid var(--primary-hl); border-top: none; border-radius: 0 0 15px 15px; padding: 2.5rem; text-align: left; }
.pc-panel.active { display: block; animation: pcFade 0.35s cubic-bezier(0.16,1,0.3,1); }
@keyframes pcFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pc-panel .feature-icon { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }
.pc-panel h3 { color: var(--ink); font-size: 1.4rem; font-weight: 600; margin-bottom: 0.75rem; }
.pc-panel p { color: var(--muted); line-height: 1.65; margin-bottom: 1.25rem; max-width: 70ch; }
.pc-panel .feature-list { margin: 0; }

/* ── "Who it's for" cards ─────────────────────────────────── */
.pc-aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; max-width: 1000px; margin: 2.5rem auto 0; }
.pc-aud-card { background: var(--surface); border: 1px solid var(--primary-hl); border-radius: 15px; padding: 2rem; text-align: left; }
.pc-aud-card .feature-icon { font-size: 2.25rem; margin-bottom: 0.75rem; display: block; }
.pc-aud-card h3 { color: var(--ink); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; }
.pc-aud-card p { color: var(--muted); line-height: 1.6; font-size: 0.95rem; }
.pc-aud-note { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 1.5rem; }

/* ── Compliance status matrix ─────────────────────────────── */
.posture-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.6rem 2rem; max-width: 900px; margin: 2.5rem auto 0; text-align: left; }
.posture-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--primary-hl); }
.posture-row span { color: var(--ink); font-size: 0.92rem; font-weight: 500; }
.posture-pill { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.posture-pill.certified { background: #d7ede4; color: #0c5b46; }
.posture-pill.progress { background: #fbe9cf; color: #8a5a13; }
.posture-pill.roadmap { background: #e6e4df; color: #5f5d57; }
.posture-note { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 1.75rem; max-width: 70ch; margin-left: auto; margin-right: auto; opacity: 0.9; }

@media (max-width: 600px) {
  .pc-panel { padding: 1.5rem; }
  .pc-tab { padding: 0.7rem 0.9rem; font-size: 0.85rem; }
}