/* =========================================================================
   Blog — acréscimos ao style.css
   Nada aqui redefine token, header, footer ou selo: só o que é específico
   de listagem e de artigo.
   1. listagem · 2. cabeçalho de artigo · 3. corpo de texto · 4. autor ·
   5. leia também · 6. cta final · 7. responsivo
   ========================================================================= */

/* =========================================================================
   1. LISTAGEM
   ========================================================================= */

.blog-topo {
  padding-block: var(--s10) var(--s8);
  background: linear-gradient(180deg, var(--tint) 0%, var(--papel) 100%);
  border-bottom: 1px solid var(--linha);
}

.blog-topo h1 {
  font-size: var(--fs-700);
  margin-bottom: var(--s3);
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  transition: border-color var(--transicao);
}

.post-card:hover {
  border-color: var(--acao);
}

.post-card h2 {
  font-size: var(--fs-600);
  line-height: 1.25;
}

.post-card h2 a {
  text-decoration: none;
}

.post-card h2 a:hover {
  color: var(--ipe);
}

.post-card p {
  font-size: var(--fs-300);
  color: var(--tinta-suave);
}

.post-card .card-pe {
  margin-top: auto;
  padding-top: var(--s2);
}

.post-destaque {
  border-color: var(--linha-forte);
  background: var(--tint);
}

/* Faixa de capa do card. Altura fixa com overflow contido: a ilustração é
   quadrada e, sem isso, estoura por baixo e cai sobre a data — foi o que
   quebrou na primeira tentativa. O painel claro e o respiro em volta seguram
   o peso do traço preto para ele não competir com o título. */
.post-capa {
  display: grid;
  place-items: center;
  height: 156px;
  padding: var(--s2);
  margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s1);
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  overflow: hidden;
}

/* Altura em pixel, não em porcentagem: a imagem é quadrada e, com max-height
   percentual, a proporção vence a restrição e ela estoura o painel. */
.post-capa img {
  width: auto;
  height: 124px;
  max-width: 100%;
  object-fit: contain;
}

.post-destaque .post-capa {
  background: var(--branco);
}

/* =========================================================================
   2. CABEÇALHO DE ARTIGO
   ========================================================================= */

.artigo-topo {
  padding-block: var(--s8) var(--s6);
  border-bottom: 1px solid var(--linha);
}

.miolo {
  width: 100%;
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: var(--s3);
}

.breadcrumb {
  margin-bottom: var(--s5);
  font-family: var(--dados);
  font-size: var(--fs-100);
  color: var(--tinta-suave);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--s1);
  color: var(--ipe);
}

.breadcrumb a {
  text-decoration: none;
  border-bottom: 1px solid var(--linha-forte);
}

.breadcrumb a:hover {
  border-bottom-color: var(--ipe);
}

.breadcrumb [aria-current="page"] {
  color: var(--tinta);
}

.artigo-topo h1 {
  font-size: var(--fs-700);
  margin-bottom: var(--s3);
}

.artigo-meta {
  font-family: var(--dados);
  font-size: var(--fs-200);
  color: var(--tinta-suave);
}

/* Capa do artigo. A ilustração é quadrada e de traço denso: dar proporção fixa
   ao painel recortaria o desenho pelo meio, então quem manda é a altura da
   imagem e o painel cresce para caber. Ela vive só aqui, onde tem espaço
   próprio — nos cards de listagem competia com o título. */
.artigo-capa {
  margin-block: var(--s6) 0;
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: var(--tint);
  border-radius: var(--raio-g);
}

.artigo-capa img {
  width: auto;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}


/* =========================================================================
   3. CORPO DE TEXTO
   ========================================================================= */

.artigo-corpo {
  padding-block: var(--s8);
}

.artigo-corpo > * + * {
  margin-top: var(--s3);
}

.artigo-corpo p {
  max-width: none;
  line-height: 1.7;
}

.artigo-corpo h2 {
  margin-top: var(--s8);
  font-size: var(--fs-700);
}

.artigo-corpo h3 {
  margin-top: var(--s6);
  font-size: var(--fs-600);
}

.artigo-corpo h2 + p,
.artigo-corpo h3 + p {
  margin-top: var(--s2);
}

