/* ==========================================================================
   Duality Clinic — página de artigo do blog (/blog/<artigo>)
   --------------------------------------------------------------------------
   Vale para as 22 páginas de artigo, que têm o mesmo modelo no Framer
   ("Blog Post"). Vem depois do site.css e só acrescenta o que é deste modelo.
   As páginas são geradas por _ferramentas/gerar_artigos.py.

   Ordem da página (igual à cópia):
     título e resumo centralizados
     painel cinza: imagem → "Voltar ao blog" + data → texto → caixa do autor
     "Artigos Relacionados" (painel verde com 3 cartões; 2 no tablet e no celular)
     "Entre em contato" (parte pronta) e rodapé

   Medidas tiradas do CSS do Framer na cópia (framer-1sxto4d, framer-4e985j,
   framer-k3iuov, framer-z1wz46, framer-eebwdn, framer-yy28r2…).

   Índice
     1. Página (recuo lateral)
     2. Título e resumo do topo
     3. Painel do artigo e imagem principal
     4. Coluna do texto
     5. Ajustes do texto do artigo (citação, imagens, links)
     6. Caixa do autor
     7. Artigos relacionados
     8. Entrada suave só com transparência
   ========================================================================== */


/* ==========================================================================
   1. Página
   Nos artigos o Framer mantém 40 px de recuo também no tablet
   (o resto do site usa 20 px abaixo de 1200). No celular, 20 px.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199.98px) {
  .principal--artigo {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Palavra comprida que não cabe na linha quebra no meio, como no Framer
   (word-break: break-word nos textos do modelo). Sem isso, um título como
   "Microagulhamento com radiofrequência…" passa da tela no celular e abre
   rolagem lateral. */
.artigo-cabeca,
.artigo,
.autor__texto,
.relacionados__titulo,
.relacionado__texto {
  overflow-wrap: break-word;
  word-break: break-word;
}


/* ==========================================================================
   2. Título e resumo do topo
   Título: preset 1aisfki (.titulo-secao) com até 800 px.
   Resumo: preset tx36tu (.texto) com até 400 px. 20 px entre os dois.
   ========================================================================== */

.artigo-cabeca {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: center;
}

.artigo-cabeca__titulo {
  width: 100%;
  max-width: 800px;
}

.artigo-cabeca__resumo {
  width: 100%;
  max-width: 400px;
}


/* ==========================================================================
   3. Painel do artigo e imagem principal
   Painel #fafafa com 40 px de recuo (24 px no celular). O raio fica em
   32 px também no celular: é assim no Framer (só o recuo muda).
   ========================================================================== */

.painel.artigo-painel {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 32px;
  overflow: visible;
}

/* Imagem principal: 16:9 com raio de 24 px; 4:3 com raio de 16 px no celular */
.artigo-imagem {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 40px;          /* o espaçador "P40" do Framer */
  border-radius: 24px;
  overflow: hidden;
}

.artigo-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767.98px) {
  .artigo-imagem {
    aspect-ratio: 4 / 3;
    margin-bottom: 24px;        /* "P24" no celular */
    border-radius: 16px;
  }
}


/* ==========================================================================
   4. Coluna do texto
   550 px no máximo, centralizada no painel; 56 px entre a linha
   "Voltar ao blog … data" e o texto.
   ========================================================================== */

.artigo-coluna {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
  width: 100%;
  max-width: 550px;
}

.artigo-topo {
  width: 100%;
}

/* "Voltar ao blog" e a data ficam com opacidade 0,65 (já vem do .link-seta--suave
   e do .artigo-topo time no site.css) */
.artigo-topo time {
  white-space: nowrap;
}


/* ==========================================================================
   5. Ajustes do texto do artigo
   A base (.artigo no site.css) já tem títulos, parágrafos e listas.
   Aqui entram os detalhes que só aparecem nos artigos.
   ========================================================================== */

/* Citação (preset cv3e8w): Inter itálico, sem o espaçamento apertado do resto
   do texto. O negrito dentro dela fica reto (é assim no Framer). */
.artigo blockquote p {
  font-family: var(--fonte-destaque);
  font-style: italic;
  letter-spacing: normal;
}

