/* artigo.css: estilos do layout de artigo e do hub (dono: L4, hubs e artigos, 24/10/2026).
   O head.html carrega este arquivo (e o guia.css) quando page.layout for artigo ou hub.
   Só var(--ra-*) de ra-tokens.css; nenhum hex. Mobile primeiro (quebra em 768px).
   Os componentes (trilha, situações, áreas, FAQ, lei, quando procurar, revisão, cartão de artigo)
   estão no guia.css; aqui fica só a moldura da página e o corpo do artigo. */

/* Moldura: a navbar da casca atual é fixa (72px, main.css); o conteúdo começa abaixo dela. */
.ra-pagina-guia { background: var(--ra-superficie); padding: calc(72px + 1rem) 0 3rem; }
.ra-pagina-guia__miolo { max-width: var(--ra-largura-leitura); margin: 0 auto; padding: 0 1rem; }
.ra-pagina-guia__cabecalho { margin: 0 0 1.5rem; }
.ra-pagina-guia__titulo { color: var(--ra-azul); font-size: 1.875rem; line-height: 1.2; font-weight: 800; margin: 0 0 .75rem; overflow-wrap: break-word; }
.ra-pagina-guia__intro { margin: 0; color: var(--ra-gray-700); }
.ra-pagina-guia__secao { margin: 2rem 0; }
.ra-pagina-guia__subtitulo { color: var(--ra-azul); font-size: 1.375rem; line-height: 1.3; font-weight: 700; margin: 0 0 1rem; }
.ra-pagina-guia__data { margin: 0 0 1rem; font-size: .9375rem; color: var(--ra-gray-600); }

/* Capa: só a partir de 768px (no celular, nenhuma imagem acima da dobra; com loading="lazy" e
   display:none, o navegador nem baixa a imagem). Sem `imagem` no front matter, nada é gerado. */
.ra-pagina-guia__capa { display: none; }

/* Resposta direta (40 a 60 palavras) em destaque */
.ra-artigo__resposta { margin: 0 0 1.5rem; padding: 1rem; background: var(--ra-dourado-claro); border-left: 4px solid var(--ra-dourado); border-radius: var(--ra-raio-botao); color: var(--ra-gray-800); }
.ra-artigo__resposta > :first-child { margin-top: 0; }
.ra-artigo__resposta > :last-child { margin-bottom: 0; }

/* "Nesta página" */
.ra-artigo__sumario { margin: 0 0 2rem; padding: 1rem; background: var(--ra-tinta-azul-2); border-radius: var(--ra-raio-card); }
.ra-artigo__sumario-titulo { margin: 0 0 .25rem; font-size: 1rem; color: var(--ra-azul); font-weight: 700; }
.ra-artigo__sumario ol { margin: 0; padding-left: 1.25rem; }
.ra-artigo__sumario a { display: inline-block; min-height: 44px; padding: .625rem 0; color: var(--ra-azul-2); text-decoration: underline; text-underline-offset: 2px; }

/* Corpo em Markdown (o reset do main.css zera margens e recuos) */
.ra-artigo__corpo h2 { color: var(--ra-azul); font-size: 1.375rem; line-height: 1.3; font-weight: 700; margin: 2rem 0 1rem; }
.ra-artigo__corpo h3 { color: var(--ra-azul); font-size: 1.125rem; line-height: 1.35; margin: 1.5rem 0 .5rem; }
.ra-artigo__corpo p, .ra-artigo__corpo ul, .ra-artigo__corpo ol { margin: 0 0 1rem; }
.ra-artigo__corpo ul, .ra-artigo__corpo ol { padding-left: 1.25rem; }
.ra-artigo__corpo li { margin: .25rem 0; }
.ra-artigo__corpo a { color: var(--ra-azul-2); text-decoration: underline; text-underline-offset: 2px; }
.ra-artigo__corpo a:hover { color: var(--ra-azul); }
.ra-artigo__corpo blockquote { margin: 0 0 1rem; padding: .5rem 1rem; border-left: 4px solid var(--ra-gray-300); color: var(--ra-gray-700); }
.ra-pagina-guia [id] { scroll-margin-top: calc(72px + 1rem); }

/* Tabela: a rolagem é do contêiner, nunca da página. Uso no Markdown:
   <div class="ra-tabela" role="region" aria-label="..." tabindex="0" markdown="1"> | tabela | </div> */
.ra-tabela { max-width: 100%; overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--ra-gray-200); border-radius: var(--ra-raio-card); background: var(--ra-superficie); }
.ra-tabela:focus-visible { outline: 3px solid var(--ra-azul-2); outline-offset: 2px; }
.ra-tabela table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.ra-tabela th, .ra-tabela td { padding: .625rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ra-gray-200); }
.ra-tabela th { color: var(--ra-azul); font-weight: 700; background: var(--ra-tinta-azul-2); white-space: nowrap; }
.ra-tabela tr:last-child td { border-bottom: 0; }

/* Instagram, relacionados e links de saída do artigo */
.ra-artigo__links { margin: 2rem 0; }
.ra-artigo__links p { margin: 0 0 .5rem; }
.ra-artigo__links a { display: inline-block; min-height: 44px; padding: .625rem 0; color: var(--ra-azul-2); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ra-artigo__links a:hover { color: var(--ra-azul); }

@media (min-width: 768px) {
  .ra-pagina-guia { padding: calc(72px + 2rem) 0 4rem; }
  .ra-pagina-guia__miolo { padding: 0 1.5rem; }
  .ra-pagina-guia__titulo { font-size: 2.5rem; }
  .ra-pagina-guia__subtitulo, .ra-artigo__corpo h2 { font-size: 1.625rem; }
  .ra-pagina-guia__capa { display: block; width: 100%; height: auto; margin: 0 0 2rem; border-radius: var(--ra-raio-card); }
}