/* Blog (sellum.com/blog) · o que é só do blog. O resto vem do site:
   _SYSTEM/tokens.css, css/componentes.css e css/secoes.css (topo, post__, meta-post, abas, caixa-info).
   Lista: a estrutura da página Cases. Post: blog-post-modelo.html (Figma 1602:2651).
   O texto do post sai do Markdown (help/app/markdown.php), por isso os estilos de .blog__texto
   vão direto nas tags (h2, p, ul...), com os mesmos estilos de texto do Figma. */

.blog__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-48);
}

/* Abas como links (as do site são botões de filtro): a categoria aberta fica marcada */
.abas a.abas__aba { text-decoration: none; }
.abas__aba[aria-current="page"] {
  color: var(--tema-contraste-texto);
  background: var(--tema-contraste);
}

/* ---------- Grade e card de post (base: Card de case) ---------- */
.blog__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-48) var(--espaco-32);
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog__cards > li { display: flex; }

.card-post {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-12);
  width: 100%;
}
.card-post__capa {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1024 / 480;
  overflow: hidden;
  background: var(--tema-superficie);
  color: var(--tema-texto-3);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-card);
  box-sizing: border-box;
}
.card-post__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card-post:hover .card-post__capa img { transform: scale(1.03); }
.card-post__tag {
  position: absolute;
  top: var(--espaco-16);
  left: var(--espaco-16);
  padding: calc(var(--espaco-8) / 2) var(--espaco-12);
  background: var(--cor-neutro-900-92);
  color: var(--cor-neutro-branco);
  border-radius: var(--raio-pill);
}
.card-post__titulo { margin: 0; color: var(--tema-texto); }
.card-post__resumo {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--tema-texto-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.card-post__meta { margin: 0; color: var(--tema-texto-3); }
.card-post__link { color: var(--tema-texto-2); transition: color 0.2s ease; }
.card-post__link::after { content: ""; position: absolute; inset: 0; } /* o card inteiro leva ao post */
.card-post:hover .card-post__link,
.card-post__link:focus-visible { color: var(--tema-texto); }
.card-post__link:focus-visible { outline: 0; }
.card-post__link:focus-visible::after {
  outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo);
  outline-offset: var(--espaco-8);
  border-radius: var(--raio-card);
}
@media (prefers-reduced-motion: reduce) {
  .card-post__capa img { transition: none; }
}

.blog__paginas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-16);
  color: var(--tema-texto-2);
}

/* ---------- Post ---------- */
.blog__trilha ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-8);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--tema-texto-2);
}
.blog__trilha li + li::before { content: "/"; margin-right: var(--espaco-8); color: var(--tema-texto-3); }
.blog__trilha a { color: inherit; text-decoration: none; }
.blog__trilha a:hover { color: var(--tema-texto); }
.blog__resumo { max-width: var(--largura-texto); margin: 0; color: var(--tema-texto-2); }
.blog__cargo { color: var(--tema-texto-2); font-weight: 400; }

/* Texto do post: Título/5 e Título/6 nos tópicos, Web/Corpo nos parágrafos, coluna de 720 */
.blog__texto { gap: var(--espaco-24); }
.blog__texto > * { margin: 0; }
.blog__texto h2 { margin-top: var(--espaco-24); font: 400 36px/44px var(--fonte-titulo); color: var(--tema-texto); }
.blog__texto h3 { margin-top: var(--espaco-8); font: 400 28px/36px var(--fonte-titulo); color: var(--tema-texto); }
.blog__texto h4 { font: 500 18px/26px var(--fonte-corpo); color: var(--tema-texto); }
.blog__texto h2,
.blog__texto h3,
.blog__texto h4 { scroll-margin-top: calc(var(--altura-cabecalho) + var(--espaco-24)); }
.blog__texto p,
.blog__texto li,
.blog__texto td { font: 400 16px/24px var(--fonte-corpo); color: var(--tema-texto-2); }
.blog__texto strong { font-weight: 600; color: var(--tema-texto); }
.blog__texto a { color: var(--tema-texto); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--tema-borda-forte); }
.blog__texto a:hover { text-decoration-color: currentColor; }
.blog__texto ul,
.blog__texto ol { display: flex; flex-direction: column; gap: var(--espaco-8); padding-left: var(--espaco-24); }
.blog__texto ul { list-style: disc; }
.blog__texto ol { list-style: decimal; }
.blog__texto li ul,
.blog__texto li ol { margin-top: var(--espaco-8); }
.blog__texto li::marker { color: var(--tema-texto-3); }
.blog__texto figure,
.blog__texto p > img { display: flex; flex-direction: column; gap: var(--espaco-12); }
.blog__texto img {
  display: block;
  max-width: 100%;
  height: auto;
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-card);
}
.blog__texto figcaption { font: 500 14px/20px var(--fonte-corpo); color: var(--tema-texto-3); text-align: center; }
.blog__texto blockquote {
  padding-left: var(--espaco-24);
  border-left: var(--linha-espessura) solid var(--cor-apoio-azul-vivo);
}
.blog__texto blockquote p { font: 400 18px/26px var(--fonte-corpo); color: var(--tema-texto); }
.blog__texto hr { width: 100%; height: 0; border: 0; border-top: var(--linha-fina) solid var(--tema-borda); }

/* Avisos (> [!DICA] ...): a Caixa de info do site (Figma 1599:919) */
.blog__texto .aviso {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-12);
  padding: var(--espaco-32);
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-card);
}
.blog__texto .aviso > * { margin: 0; }
.blog__texto .aviso__rotulo { font: 400 28px/36px var(--fonte-titulo); color: var(--tema-texto); }
.blog__texto .aviso--atencao .aviso__rotulo,
.blog__texto .aviso--importante .aviso__rotulo { color: var(--cor-apoio-azul-vivo); }

.blog__texto .tabela { overflow-x: auto; border: var(--linha-fina) solid var(--tema-borda); border-radius: var(--raio-card); }
.blog__texto table { width: 100%; border-collapse: collapse; }
.blog__texto th { font: 500 14px/20px var(--fonte-corpo); color: var(--tema-texto); text-align: left; background: var(--tema-superficie); }
.blog__texto th,
.blog__texto td { padding: var(--espaco-12) var(--espaco-16); border-bottom: var(--linha-fina) solid var(--tema-borda); vertical-align: top; }
.blog__texto tr:last-child td { border-bottom: 0; }
.blog__texto code { padding: 2px 6px; font: 400 14px/20px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--tema-superficie); border-radius: var(--raio-ui); color: var(--tema-texto); }
.blog__texto pre { overflow-x: auto; padding: var(--espaco-24); background: var(--tema-superficie); border-radius: var(--raio-card); }
.blog__texto pre code { padding: 0; background: none; }

.blog__rodape-post { margin-top: var(--espaco-48); gap: var(--espaco-16); }
.blog__tags { justify-content: flex-start; margin: 0; padding: 0; list-style: none; }
.blog__atualizado { margin: 0; color: var(--tema-texto-3); }

@media (max-width: 1099px) {
  .blog__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .blog__texto h2 { font-size: 28px; line-height: 36px; }
  .blog__texto h3 { font-size: 22px; line-height: 30px; }
  .blog__texto .aviso { padding: var(--espaco-24); }
  .blog__resumo { font-size: 18px; line-height: 26px; }
}
@media (max-width: 599px) {
  .blog__cards { grid-template-columns: minmax(0, 1fr); }
}