/* ================================
   BLOG.CSS — Listagem e post público
   Carregado depois de global.css, só em blog.php/post.php.
   ================================ */

.blog-hero {
  padding-top: 140px;
  padding-bottom: 3rem;
}

.blog-search-form {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
  margin-top: 2rem;
}

.blog-search-form .input {
  flex: 1;
}

.blog-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.blog-categoria-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  font-size: 0.85rem;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  transition: all var(--duration-fast) ease;
}

.blog-categoria-chip:hover {
  border-color: var(--border-hover);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.blog-categoria-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ================================
   GRID DE POSTS
   ================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

.blog-card {
  padding: 0;
  overflow: hidden;
}

.blog-card-link {
  display: block;
}

.blog-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.blog-card-img--placeholder {
  background: linear-gradient(135deg, rgba(222, 127, 86, 0.15), rgba(255, 179, 0, 0.08));
}

.blog-card-body {
  padding: 1.5rem;
}

.blog-card-categoria {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
  margin-bottom: 0.5rem;
}

/* h2 na listagem (blog.php, logo abaixo do h1) e h3 no "Continue lendo"
   (post.php, abaixo do h2 da seção): o nível certo em cada contexto, o mesmo
   visual nos dois. O letter-spacing desfaz o -0.01em que o global.css dá a
   todo h2 — sem ele o título do card da listagem ficava mais apertado. */
.blog-card-body h2,
.blog-card-body h3 {
  font-size: 1.2rem;
  letter-spacing: normal;
  margin-bottom: 0.5rem;
}

.blog-card-body p {
  font-size: 0.92rem;
  margin-bottom: 0.75rem;
}

.blog-card-data {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.blog-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-muted);
}

.blog-empty-state .icone {
  font-size: 2rem;
  color: var(--border-hover);
}

.blog-empty-state p {
  margin: 0;
  font-size: 1rem;
}

/* ================================
   PAGINAÇÃO
   ================================ */
