/* O blog (modelos/_comum/blog), igual em todos os modelos: só as variáveis da paleta comum e as fontes do site
   (docs/formato.md), para ficar com as cores e as letras de cada um. O cabeçalho e o rodapé são os do modelo. Num modelo
   escuro (data-tema="escuro"), os links e os detalhes vão no destaque; num claro, na principal. */

/* O cabeçalho dos modelos é fixo: o blog começa abaixo dele (vale por cima do .sem-topo dos modelos, que vem antes). */
.blog {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto, system-ui, sans-serif);
  padding-top: 6rem;
  padding-bottom: 5rem;
  --blog-link: var(--cor-principal);
  --blog-detalhe: var(--cor-destaque-escura);
}
[data-tema="escuro"] .blog {
  --blog-link: var(--cor-destaque);
  --blog-detalhe: var(--cor-destaque);
}
.blog a { color: var(--blog-link); }

.blog__caixa {
  box-sizing: border-box;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0;
}
.blog__caixa.blog-artigo { max-width: 48rem; }

.blog__trilha {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
  font-size: .875rem;
  color: var(--cor-texto-suave);
}
.blog .blog__trilha a { color: var(--cor-texto-suave); text-decoration: none; }
.blog .blog__trilha a:hover { color: var(--blog-link); }
.blog__trilha > * + *::before { content: "/"; margin-right: .5rem; color: var(--cor-borda); }
.blog__trilha [aria-current] { color: var(--cor-texto); }

.blog__topo { margin-bottom: 2.5rem; }
.blog__selo {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: 0 0 .75rem;
  color: var(--blog-detalhe);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.blog__selo a { color: inherit; text-decoration: none; }
.blog__titulo {
  margin: 0;
  color: var(--cor-texto);
  font-family: var(--fonte-titulo, Georgia, serif);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.blog__descricao { max-width: 46rem; margin-top: 1rem; color: var(--cor-texto-suave); line-height: 1.7; }
.blog__descricao p { margin: 0 0 .75rem; }

.blog__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.75rem;
}

.blog-cartao {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: .875rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.blog-cartao:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .35); }
.blog-cartao__capa { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cor-fundo-alt); }
.blog-cartao__capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Artigo sem capa: o mesmo espaço, com o ícone do modelo, para a grade não ficar com um buraco. */
.blog-cartao__capa--vazia { display: flex; align-items: center; justify-content: center; color: var(--blog-detalhe); }
.blog-cartao__capa--vazia svg { width: 3rem; height: 3rem; opacity: .55; }
.blog-cartao__corpo { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.4rem 1.4rem 1.5rem; }
.blog .blog-cartao__categoria {
  color: var(--blog-detalhe);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}
.blog-cartao__titulo {
  margin: 0;
  font-family: var(--fonte-titulo, Georgia, serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}
.blog .blog-cartao__titulo a { color: var(--cor-texto); text-decoration: none; }
.blog .blog-cartao__titulo a:hover { color: var(--blog-link); }
.blog-cartao__resumo { margin: 0; color: var(--cor-texto-suave); font-size: .95rem; line-height: 1.6; }
.blog-cartao__meta { margin: auto 0 0; padding-top: .4rem; color: var(--cor-texto-suave); font-size: .8rem; }

.blog__paginas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
  color: var(--cor-texto-suave);
  font-size: .9rem;
}
.blog .blog__botao {
  display: inline-block;
  padding: .7rem 1.4rem;
  border: 1px solid var(--blog-link);
  border-radius: 999px;
  color: var(--blog-link);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.blog .blog__botao:hover { background: var(--blog-link); color: var(--cor-fundo); }
.blog__voltar { margin-top: 3rem; text-align: center; }

/* O artigo */
.blog-artigo__resumo { margin: 1.25rem 0 0; color: var(--cor-texto-suave); font-size: 1.15rem; line-height: 1.6; }
.blog-artigo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin: 1.25rem 0 0;
  color: var(--cor-texto-suave);
  font-size: .875rem;
}
.blog-artigo__capa { margin: 0 0 2.5rem; }
.blog-artigo__capa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .875rem; }

.blog-texto { font-size: 1.075rem; line-height: 1.8; overflow-wrap: break-word; }
.blog-texto > :first-child { margin-top: 0; }
.blog-texto p, .blog-texto ul, .blog-texto ol, .blog-texto blockquote, .blog-texto table { margin: 0 0 1.4rem; }
.blog-texto h2, .blog-texto h3, .blog-texto h4 {
  margin: 2.4rem 0 1rem;
  color: var(--cor-texto);
  font-family: var(--fonte-titulo, Georgia, serif);
  font-weight: 600;
  line-height: 1.25;
}
.blog-texto h2 { font-size: 1.75rem; }
.blog-texto h3 { font-size: 1.4rem; }
.blog-texto h4 { font-size: 1.15rem; }
.blog-texto ul, .blog-texto ol { padding-left: 1.5rem; }
.blog-texto ul { list-style: disc; }
.blog-texto ol { list-style: decimal; }
.blog-texto li { margin-bottom: .4rem; }
.blog-texto li::marker { color: var(--blog-detalhe); }
.blog-texto a { text-decoration: underline; text-underline-offset: .2em; }
.blog-texto strong { font-weight: 700; }
.blog-texto em { font-style: italic; }
.blog-texto u { text-decoration: underline; }
.blog-texto s { text-decoration: line-through; }
.blog-texto blockquote {
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--blog-detalhe);
  color: var(--cor-texto-suave);
  font-style: italic;
}
.blog-texto hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--cor-borda); }
.blog-texto img { display: block; max-width: 100%; height: auto; margin: 1.75rem auto; border-radius: .5rem; }
/* Tabela larga rola de lado no celular, sem empurrar a página. */
.blog-texto table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; }
.blog-texto th, .blog-texto td { padding: .6rem .8rem; border: 1px solid var(--cor-borda); text-align: left; vertical-align: top; }
.blog-texto th { background: var(--cor-fundo-alt); font-weight: 600; }

.blog-artigo__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem 0 0; }
.blog .blog-artigo__tags a {
  padding: .3rem .8rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  color: var(--cor-texto-suave);
  font-size: .8rem;
  text-decoration: none;
}
.blog .blog-artigo__tags a:hover { border-color: var(--blog-link); color: var(--blog-link); }

.blog-autor {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding: 1.5rem;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: .875rem;
}
.blog-autor__foto { flex-shrink: 0; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; }
.blog-autor p { margin: 0; }
.blog-autor__nome { font-family: var(--fonte-titulo, Georgia, serif); font-size: 1.15rem; font-weight: 600; }
.blog-autor__oab { color: var(--blog-detalhe); font-size: .85rem; }
.blog-autor__bio { margin-top: .6rem; color: var(--cor-texto-suave); font-size: .95rem; line-height: 1.6; }
.blog-autor__bio p { margin: 0 0 .5rem; }

@media (max-width: 640px) {
  .blog__caixa { padding-top: 1.25rem; }
  .blog-texto { font-size: 1rem; }
  .blog-autor { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-cartao, .blog .blog__botao { transition: none; }
  .blog-cartao:hover { transform: none; }
}