.artigo-corpo ul {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.artigo-corpo ul li {
  position: relative;
  padding-left: var(--s3);
  line-height: 1.7;
}

.artigo-corpo ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 12px;
  height: 1px;
  background: var(--ipe);
}

.artigo-corpo blockquote {
  padding-left: var(--s3);
  border-left: 2px solid var(--ipe);
  font-size: var(--fs-500);
  line-height: 1.55;
  color: var(--tinta);
}

.artigo-corpo strong {
  font-weight: 600;
}

/* --acao-forte é quase preto — usá-lo aqui deixaria o link do corpo do
   texto quase idêntico à tinta ao redor, sinalizado só pelo sublinhado
   fraco. Latão é o acento de interação do sistema; aqui ele cumpre o
   mesmo papel que já cumpre no link-zap e no hover dos cards.
   :not(.btn) importa: o CTA final é um <a class="btn btn-primario"> dentro
   do próprio artigo-corpo, e sem essa exclusão esta regra — mais específica
   que .btn-primario sozinha — vazava latão para dentro do botão, que devia
   ficar marfim sobre fundo escuro. */
.artigo-corpo a:not(.btn) {
  color: var(--ipe);
  text-decoration: none;
  border-bottom: 1px solid var(--linha-forte);
  transition: border-color var(--transicao);
}

.artigo-corpo a:not(.btn):hover {
  border-bottom-color: var(--ipe);
}

.artigo-corpo .aviso {
  margin-top: var(--s8);
}

.artigo-corpo .aviso p {
  max-width: none;
}

/* nota de fonte ao pé de uma afirmação factual */
.fonte {
  font-size: var(--fs-200);
  color: var(--tinta-suave);
}

/* =========================================================================
   4. BOX DO AUTOR
   ========================================================================= */

.autor {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--s3);
  align-items: start;
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--linha);
}

.autor img {
  width: 84px;
  height: 84px;
  border-radius: var(--raio);
  object-fit: cover;
}

.autor h2 {
  font-size: var(--fs-600);
  margin-bottom: var(--s1);
}

.autor p {
  max-width: none;
  font-size: var(--fs-300);
  color: var(--tinta-suave);
}

/* =========================================================================
   5. LEIA TAMBÉM
   ========================================================================= */

.leia-tambem {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--linha);
}

.leia-tambem h2 {
  font-size: var(--fs-600);
  margin-bottom: var(--s3);
}

.leia-tambem ul {
  display: grid;
  gap: var(--s2);
}

.leia-tambem li {
  padding: 0;
}

.leia-tambem li::before {
  display: none;
}

.leia-tambem a {
  display: block;
  padding: var(--s3);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  text-decoration: none;
  transition: border-color var(--transicao);
}

.leia-tambem a:hover {
  border-color: var(--acao);
}

.leia-tambem .titulo {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-400);
  line-height: 1.3;
  color: var(--tinta);
}

.leia-tambem .rotulo {
  display: block;
  margin-bottom: 2px;
  font-family: var(--dados);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ipe);
}

/* =========================================================================
   6. CTA FINAL
   ========================================================================= */

.cta-artigo {
  margin-top: var(--s8);
  padding: var(--s5);
  background: var(--tint);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-g);
}

.cta-artigo h2 {
  font-size: var(--fs-600);
  margin-bottom: var(--s2);
}

.cta-artigo p {
  max-width: none;
  font-size: var(--fs-300);
  color: var(--tinta-suave);
  margin-bottom: var(--s3);
}

/* =========================================================================
   7. RESPONSIVO
   ========================================================================= */

@media (max-width: 900px) {
  .artigo-corpo {
    padding-block: var(--s6);
  }
}

@media (max-width: 640px) {
  .miolo {
    padding-inline: var(--s2);
  }

  .autor {
    grid-template-columns: 1fr;
  }

  .post-card {
    padding: var(--s4);
  }

  /* o recuo negativo da capa precisa acompanhar o padding menor do card */
  .post-capa {
    height: 140px;
    margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s1);
  }

  .post-capa img {
    height: 108px;
  }


  .cta-artigo {
    padding: var(--s4);
  }
}