/*
 * ESTILO GLOBAL DO BLOG RIVO — vale apenas para as páginas em /blog/.
 * Cabeçalho/rodapé vêm de site-shell.css (cópia do site React).
 *
 * Como criar um novo artigo:
 *  1. Copie public/blog/quem-e-responsavel-pela-carga.html com novo nome
 *     (letras minúsculas e hífens, terminando em .html).
 *  2. Troque title, description, canonical, og:*, JSON-LD e o conteúdo.
 *  3. Dentro de <article class="blog-artigo"> use só tags simples
 *     (h2, h3, p, a, img, figure/figcaption, table, hr, ul/ol, blockquote,
 *     address). NÃO precisa de classes: o estilo vem das próprias tags.
 *  4. Adicione um <article class="blog-card"> em public/blog/index.html.
 *  O sitemap é atualizado automaticamente no próximo build.
 */

:root {
  --blog-marinho: #032b8a;
  --blog-vivo: #0335fc;
  --blog-texto: #0f172a;
  --blog-suave: #475569;
  --blog-linha: #dbe3f5;
  --blog-claro: #f1f5ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Manrope', 'Segoe UI', Roboto, -apple-system, Arial, sans-serif;
  color: var(--blog-texto);
  /* Fundo da plataforma: azul escuro com bolhas azul vivo. */
  background-color: #021a55;
  background-image:
    radial-gradient(circle at 12% 12%, rgba(3, 53, 252, 0.55), transparent 30%),
    radial-gradient(circle at 90% 28%, rgba(3, 53, 252, 0.45), transparent 28%),
    radial-gradient(circle at 25% 75%, rgba(3, 53, 252, 0.35), transparent 32%),
    linear-gradient(135deg, #032b8a 0%, #021a55 100%);
  background-attachment: scroll; /* "fixed" falha em WebViews Android */
  min-height: 100vh;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

main { padding: 24px 16px 56px; }

/* ===== Caixa branca do artigo ===== */
.blog-artigo {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 56px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(3, 53, 252, 0.35), 0 2px 0 rgba(255,255,255,0.6) inset;
}

.blog-artigo h1, .blog-artigo h2, .blog-artigo h3,
.blog-lista h1, .blog-card h2 {
  color: var(--blog-marinho);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.blog-artigo h1 { font-size: 2.35rem; margin: 10px 0 14px; }
.blog-artigo h2 { font-size: 1.55rem; margin: 40px 0 12px; padding-left: 14px; border-left: 4px solid var(--blog-vivo); }
.blog-artigo h3 { font-size: 1.18rem; margin: 26px 0 8px; color: #0a3bb8; font-weight: 700; }

/* Subtítulo (parágrafo dentro do <header> do artigo) */
.blog-artigo header > p { font-size: 1.2rem; color: #334155; font-weight: 500; margin: 0 0 8px; }
.blog-artigo header > p::first-line { color: var(--blog-marinho); font-weight: 700; }

/* Data e hora com ícone */
.blog-artigo time, .blog-card time {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--blog-vivo);
  background: var(--blog-claro); padding: 4px 12px; border-radius: 999px;
}
.blog-artigo time::before, .blog-card time::before { content: "🕒"; font-size: 0.85rem; }

.blog-artigo p, .blog-artigo li { font-size: 1.06rem; color: var(--blog-texto); }
.blog-artigo li { margin-bottom: 6px; }
.blog-artigo li::marker { color: var(--blog-vivo); font-weight: 700; }

.blog-artigo a { color: var(--blog-vivo); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(3,53,252,0.35); text-underline-offset: 3px; word-break: break-word; }
.blog-artigo a:hover { color: var(--blog-marinho); text-decoration-color: currentColor; }

/* Imagens: nunca cortadas/distorcidas, apenas redimensionadas */
.blog-artigo img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 14px; }
.blog-artigo figure { margin: 30px 0; }
.blog-artigo figcaption { text-align: center; font-size: 0.9rem; font-style: italic; color: var(--blog-suave); margin-top: 10px; }

/* Separador em degradê azul */
.blog-artigo hr, .blog-lista hr {
  border: 0; height: 3px; margin: 36px auto; width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--blog-vivo), var(--blog-marinho), transparent);
}

.blog-artigo blockquote {
  margin: 28px 0; padding: 16px 22px;
  border-left: 4px solid var(--blog-vivo); background: var(--blog-claro);
  border-radius: 0 12px 12px 0; color: #1e293b; font-weight: 500;
}

/* Tabelas: rolagem horizontal no celular */
.blog-artigo table {
  display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-collapse: collapse; margin: 26px 0; font-size: 0.97rem;
  border-radius: 12px; box-shadow: 0 0 0 1px var(--blog-linha);
}
.blog-artigo th, .blog-artigo td { padding: 12px 14px; text-align: left; vertical-align: top; min-width: 150px; border-bottom: 1px solid var(--blog-linha); }
.blog-artigo th { background: var(--blog-marinho); color: #fff; font-weight: 700; }
.blog-artigo tr:nth-child(even) td { background: #f7f9fe; }

/* Assinatura do escritor (tag <address>) em card */
.blog-artigo address {
  font-style: normal; display: flex; align-items: center; gap: 16px;
  margin-top: 32px; padding: 18px 20px;
  background: linear-gradient(135deg, var(--blog-claro), #fff);
  border: 1px solid var(--blog-linha); border-radius: 16px;
}
.blog-artigo address img { width: 68px; height: 68px; object-fit: contain; border-radius: 50%; margin: 0; background: #fff; flex-shrink: 0; box-shadow: 0 0 0 3px var(--blog-vivo); }
.blog-artigo address strong { display: block; color: var(--blog-marinho); font-size: 1.08rem; font-weight: 800; }
.blog-artigo address span { color: var(--blog-suave); font-size: 0.95rem; }

/* "Veja também": a última lista do artigo vira botões */
.blog-artigo h2 + ul:last-child { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.blog-artigo h2 + ul:last-child li { margin: 0; }
.blog-artigo h2 + ul:last-child a {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: var(--blog-claro); border: 1px solid var(--blog-linha);
  text-decoration: none; font-size: 0.95rem;
}
.blog-artigo h2 + ul:last-child a:hover { background: var(--blog-vivo); color: #fff; }

/* ===== Página /blog (lista de artigos) ===== */
.blog-lista { max-width: 1100px; margin: 0 auto; }
.blog-lista__topo { text-align: center; color: #fff; padding: 16px 0 4px; }
.blog-lista__topo h1 { color: #fff; font-size: 2.6rem; margin: 0 0 8px; }
.blog-lista__topo p { color: rgba(255,255,255,0.88); font-size: 1.1rem; margin: 0 auto; max-width: 620px; }
.blog-lista__topo hr { width: 140px; margin: 24px auto 32px; background: linear-gradient(90deg, transparent, #fff, transparent); }

.blog-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.blog-card {
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(3, 53, 252, 0.3);
  display: flex; flex-direction: column;
}
.blog-card__capa { display: block; background: var(--blog-claro); }
.blog-card__capa img { display: block; width: 100%; height: auto; } /* sem corte */
.blog-card__corpo { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card time { align-self: flex-start; }
.blog-card h2 { font-size: 1.3rem; margin: 4px 0 0; }
.blog-card h2 a { color: inherit; text-decoration: none; }
.blog-card h2 a:hover { color: var(--blog-vivo); }
.blog-card p { color: var(--blog-suave); margin: 0; flex: 1; }
.blog-card__botao {
  align-self: flex-start; margin-top: 6px;
  background: var(--blog-vivo); color: #fff; text-decoration: none; font-weight: 700;
  padding: 10px 20px; border-radius: 999px;
}
.blog-card__botao:hover { background: var(--blog-marinho); }

@media (max-width: 760px) {
  .blog-grade { grid-template-columns: 1fr; }
  .blog-artigo { padding: 26px 18px; border-radius: 16px; }
  .blog-artigo h1 { font-size: 1.7rem; }
  .blog-artigo h2 { font-size: 1.32rem; }
  .blog-lista__topo h1 { font-size: 2rem; }
  main { padding: 12px 10px 40px; }
}