/* Seção de chamada do blog na home (bloco BLOG-CHAMADA), grade do acervo em
   /blog/ e páginas dos artigos importados.
   Ajustes pontuais sobre o template Webflow, escopados para não afetar o resto do site.
   A borda suave que separa a seção das vizinhas vem da própria convenção do template
   (.section.borders, a mesma usada em "serviços"), não daqui. */

/* O template define .posts { margin-bottom: -56px } contando que cada filho traga
   margin-bottom: 56px (como .post-card-v1). Os cards .post-33 não trazem, então a
   margem negativa puxava o botão "ver todos os artigos" para cima dos cards. */
#blog .posts,
#gradeArtigos {
  margin-bottom: 0;
}

#blog .post-33,
#gradeArtigos .post-33 {
  margin-bottom: 40px;
}

/* .post-heading vem com text-transform: capitalize do template, que em português
   capitaliza artigos e conjunções ("Qual A Relação?"). Títulos de artigo são texto
   real do cliente e devem aparecer como foram escritos. */
#blog .post-heading,
#gradeArtigos .post-heading {
  text-transform: none;
  margin-top: 0;
}

/* A capa dos cards do acervo é um <img> dentro do link, não background-image
   inline: a Netlify pós-processa o HTML e escapa as aspas da url() inline,
   invalidando o CSS e sumindo com todas as capas só no ar. O .post-card-preview-m
   do template tem padding e alinhamento pensados para background, então aqui ele
   vira um contêiner de imagem. */
#gradeArtigos .post-card-preview-m {
  display: block;
  padding: 0;
  overflow: hidden;
}

#gradeArtigos .post-card-preview-m img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#gradeArtigos .post-heading a {
  color: var(--dark);
  text-decoration: none;
}

#gradeArtigos .post-heading a:hover {
  color: var(--color-1);
}

/* Respiro entre a grade e o botão de fechamento da seção. */
#blog .posts + .button {
  margin-top: 24px;
}

/* ------------------------------------------------- páginas dos artigos do acervo
   Classes próprias: o template Webflow não traz layout de post. Coluna de leitura
   estreita (medida confortável), tipografia herdada do site. */
.artigo {
  max-width: 760px;
  margin-inline: auto;
}

.artigo h1 {
  font-size: 34px;
  line-height: 44px;
}

.artigo__capa {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 36px;
}

.artigo__corpo p,
.artigo__corpo li {
  color: var(--grey-1);
  font-size: 16px;
  line-height: 30px;
}

.artigo__corpo h2 {
  font-size: 26px;
  line-height: 34px;
  margin-top: 40px;
}

.artigo__corpo h3 {
  font-size: 19px;
  line-height: 28px;
  margin-top: 28px;
}

.artigo__corpo ul,
.artigo__corpo ol {
  padding-left: 22px;
  margin: 18px 0;
}

.artigo__corpo li {
  margin-bottom: 10px;
}

.artigo__corpo a {
  color: var(--color-1);
}

.artigo__voltar {
  margin-top: 48px;
}

.artigo__voltar a {
  color: var(--color-1);
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
  .artigo h1 {
    font-size: 26px;
    line-height: 34px;
  }
}