.blog-pagination {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.blog-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

.blog-pagination a.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ================================
   PÁGINA DO POST
   ================================ */
.blog-post {
  padding-top: 140px;
}

.blog-post-container {
  max-width: 760px;
}

/* Botão de voltar do post: círculo no canto superior esquerdo, logo abaixo da
   logo. Fica FIXO na margem esquerda vazia — a coluna de conteúdo tem no máximo
   760px e o container 1280px, então sobra espaço de fora dela nas telas largas.
   z-index abaixo da .topbar (1000) e top calculado a partir de --header-height,
   que garante folga mesmo com o header encolhido (.topbar.scrolled = 70px). */
.blog-voltar-btn {
  position: fixed;
  top: calc(var(--header-height) + 1.5rem);
  left: 2rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: rgba(5, 5, 5, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  font-size: 1rem;
  transition: all var(--duration-fast) ease;
}

.blog-voltar-btn:hover {
  border-color: var(--primary);
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
  transform: translateX(-3px);
}

.blog-voltar-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Abaixo de ~1024px a margem esquerda acaba (a coluna de 760px encosta nas
   bordas) e o botão fixo passaria por cima do breadcrumb. Aí ele volta para o
   fluxo, acima do breadcrumb — que é onde ele já está no HTML, justamente para
   esta troca custar só uma propriedade. `display: flex` em vez de inline-flex
   porque margem vertical em caixa inline não é confiável. */
@media (max-width: 1024px) {
  .blog-voltar-btn {
    position: static;
    display: flex;
    margin-bottom: 1.25rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .blog-voltar-btn:hover {
    transform: none;
  }
}

.blog-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.blog-breadcrumb a {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

.blog-breadcrumb a:hover {
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
}

.blog-breadcrumb .icone {
  font-size: 0.65rem;
  opacity: 0.6;
}

/* O item atual (título do post) não é link — trunca para não quebrar a
   trilha em telas estreitas com um título longo. */
.blog-breadcrumb span {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-post-header h1 {
  margin-top: 0.75rem;
}

.blog-post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Data · autor · tempo de leitura. O ponto separador é desenhado pelo CSS (não
   existe no HTML), então some sozinho quando o autor não está preenchido. */
.blog-post-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}

.blog-post-info > * + *::before {
  content: '·';
  margin-right: 0.9rem;
  opacity: 0.6;
}

.blog-post-autor strong {
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-weight: 600;
}

.blog-post-data {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Tags do post e o aviso de filtro na listagem /blog/tag/{slug}. */
.blog-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.blog-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  font-size: 0.8rem;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  transition: all var(--duration-fast) ease;
}

.blog-tag::before {
  content: '#';
  margin-right: 0.15rem;
  opacity: 0.6;
}

.blog-tag:hover {
  border-color: var(--primary);
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
}

.blog-tag-ativa {
  margin-top: 1.25rem;
  font-size: 0.9rem;
}

.blog-tag-ativa strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.blog-tag-ativa a {
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
  text-decoration: underline;
}

.blog-share {
  display: flex;
  gap: 0.5rem;
}

.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.blog-share-btn:hover {
  border-color: var(--primary);
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
}

.blog-share-btn.is-copiado {
  border-color: var(--success);
  color: var(--success) !important;
  -webkit-text-fill-color: var(--success) !important;
}

.blog-post-capa {
  width: 100%;
  border-radius: var(--radius-md);
  margin: 2rem 0;
  box-shadow: var(--shadow-lg);
}

/* Conteúdo vem sanitizado do banco (whitelist de tags em api/config.php) —
   estilos básicos de tipografia para o HTML renderizado do post. */
.blog-post-content {
  color: var(--text-muted);
  line-height: 1.8;
}

.blog-post-content p {
  margin-bottom: 1.5rem;
}

.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
  margin-top: 2rem;
}

.blog-post-content ul,
.blog-post-content ol {
  margin: 0 0 1.5rem 1.5rem;
  list-style: revert;
}

.blog-post-content blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  color: #fff;
  font-style: italic;
}

.blog-post-content a {
  color: var(--primary) !important;
  -webkit-text-fill-color: var(--primary) !important;
  text-decoration: underline;
}

/* Cor do texto: {cor:nome}…{/cor} no Markdown vira <span class="cor-nome">.
   Os valores espelham coresDoConteudo() (api/markdown.php), e o tests/run.php
   confere que os dois andam juntos. O -webkit-text-fill-color vai junto porque
   o global.css o define em <p> e nos títulos: herdado, venceria o `color`. */
.blog-post-content .cor-laranja  { color: #de7f56; -webkit-text-fill-color: #de7f56; }
.blog-post-content .cor-amarelo  { color: #ffb300; -webkit-text-fill-color: #ffb300; }
.blog-post-content .cor-verde    { color: #5ad17a; -webkit-text-fill-color: #5ad17a; }
.blog-post-content .cor-azul     { color: #4da3ff; -webkit-text-fill-color: #4da3ff; }
.blog-post-content .cor-roxo     { color: #b388ff; -webkit-text-fill-color: #b388ff; }
.blog-post-content .cor-rosa     { color: #ff6fa5; -webkit-text-fill-color: #ff6fa5; }
.blog-post-content .cor-vermelho { color: #ff5252; -webkit-text-fill-color: #ff5252; }
.blog-post-content .cor-branco   { color: #ffffff; -webkit-text-fill-color: #ffffff; }

/* Link dentro de um trecho pintado acompanha a cor do trecho (o sublinhado é o
   que continua dizendo que é link). Sem isto a regra do link, com !important,
   vencia a cor herdada — e o mesmo link aceitava cor se pintado sozinho. */
.blog-post-content [class^="cor-"] a {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.blog-post-content img {
  border-radius: var(--radius-sm);
  margin: 1.5rem 0;
}

.blog-post-gallery {
  margin-top: 2.5rem;
}

.blog-post-gallery h2 {
  font-size: 1.4rem;
}

.post-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.85rem;
}

.post-gallery-item {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.post-gallery-item img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  transition: transform var(--duration-normal) ease;
}

.post-gallery-item:hover img {
  transform: scale(1.05);
}

.blog-post-voltar {
  margin-top: 3rem;
}

/* ================================
   RELACIONADOS (fim do post)
   ================================ */
.blog-relacionados {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-light);
}

.blog-relacionados h2 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

/* Mesmo .blog-grid da listagem, só que num container mais largo (não o
   blog-post-container de 760px) — 3 cards lado a lado em vez de empilhados. */
.blog-grid--relacionados {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .blog-grid--relacionados {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 640px) {
  .blog-search-form {
    flex-direction: column;
  }
}