/* ---------------------------------------------------------------------------
   Camada do blog. Carrega depois de site-base.css (tokens + cabeçalho/rodapé
   do site, gerado por ferramentas/montar-tema-blog.mjs).

   Mesma regra de src/styles/site.css: cor, fonte, raio, sombra e espaçamento
   só dos tokens; aqui entram layout, @media e o texto corrido do artigo.
   --------------------------------------------------------------------------- */

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Faixa de abertura (lista, categoria, busca, 404 e topo do artigo) ----- */

.blog-topo { background: var(--action); color: var(--on-action); padding-block: var(--space-7); }
.blog-topo__conteudo { display: grid; gap: var(--space-4); justify-items: start; }
.blog-topo .eyebrow,
.blog-topo .blog-meta { color: var(--on-action); }
.blog-topo h1 { font-size: clamp(34px, 6vw, 64px); max-width: none; }
.blog-topo__texto { margin: 0; max-width: none; }

@media (min-width: 768px) {
  .blog-topo { padding-block: var(--space-8); }
}

/* Trilha no topo do artigo: BLOG / CATEGORIA, no estilo do eyebrow do site. */
.blog-migalha { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); font: 700 13px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; }
.blog-migalha a { color: var(--on-action); text-decoration: none; padding-bottom: 4px; border-bottom: var(--stroke-strong) solid transparent; }
.blog-migalha a:hover,
.blog-migalha a.blog-migalha__atual { border-bottom-color: var(--brand-amarelo); }

/* Menos espaço entre a faixa azul e a imagem de capa do artigo. */
.blog-artigo > .site-section { padding-top: var(--space-6); }
.blog-migalha a:focus-visible { outline: var(--stroke-focus) solid var(--on-action); outline-offset: 3px; }

.blog-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; font: 500 15px/1.3 var(--font-sans); }

/* Etiquetas de categoria: no cartão ficam em azul claro; na faixa azul, em papel. */
.blog-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.blog-tags a { text-decoration: none; }
.blog-tags a:hover { background: var(--brand-amarelo); color: var(--on-amarelo); }

/* --- Busca ----------------------------------------------------------------- */

.blog-busca { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; max-width: 32rem; }
.blog-busca .pe-input { flex: 1 1 14rem; width: auto; }

/* --- Cartões --------------------------------------------------------------- */

.blog-grade { align-items: stretch; }
.blog-card { height: 100%; }

/* Proporção do thumbnail do design system: 1200 x 630. */
.blog-card__media { aspect-ratio: 1200 / 630; display: grid; background: var(--brand-azul); overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__media .blog-card__marca { width: 96px; height: 96px; object-fit: contain; place-self: center; }

.pe-card__title a { color: var(--text); text-decoration: none; }
.pe-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; }

.blog-card .pe-card__body { flex: 1; }
.blog-card .pe-card__text { flex: 1; }
.blog-card__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0; }

.blog-vazio { display: grid; gap: var(--space-4); justify-items: start; }
.blog-vazio p { margin: 0; }

/* --- Paginação ------------------------------------------------------------- */

.pagination { margin-top: var(--space-7); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 var(--space-4);
  border: var(--stroke-strong) solid var(--border-control); border-radius: var(--radius-btn);
  color: var(--text); font: 700 15px/1 var(--font-sans); text-decoration: none;
  background: var(--surface-card);
}
.pagination a.page-numbers:hover { background: var(--surface-alt); }
.pagination .page-numbers.current { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }
.pagination .page-numbers.dots { border-color: transparent; background: transparent; }
.pagination .page-numbers:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 3px; }

/* --- Artigo ---------------------------------------------------------------- */

.blog-capa { margin: 0 auto var(--space-7); max-width: 56rem; }
.blog-capa img {
  display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: var(--radius-lg); border: var(--stroke-hairline) solid var(--border);
  box-shadow: var(--shadow-card);
}

