/* Page-specific styles for The Missing Language article */

/* ===== HERO THEME ===== */
.article-hero { background: linear-gradient(160deg, #0f1a10 0%, #182a1a 55%, #1a2f1c 100%); }
.article-tag-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
.tag-insights    { background: #3a5a10; }
.tag-org-upskilling { background: #5a4800; }
.article-hero-sub { color: #8ec89a; }
.article-meta-author { color: #d1db24; }
.article-meta-date, .article-meta-read { color: #6a9a6a; }
.article-meta-sep { color: #3a6a3a; }
.article-cta { background: linear-gradient(135deg, #0f1a10 0%, #182a1a 100%); border: 2px solid #2a6a2a; }
.article-cta h2 { color: #ffffff; }
.article-cta p { color: #8ec89a; }
.article-cta a.secondary { color: #f0c830; border: 2px solid #b38a00; }

/* ===== LANGUAGE SPLIT DIAGRAM ===== */
.language-diagram {
  margin: 36px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.lang-panel {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid;
}
.lang-panel.lp-stem {
  border-color: #90c060;
  background: #f0f8ea;
}
.lang-panel.lp-hum {
  border-color: #d4a800;
  background: #fdf8e0;
}
.lang-panel-header {
  padding: 14px 20px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-stem .lang-panel-header { background: #2a6a10; }
.lp-hum  .lang-panel-header { background: #7a5c00; }
.lang-panel-label {
  font-size: 11px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 2px; color: #fff;
}
.lang-panel-focus {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.65);
  margin-left: auto; letter-spacing: 0.5px;
}
.lang-panel-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.lang-item {
  font-size: 13px; color: #333; line-height: 1.6;
  padding-left: 20px; position: relative;
}
.lp-stem .lang-item::before { content: '→'; position: absolute; left: 0; color: #2d8a4e; font-weight: 900; }
.lp-hum  .lang-item::before { content: '→'; position: absolute; left: 0; color: #b38a00; font-weight: 900; }
@media (max-width: 620px) { .language-diagram { grid-template-columns: 1fr; } }

/* ===== BRIDGE DIAGRAM SVG WRAPPER ===== */
.bridge-diagram-wrap {
  margin: 36px 0;
  background: #f8f8f8;
  border: 2px solid #e0e0e0;
  border-radius: 14px;
  overflow: hidden;
}
.bridge-diagram-wrap svg { display: block; width: 100%; height: auto; }

/* ===== FLUENCY GRID ===== */
.fluency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}
.fluency-card {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid;
}
.fluency-card.fc-stem { border-color: #90c060; background: #f4fae8; }
.fluency-card.fc-hum  { border-color: #d4a800; background: #fdf8e0; }
.fluency-card-header {
  padding: 13px 18px;
  font-size: 10px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 2px; color: #fff;
}
.fc-stem .fluency-card-header { background: #2d6a10; }
.fc-hum  .fluency-card-header { background: #7a5c00; }
.fluency-card-sub {
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.65);
  letter-spacing: 1px; margin-top: 2px;
}
.fluency-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.fluency-item { font-size: 13px; color: #333; line-height: 1.6; padding-left: 20px; position: relative; }
.fc-stem .fluency-item::before { content: '→'; position: absolute; left: 0; color: #2d8a4e; font-weight: 900; }
.fc-hum  .fluency-item::before { content: '→'; position: absolute; left: 0; color: #b38a00; font-weight: 900; }
@media (max-width: 620px) { .fluency-grid { grid-template-columns: 1fr; } }

/* ===== PRINCIPLE CARDS ===== */
.principle-cards { margin: 32px 0; display: flex; flex-direction: column; gap: 14px; }
.principle-card {
  display: flex; gap: 20px; align-items: flex-start;
  background: #fff; border: 2px solid #dde8d0;
  border-radius: 12px; padding: 22px 24px;
}
.principle-num {
  width: 38px; height: 38px; flex-shrink: 0;
  background: #2d6a10; color: #fff;
  font-size: 16px; font-weight: 900; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.principle-title { font-size: 15px; font-weight: 900; color: #1a1a1a; margin-bottom: 6px; }
.principle-desc  { font-size: 13px; color: #555; line-height: 1.65; }