/* =========================================================================
   Blog e artigos — complementos
   ========================================================================= */

#post-grid .post-card.hidden { display: none; }

.post-card.reveal { will-change: transform, opacity; }

/* Estado vazio da busca */
#post-grid.is-empty::after {
  content: attr(data-empty);
  grid-column: 1 / -1;
  display: block;
  text-align: center;
  color: var(--slate-400);
  padding: 48px 20px;
  font-size: 15.5px;
}

/* Cabeçalho do artigo com fundo suave */
.page-article .article-head h1 { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Índice do artigo (âncores internas) */
.article-body h2 { scroll-margin-top: 110px; }

/* Blocos de código / destaque dentro dos artigos */
.article-body pre {
  background: var(--navy); color: #e2e8f0; padding: 20px 22px; border-radius: 14px;
  overflow-x: auto; font-size: 14.5px; margin: 0 0 24px;
}
.article-body code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.92em; }
.article-body p code, .article-body li code {
  background: var(--blue-50); color: var(--blue); padding: 2px 7px; border-radius: 6px;
}

/* Tabelas dentro de artigos */
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 15px; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; }
.article-body th { background: var(--bg-soft); font-weight: 600; }

@media (max-width: 640px) {
  .article-head { padding: 40px 0 24px; }
  .article-cover { padding: 0 18px; }
  .article-body { padding-top: 32px; }
}