.artigo blockquote strong {
  font-style: normal;
  font-weight: 700;
}

.artigo blockquote em {
  font-style: italic;
}

/* Citação no meio do texto: 20 px acima (no começo do texto, nenhum) */
.artigo > blockquote:not(:first-child) {
  margin-top: 20px;
}

/* Imagens no meio do texto (preset r1l700): na largura que o Framer dá a
   cada uma (vem no style da própria imagem, com a proporção), sem passar da
   coluna, com raio de 16 px. Sem espaço extra antes ou depois. */
.artigo > img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Links do texto: a cor muda devagar, como no Framer */
.artigo a {
  transition: color 0.3s var(--curva-suave);
}


/* ==========================================================================
   6. Caixa do autor
   Cartão branco de até 740 px: foto redonda (64 / 72 / 80 px), nome e
   cargo; embaixo, "Agendar consulta" e "Entrar em contato".
   No celular tudo fica em coluna e os botões vão para o centro.
   ========================================================================== */

.autor-cartao {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  max-width: 740px;
  padding: 24px;
  border-radius: var(--raio-cartao);   /* 24 px; 16 px no celular */
  background: var(--cor-branco);
  box-shadow: var(--sombra-cartao);
}

.autor-cartao .autor {
  width: 100%;
}

.autor__texto {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Sem a frase de apresentação, o Framer deixa o espaço dela (12 px) acima do nome */
.autor__nome:first-child {
  margin-top: 12px;
}

/* Nome e cargo colados, um embaixo do outro (sem os 16 px de .texto + .texto) */
.autor__nome .texto + .texto {
  margin-top: 0;
}

.autor__botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .autor__foto {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 767.98px) {
  .autor-cartao {
    gap: 40px;
  }

  .autor-cartao .autor {
    flex-direction: column;
  }

  .autor__foto {
    width: 80px;
    height: 80px;
  }

  .autor__texto {
    flex: none;
    width: 100%;
  }

  .autor__botoes {
    justify-content: center;
    gap: 24px;
  }
}


/* ==========================================================================
   7. Artigos relacionados
   Painel verde-claro (#f0f4ef): 64 px de recuo em cima e 40 px nos lados
   (56/40 no tablet; 40/24 no celular). Título do cartão (10d7ess) com até
   480 px. Grade de 3 colunas (2 no tablet); no celular os cartões quebram
   a linha, com 240 px no mínimo e 400 px no máximo cada.
   ========================================================================== */

.relacionados {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 64px 40px 40px;
  border-radius: var(--raio-secao);
  background: var(--cor-verde-claro);
}

.relacionados__titulo {
  width: 100%;
  max-width: 480px;
}

.relacionados__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  grid-auto-rows: min-content;
  justify-content: center;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cartão: a base .cartao já dá fundo branco, raio, sombra, recuo e 24 px entre as partes */
.relacionado {
  align-self: start;
  justify-self: start;
  width: 100%;
  min-width: 240px;
  max-width: 400px;
}

.relacionado__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Título com até 3 linhas e resumo com até 2, cortados com "…" como no Framer */
.relacionado__titulo,
.relacionado__resumo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.relacionado__titulo { -webkit-line-clamp: 3; line-clamp: 3; }
.relacionado__resumo { -webkit-line-clamp: 2; line-clamp: 2; }

@media (min-width: 768px) and (max-width: 1199.98px) {
  .relacionados {
    padding: 56px 40px 40px;
  }

  .relacionados__grade {
    grid-template-columns: repeat(2, minmax(50px, 1fr));
  }
}

@media (max-width: 767.98px) {
  .relacionados {
    gap: 40px;
    padding: 40px 24px 24px;
  }

  .relacionados__grade {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
  }

  .relacionado {
    flex: 1 0 0;
    width: 1px;
  }
}


/* ==========================================================================
   8. Entrada suave só com transparência
   Alguns blocos do Framer só aparecem, sem subir (o botão da caixa do autor
   e os cartões relacionados): data-surgir="aparecer".
   ========================================================================== */

.js-surgir [data-surgir="aparecer"] {
  transform: none;
}