/* ============================================================
   IMPÉRIO SOLUÇÕES EM AÇO — Blog & Artigos Stylesheet
   ============================================================ */

/* ── ARTIGOS / BLOG POSTS ───────────────────────────────────── */
/* Estilos compartilhados pelos 3 artigos do blog */

.article-hero { padding: calc(var(--nav-h) + 60px) 0 60px; background: var(--black); }
.article-meta { display:flex; gap:16px; align-items:center; margin-bottom:24px; flex-wrap:wrap; }
.article-cat { background:var(--gold); color:var(--black); font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border-radius:100px; }
.article-date { font-family:var(--font-mono); font-size:.8rem; color:var(--gray-400); }
.article-title { font-family:var(--font-title); font-size:clamp(1.6rem,4vw,2.8rem); font-weight:700; color:var(--white); line-height:1.15; margin-bottom:20px; max-width:760px; }
.article-sub { font-size:1.05rem; color:var(--gray-400); line-height:1.7; max-width:680px; }
.article-body { background:var(--black-deep); padding:80px 0; }
.article-content { max-width:740px; margin:0 auto; }
.article-content h2 { font-family:var(--font-title); font-size:1.6rem; font-weight:700; color:var(--white); margin:48px 0 16px; }
.article-content h3 { font-family:var(--font-title); font-size:1.2rem; font-weight:700; color:var(--white); margin:32px 0 12px; }
.article-content p { font-size:1rem; color:var(--gray-400); line-height:1.8; margin-bottom:20px; }
.article-content strong { color:var(--gold); }
.article-content ul, .article-content ol { margin:0 0 20px 24px; }
.article-content li { font-size:1rem; color:var(--gray-400); line-height:1.8; margin-bottom:8px; }
.article-content .callout { background:var(--black-soft); border-left:4px solid var(--gold); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:20px 24px; margin:32px 0; }
.article-content .callout p { margin:0; color:var(--gray-300); font-size:.95rem; }
.article-table { width:100%; border-collapse:collapse; margin:32px 0; font-size:.9rem; }
.article-table th { background:var(--black); color:var(--gold); font-family:var(--font-title); font-weight:600; padding:12px 16px; text-align:left; }
.article-table td { padding:10px 16px; border-bottom:1px solid rgba(255,255,255,0.1); color:var(--gray-400); }
.article-table tr:hover td { background:rgba(255,255,255,0.05); }
.article-cta { background:var(--black); padding:64px 0; text-align:center; }
.article-cta p { color:var(--gray-400); margin-bottom:32px; }
.article-back { display:inline-flex; align-items:center; gap:8px; font-size:.875rem; color:var(--gray-400); margin-bottom:48px; transition:color var(--transition); }
.article-back:hover { color:var(--gold); }
.article-featured-img { background:var(--black); }

/* Barra de progresso de leitura */
#reading-bar-wrap { position:fixed; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.08); z-index:2000; }
#reading-bar { height:100%; width:0%; background:var(--gold); transition:width .1s linear; }

/* Página de listagem do blog */
.blog-page-hero { padding: calc(var(--nav-h) + 100px) 0 40px; background: var(--black); text-align: center; }
.blog-page-hero h1 { font-family: var(--font-title); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--white); margin-bottom: 16px; }
.blog-page-hero p { color: var(--gray-400); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
.blog-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 40px; padding-bottom: 120px; }
.blog-index-grid .blog-card * { pointer-events: auto !important; }

@media (max-width: 1023px) {
  .blog-index-grid { grid-template-columns: repeat(2, 1fr); padding-bottom: 80px; }
}
@media (max-width: 767px) {
  .blog-index-grid { grid-template-columns: 1fr; padding-bottom: 80px; }
}

/* ── CLASSES PARA PÁGINAS LEGAIS ────────────────────────────── */
.legal-card {
  padding: 40px;
  background: var(--black-soft);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
}

.legal-card h2 {
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 20px;
}

.legal-card p {
  color: var(--gray-400);
  line-height: 1.7;
  margin-bottom: 24px;
}

.legal-card ul {
  color: var(--gray-400);
  line-height: 1.7;
  margin-bottom: 24px;
  padding-left: 20px;
  list-style-type: disc;
}

.legal-card li {
  margin-bottom: 8px;
}

.legal-card a {
  color: var(--gold);
  text-decoration: underline;
}