/* ==========================================================================
   /blog — lista agrupada por tema (passada de SEO, 27/10/2026)
   --------------------------------------------------------------------------
   Vem depois do site.css e do /css/blog.css. O plano de SEO (2.5) pede todos
   os artigos na /blog, agrupados por tema, com um link de texto por artigo.
   Cada tema é uma <section> com um H2 (classe .titulo-cartao do site) e a
   mesma grade de 2 colunas de antes; o título de cada cartão virou H3 com
   link. Entre um tema e outro fica o espaço que já havia entre a grade e o
   botão (64 px; 56 no tablet; 48 no celular).
   ========================================================================== */

.blog-tema {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* Título do tema: alinhado à esquerda, com a borda dos cartões */
.blog-tema__titulo {
  width: 100%;
  overflow-wrap: break-word;
}

/* O título do cartão é o link do artigo: mesma cor e fonte de antes */
.blog-cartao .cartao-post__titulo a {
  color: inherit;
  transition: color 0.2s ease-out;
}

.blog-cartao .cartao-post__titulo a:hover {
  color: var(--cor-oliva);
}

/* O título agora é o H3 e o link do artigo: aparece inteiro. O corte em 3
   linhas do /css/blog.css (herdado do Framer) escondia o fim de dois títulos
   no celular ("…em Porto Alegre", "…para emagrecer"). O resumo segue com o
   corte em 2 linhas. */
.blog-cartao .cartao-post__titulo {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}

/* Os títulos agora têm de 1 a 3 linhas (no Framer todos tinham 3): os cartões
   de uma mesma linha ficam com a mesma altura e o "Ler artigo" vai para o pé,
   alinhado com o do cartão ao lado, como no site no ar. */
.blog-tema .blog__grade {
  align-items: stretch;
}

.blog-cartao > .link-seta {
  margin-top: auto;
}

@media (max-width: 1199.98px) {
  .blog-tema { gap: 24px; }
}

@media (max-width: 767.98px) {
  .blog-tema { gap: 20px; }
}

/* Retrato do médico como foto do cartão (mesma capa do artigo e do "Leia também"):
   a foto é quadrada e o quadro é mais largo que alto; o recorte fica perto do
   alto para mostrar o rosto inteiro (igual ao /css/paginas/artigo-emagrecimento.css). */
.blog-cartao__imagem img.foto-retrato {
  object-position: 50% 12%;
}