.blog-conteudo { font: 400 18px/1.7 var(--font-sans); color: var(--text); }
.blog-conteudo > * + * { margin-top: var(--space-4); }
.blog-conteudo h2 {
  margin-top: var(--space-7); font: 900 clamp(26px, 4vw, 36px)/1 var(--font-display); text-transform: uppercase;
}
.blog-conteudo h3 { margin-top: var(--space-6); font: 700 22px/1.25 var(--font-sans); }
.blog-conteudo h4 { margin-top: var(--space-5); font: 700 18px/1.3 var(--font-sans); }
.blog-conteudo a { color: var(--link); font-weight: 600; text-underline-offset: 3px; }
.blog-conteudo ul,
.blog-conteudo ol { padding-left: var(--space-5); }
.blog-conteudo li + li { margin-top: var(--space-2); }
.blog-conteudo img,
.blog-conteudo video { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.blog-conteudo figure { margin-inline: 0; }
.blog-conteudo figcaption { margin-top: var(--space-2); font: 400 13px/1.4 var(--font-sans); color: var(--text-muted); }
.blog-conteudo blockquote {
  margin-inline: 0; padding: var(--space-4) var(--space-5);
  background: var(--surface-alt); border-left: var(--stroke-focus) solid var(--brand-magenta);
  border-radius: var(--radius-md);
}
.blog-conteudo blockquote p { margin: 0; }
.blog-conteudo table { width: 100%; border-collapse: collapse; font-size: 16px; }
.blog-conteudo th,
.blog-conteudo td { padding: var(--space-3); border-bottom: var(--stroke-hairline) solid var(--border); text-align: left; }
.blog-conteudo th { background: var(--surface-alt); font-weight: 700; }
.blog-conteudo code { font-size: .9em; padding: 2px 6px; background: var(--surface-alt); border-radius: var(--radius-xs); }
.blog-conteudo hr { border: 0; border-top: var(--stroke-hairline) solid var(--border); margin-block: var(--space-6); }

/* Imagens alinhadas e largas do editor de blocos. */
.blog-conteudo .alignwide { max-width: none; }
.blog-conteudo .aligncenter { margin-inline: auto; display: block; }

@media (max-width: 619px) {
  .blog-conteudo { font-size: 17px; }
  .blog-busca .pe-btn { width: 100%; }
}

/* --- Destaques (posts fixados no topo do blog) ------------------------------- */

.blog-destaques { display: grid; gap: var(--space-5); }
.blog-card--destaque .pe-card__title { font: 800 clamp(22px, 3vw, 28px)/1.2 var(--font-sans); }

@media (min-width: 900px) {
  .blog-destaques--2 { grid-template-columns: repeat(2, 1fr); }
  .blog-destaques--3 { grid-template-columns: repeat(2, 1fr); }

  /* Com 1 ou 3 destaques, o primeiro ocupa a largura toda, imagem ao lado do texto. */
  .blog-destaques--1 .blog-card--destaque,
  .blog-destaques--3 .blog-card--destaque:first-child { grid-column: 1 / -1; flex-direction: row; }
  .blog-destaques--1 .blog-card__media,
  .blog-destaques--3 .blog-card--destaque:first-child .blog-card__media { flex: 1 1 56%; aspect-ratio: auto; min-height: 300px; }
  .blog-destaques--1 .pe-card__body,
  .blog-destaques--3 .blog-card--destaque:first-child .pe-card__body { flex: 1 1 44%; justify-content: center; padding: var(--space-7); }
}

/* --- Efeito dos cartões: sobe 4px com sombra e a imagem amplia 5% (igual aos cartões da Home) --- */

.blog-card { transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.blog-card__media img { transition: transform .4s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-card:hover { transition: none; transform: none; }
  .blog-card__media img, .blog-card:hover .blog-card__media img { transition: none; transform: none; }
}

/* --- Barra de leitura no artigo ------------------------------------------------- */

.blog-progresso { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 60; pointer-events: none; }
.blog-progresso span {
  display: block; height: 100%; background: var(--brand-magenta);
  transform: scaleX(0); transform-origin: left center;
}
.blog-progresso[hidden] { display: none; }

/* --- Card de WhatsApp do fim do artigo (mesmo do site: .pe-cta centralizado) ---- */

.pe-cta { text-align: center; justify-items: center; }
.pe-cta__title { max-width: none; }
.pe-cta__text { max-width: 88ch; }
.blog-icone-zap { width: 20px; height: 20px; flex: none; }

/* --- Topo do artigo: título centralizado; "Blog" fica à esquerda ---------------------- */

.blog-topo--artigo .blog-topo__conteudo { justify-items: center; text-align: center; }

/* --- Compartilhar --------------------------------------------------------------- */

.blog-compartilhar {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: var(--stroke-hairline) solid var(--border);
  display: grid; gap: var(--space-3); max-width: 46rem; margin-inline: auto;
}
.blog-compartilhar h2 { margin: 0; }
.blog-compartilhar__lista { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.blog-compartilhar__icone { width: 20px; height: 20px; flex: none; }
.blog-compartilhar__icone--traco { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.blog-compartilhar__aviso { margin: 0; min-height: 1.4em; }

/* --- Ritmo vertical do blog: blocos mais próximos que no site (D77) ------------------ */
/* O site usa 48/64/96px entre seções; no blog a leitura pede menos. Somando o fim de um bloco
   com o começo do próximo, a distância cai de até 192px para 96px. */

.site-section { padding-block: var(--space-6); }

@media (min-width: 768px) {
  .site-section { padding-block: var(--space-7); }
}

@media (min-width: 1200px) {
  .site-section { padding-block: var(--space-7); }
}

.blog-artigo > .site-section { padding-top: var(--space-6); padding-bottom: var(--space-5); }
.blog-compartilhar { margin-top: var(--space-6); }

/* --- Tags no fim do artigo -------------------------------------------------------- */

.blog-tags-artigo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); max-width: 46rem; margin: var(--space-6) auto 0; }
.blog-tags-artigo__rotulo { margin: 0; font: 700 14px/1 var(--font-sans); color: var(--text-muted); }
.blog-tags-artigo__lista { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.blog-tags-artigo .pe-tag { text-decoration: none; }
.blog-tags-artigo .pe-tag:hover { background: var(--brand-amarelo); color: var(--on-amarelo); }
.blog-tags-artigo .pe-tag:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 3px; }
.blog-tags-artigo + .blog-compartilhar { margin-top: var(--space-5); }