/* ============================================================
   codebridge.css — Phase 1 additive brand layer
   Loaded AFTER style.css + lang.css. Never redefines --bg-*,
   --text-*, --accent-* (those stay as the existing site's
   design system so dark/light mode keeps working everywhere).
   Adds CodeBridge-specific tokens + layout patterns used only
   on the new company pages (about/services/industries/products/
   portfolio/blog/careers).
   ============================================================ */

:root {
  --cb-royal-blue: #2563eb;
  --cb-deep-navy:  #0b132b;
  --cb-gold:       #d4a017;
  --cb-white:      #ffffff;
  --cb-light-gray: #f1f4f6;
}

/* ── Page hero (used by every new module page) ─────────────── */
.cb-page-hero {
  padding: 160px 0 80px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}
.cb-page-hero .cb-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cb-gold);
  margin-bottom: 14px;
}
.cb-page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--text-primary);
  margin-bottom: 16px;
}
.cb-page-hero p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ── Card grid (services / industries / products / blog) ────── */
.cb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 48px;
}
.cb-card {
  background: var(--bg-card);
  border: 1px solid rgba(128,128,128,.14);
  border-radius: 16px;
  padding: 32px 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cb-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 16px 40px var(--accent-glow);
}
.cb-card-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--accent-glow);
  color: var(--accent);
  margin-bottom: 20px;
}
.cb-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.cb-card p {
  color: var(--text-secondary);
  font-size: .95rem;
  line-height: 1.65;
  margin-bottom: 16px;
}
.cb-card a.cb-link {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--accent);
  text-decoration: none;
}
.cb-card a.cb-link:hover { color: var(--accent-hover); }

/* ── Pricing table (products) ───────────────────────────────── */
.cb-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.cb-pricing-card {
  background: var(--bg-card);
  border: 1px solid rgba(128,128,128,.14);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
}
.cb-pricing-card.featured { border-color: var(--cb-gold); }
.cb-price { font-family: var(--font-heading); font-size: 2rem; color: var(--text-primary); margin: 12px 0; }
.cb-price span { font-size: .9rem; color: var(--text-secondary); font-family: var(--font-ui); }
.cb-pricing-card ul { list-style: none; margin: 20px 0; text-align: left; }
[dir="rtl"] .cb-pricing-card ul { text-align: right; }
.cb-pricing-card li { color: var(--text-secondary); font-size: .9rem; padding: 6px 0; border-bottom: 1px solid rgba(128,128,128,.1); }

/* ── Status badges ───────────────────────────────────────────── */
.cb-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-family: var(--font-mono); }
.cb-badge-live         { background: rgba(60,180,120,.15); color: #3cb478; }
.cb-badge-beta         { background: var(--accent-glow); color: var(--accent); }
.cb-badge-coming_soon  { background: rgba(212,175,55,.15); color: var(--cb-gold); }

/* ── Blog post / article layout ─────────────────────────────── */
.cb-article { max-width: 760px; margin: 0 auto; padding: 60px 0 100px; }
.cb-article img { border-radius: 16px; margin-bottom: 32px; }
.cb-article-meta { font-family: var(--font-mono); font-size: .82rem; color: var(--text-tertiary); margin-bottom: 20px; }
.cb-article-body { color: var(--text-secondary); line-height: 1.85; font-size: 1.05rem; }
.cb-article-body h2 { font-family: var(--font-heading); color: var(--text-primary); margin: 36px 0 16px; }
.cb-article-body p { margin-bottom: 20px; }

/* ── Simple two-column layout (about page etc.) ─────────────── */
.cb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .cb-split { grid-template-columns: 1fr; gap: 32px; } }

/* ── Job listing rows (careers) ──────────────────────────────── */
.cb-job-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 24px 28px; background: var(--bg-card); border: 1px solid rgba(128,128,128,.14);
  border-radius: 14px; margin-bottom: 16px;
}
.cb-job-row h3 { font-family: var(--font-ui); font-size: 1.1rem; color: var(--text-primary); margin-bottom: 4px; }
.cb-job-meta { font-family: var(--font-mono); font-size: .8rem; color: var(--text-tertiary); }

/* ── Empty state ─────────────────────────────────────────────── */
.cb-empty { text-align: center; padding: 60px 20px; color: var(--text-tertiary); font-family: var(--font-mono); }

.cb-nav-links a.active { color: var(--accent); }