/* =============================================================
   article-base.css  — Shared base for all Blog & LinkedIn pages
   Fixes: hero text contrast, content backgrounds, mobile layout
   ============================================================= */

/* ── Force ALL text inside dark hero sections to be WHITE ── */
.article-hero,
.blog-article-hero,
.li-hero {
  color: #ffffff;
}
.article-hero h1,
.article-hero h2,
.article-hero h3,
.article-hero p,
.article-hero span,
.article-hero div,
.blog-article-hero h1,
.blog-article-hero h2,
.blog-article-hero p,
.blog-article-hero span,
.li-hero h1,
.li-hero h2,
.li-hero p,
.li-hero span {
  color: #ffffff !important;
}
.article-hero .article-meta,
.article-hero .blog-article-meta,
.blog-article-hero .blog-article-meta {
  color: rgba(255, 255, 255, 0.82) !important;
}
.article-hero .article-meta span,
.blog-article-hero .blog-article-meta span {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ── Force light background & dark readable text in body sections ── */
.article-body,
.blog-article-content {
  background: #ffffff;
  color: #1e293b !important;
}
.article-body p,
.blog-article-content p {
  color: #334155 !important;
}
.article-body h2,
.article-body h3,
.article-body h4,
.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4 {
  color: #0f172a !important;
}
.article-body li,
.blog-article-content li {
  color: #475569 !important;
}
.article-body strong,
.blog-article-content strong {
  color: #0f172a !important;
}

/* ── Section backgrounds ── */
.blog-section,
.articles-section {
  background: #f8faff;
}

/* Ensure cards with white bg stay white */
.blog-card,
.article-card,
.kpi-card,
.impact-card,
.pillar-card,
.moment-card,
.inclusive-card,
.ops-item,
.action-list li,
.poll-box,
.outcome-item {
  background-color: #ffffff;
}

/* ── Mobile Responsiveness ── */
@media (max-width: 768px) {
  .article-hero,
  .blog-article-hero,
  .li-hero {
    padding: 6rem 1rem 3rem;
  }
  .article-body,
  .blog-article-content {
    padding: 3rem 1.2rem;
    font-size: 1rem;
  }
  .article-body h2,
  .blog-article-content h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
  }
  .kpi-grid,
  .impact-grid,
  .pillars-grid,
  .moments-grid,
  .inclusive-grid,
  .ops-grid,
  .outcomes-grid,
  .type-grid,
  .effects-grid,
  .why-grid,
  .benefits-grid,
  .protect-grid {
    grid-template-columns: 1fr;
  }
  .effective-banner {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
  }
  .commitment-box,
  .cta-box {
    padding: 2rem 1.2rem;
  }
  .cta-box h3 {
    font-size: 1.3rem;
  }
  .pull-quote {
    font-size: 1.2rem;
    padding: 1.5rem 1rem;
  }
  .follow-banner {
    padding: 2.5rem 1.2rem;
  }
  .articles-grid,
  .blog-grid {
    grid-template-columns: 1fr !important;
  }
  .blog-hero h1,
  .li-hero h1 {
    font-size: 2rem !important;
  }
  .tags-row {
    gap: 0.4rem;
  }
  .infinity-box {
    padding: 1.5rem;
  }
  .poll-box {
    padding: 1.5rem;
  }
  .leakage-list li,
  .checklist li,
  .questions-list li,
  .action-list li {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .article-hero h1,
  .blog-article-hero h1,
  .li-hero h1 {
    font-size: 1.6rem !important;
  }
  .article-body,
  .blog-article-content {
    font-size: 0.97rem;
    padding: 2.5rem 1rem;
  }
  .cta-box a {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
  }
  .blog-article-badge,
  .linkedin-badge,
  .compliance-badge,
  .pride-badge {
    font-size: 0.7rem;
    padding: 0.35rem 0.8rem;
  }
}