/* ==========================================================================
   Blog — lista de artigos (/blog)
   --------------------------------------------------------------------------
   Só esta página usa este arquivo (vem depois do site.css).
   Valores tirados da cópia exata (copia-exata/blog/index.html):
     - painel #fafafa (framer-1kftjhh): usa o .painel do site.css
     - coluna de dentro (framer-c06prw): grade e botão, com 64 px entre eles
       (56 no tablet, 48 no celular); depois dela, ainda dentro do painel,
       um respiro de 24 px (16 no tablet e no celular)
     - grade (framer-b2dsft): 2 colunas, 24 px entre os cartões; 1 no celular
     - cartão (framer-1nzhhm3 + "3x2 – M"/"3x2 – S"): usa o .cartao do site.css
   ========================================================================== */

/* Coluna de dentro do painel: grade e botão "Agende sua consulta" */
.blog__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
}

/* Respiro no fim do painel, depois da coluna ("P24" no computador, "P16" no tablet e no celular) */
.blog__fim {
  flex: none;
  width: 100%;
  height: 24px;
}

/* Grade: cada cartão fica com a altura do próprio conteúdo (não estica na linha) */
.blog__grade {
  align-items: start;
}

/* Cartão: no computador e no tablet ele não fica mais estreito que 300 px */
.blog-cartao {
  min-width: 300px;
}

/* Imagem 3:2 com cantos de 16 px (8 px no celular).
   Com o mouse em cima ela fica meio transparente (no Framer: opacity 0,5 com
   uma mola curta, que assenta em uns 0,3 s) */
.blog-cartao__imagem {
  transition: opacity 0.3s ease-out;
}

.blog-cartao__imagem:hover {
  opacity: 0.5;
}

.blog-cartao__imagem img {
  object-position: center;
}

/* Título: até 3 linhas; o que passar é cortado, como no Framer */
.blog-cartao .cartao-post__titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Resumo: até 2 linhas */
.blog-cartao__resumo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Os cartões só aparecem (sem subir), como no Framer: opacity 0 → 1 */
.js-surgir [data-surgir="aparecer"] {
  transform: none;
}

/* Tablet e celular: título menor (preset 11716dl, 22,4 px, peso 700) */
@media (max-width: 1199.98px) {
  .blog__conteudo { gap: 56px; }
  .blog__fim { height: 16px; }

  .blog-cartao .cartao-post__titulo {
    font-size: var(--fs-nome);
    font-weight: 700;
  }
}

/* Celular: uma coluna, cartões de no mínimo 240 px e imagem com cantos de 8 px */
@media (max-width: 767.98px) {
  .blog__conteudo { gap: 48px; }

  .blog-cartao { min-width: 240px; }

  .blog-cartao__imagem { border-radius: 8px; }
}

/* Espaço de 64 px depois da seção de contato (o "P64–0" que só esta página tem
   antes do rodapé; no Framer ele não diminui no celular) */
.blog__antes-rodape {
  flex: none;
  width: 100%;
  height: 64px;
}