/* ============================================================
   MEDVANCE — FOLHA DE ESTILO DO BLOG
   ------------------------------------------------------------
   A ESTRUTURA (arranjo dos blocos) veio do template de blog:
   faixa de cabeçalho, filtro por assunto, grade de cartões,
   artigo em duas colunas com índice fixo, ficha do autor,
   bloco de conversão na lateral e "continue lendo" no fim.

   O VISUAL é 100% Medvance. Nenhuma cor, fonte, raio ou
   espaçamento escrito na mão: tudo sai de tokens.css.

   Carregar sempre nesta ordem:
   tokens.css  →  site.css  →  blog.css
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. CABEÇALHO DO BLOG
   No template original o fundo é uma animação de pontos em
   canvas. Aqui vira o círculo água que o hero da home já usa,
   porque é a linguagem que a marca fala. Zero JavaScript.
   ══════════════════════════════════════════════════════════ */
.blog-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--mv-space-5) var(--mv-space-4);
  border-bottom: var(--mv-border-width) solid var(--mv-border);
}
.blog-hero::before {
  content: "";
  position: absolute; top: -220px; right: -140px;
  width: 480px; height: 480px;
  border-radius: var(--mv-radius-circle);
  background: var(--mv-agua-50);
  z-index: -1;
}
.blog-hero h1 { font-size: var(--mv-text-display-2); margin-bottom: var(--mv-space-2); }
.blog-hero p { color: var(--mv-text-muted); max-width: 60ch; margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════
   2. FILTRO POR ASSUNTO
   Vira útil de verdade a partir de uns 8 artigos. Com 3 ou 4
   no ar, o filtro comunica blog parado. Está pronto aqui,
   mas só entra quando o volume justificar.
   ══════════════════════════════════════════════════════════ */
.tag-filter {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; padding: 0;
  margin: var(--mv-space-4) 0 0;
}
.tag-chip {
  display: inline-flex; align-items: center;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-weight-medium);
  line-height: var(--mv-leading-snug);
  padding: 9px 20px;
  text-decoration: none;
  color: var(--mv-text-body);
  background: var(--mv-neutral-0);
  border: var(--mv-border-width) solid var(--mv-agua-500);
  border-radius: var(--mv-radius-leaf);
  transition: background var(--mv-duration-base) var(--mv-ease);
}
.tag-chip:hover { background: var(--mv-agua-50); }
.tag-chip:focus-visible { outline: 3px solid var(--mv-focus-ring); outline-offset: 3px; }
.tag-chip[aria-current="true"] {
  background: var(--mv-agua-800);
  border-color: var(--mv-agua-800);
  color: var(--mv-text-on-dark);
}

/* ══════════════════════════════════════════════════════════
   3. GRADE DE ARTIGOS
   DECISÃO DE ADAPTAÇÃO: o template junta os cartões sem
   respiro e sem sombra, separados só por uma linha de 1px.
   Isso apaga o canto diagonal, que é a assinatura da Medvance.
   Aqui o arranjo é o mesmo (3 colunas, foto em cima, assunto,
   título, resumo, data), mas com o respiro e o recorte da
   marca. A grade segue os mesmos degraus da home.
   ══════════════════════════════════════════════════════════ */
.post-grid { display: grid; gap: var(--mv-gap-grid); }
@media (min-width: 768px)  { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

/* O cartão herda .card do site.css. Aqui só o que é do blog. */
.post-card { position: relative; }
.post-card .img-slot { --ratio: 16 / 9; }
.post-card__tag {
  display: block;
  font-family: var(--mv-font-eyebrow);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-weight-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-agua-700);
  margin-bottom: 8px;
}
.post-card h3 {
  font-size: var(--mv-text-title);
  line-height: var(--mv-leading-snug);
  margin-bottom: 10px;
}
.post-card h3 a { color: inherit; text-decoration: none; }
/* A área clicável é o cartão inteiro, não só o título. */
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover h3 { color: var(--mv-agua-900); }
.post-card__meta {
  margin-top: auto;
  padding-top: var(--mv-space-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
}
.post-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mv-neutral-300); }

/* ══════════════════════════════════════════════════════════
   4. ARTIGO — ESQUELETO EM DUAS COLUNAS
   ══════════════════════════════════════════════════════════ */
.crumbs {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  margin-bottom: var(--mv-space-2);
}
.crumbs a { color: var(--mv-agua-700); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin-inline: 6px; color: var(--mv-neutral-300); }

.article-head { max-width: 62ch; }
.article-head .post-card__tag { margin-bottom: var(--mv-space-1); }
.article-head h1 { font-size: var(--mv-text-display-2); margin-bottom: var(--mv-space-2); }
.article-head .lead { color: var(--mv-text-muted); margin-bottom: var(--mv-space-3); }

.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
  padding-block: var(--mv-space-2);
  border-top: var(--mv-border-width) solid var(--mv-border);
  border-bottom: var(--mv-border-width) solid var(--mv-border);
  margin-bottom: var(--mv-space-4);
}
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mv-neutral-300); }
.article-meta strong { color: var(--mv-text-body); font-weight: var(--mv-weight-medium); }

.article-cover { margin-bottom: var(--mv-space-5); }
.article-cover .img-slot { --ratio: 16 / 9; border-radius: var(--mv-radius-notch); }
.article-cover figcaption {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  margin-top: 10px;
}

.article-shell { display: grid; gap: var(--mv-space-5); align-items: start; }
@media (min-width: 1025px) {
  .article-shell { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--mv-space-6); }
}

/* A lateral só existe no desktop. No celular o índice vira um
   bloco recolhível no topo do texto, e os outros blocos descem
   para o fim do artigo. */
.article-aside { display: none; }
@media (min-width: 1025px) {
  .article-aside {
    display: grid; gap: var(--mv-space-3);
    position: sticky; top: 110px;
  }
}

/* ══════════════════════════════════════════════════════════
   5. CORPO DO TEXTO
   ══════════════════════════════════════════════════════════ */
.prose { max-width: 68ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2 {
  font-size: var(--mv-text-display-3);
  margin-top: var(--mv-space-5);
  margin-bottom: var(--mv-space-2);
  scroll-margin-top: 110px;
}
.prose h3 {
  font-family: var(--mv-font-body);
  font-size: var(--mv-text-title);
  font-weight: var(--mv-weight-semibold);
  margin-top: var(--mv-space-4);
  margin-bottom: var(--mv-space-1);
  scroll-margin-top: 110px;
}
.prose p { margin-bottom: var(--mv-space-2); }
.prose a { color: var(--mv-coral-900); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--mv-coral-700); }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: var(--mv-space-2); }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--mv-agua-600); }
.prose figure { margin: var(--mv-space-4) 0; }
.prose figure .img-slot { border-radius: var(--mv-radius-leaf-md); }
.prose figcaption { font-size: var(--mv-text-xs); color: var(--mv-text-muted); margin-top: 8px; }
.prose blockquote {
  margin: var(--mv-space-4) 0;
  padding: var(--mv-space-3);
  background: var(--mv-agua-50);
  border-left: 4px solid var(--mv-agua-500);
  border-radius: var(--mv-radius-leaf);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Tabela usada para comparar recomendação de entidades */
.prose .tabela { width: 100%; overflow-x: auto; margin: var(--mv-space-3) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--mv-text-sm); }
.prose th, .prose td {
  text-align: left; padding: 12px 14px;
  border-bottom: var(--mv-border-width) solid var(--mv-border);
}
.prose th {
  font-family: var(--mv-font-eyebrow);
  font-size: var(--mv-text-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mv-agua-800);
  background: var(--mv-agua-50);
}

/* ══════════════════════════════════════════════════════════
   6. RESUMO PARA IA (AEO)
   O bloco que o ChatGPT e o Gemini copiam quando alguém
   pergunta. Fica logo abaixo do título, em frases curtas e
   completas. Já está declarado como "speakable" no schema.
   ══════════════════════════════════════════════════════════ */
.resumo-aeo {
  background: var(--mv-agua-50);
  border: var(--mv-border-width) solid var(--mv-agua-200);
  border-radius: var(--mv-radius-leaf-md);
  padding: var(--mv-space-3);
  margin-bottom: var(--mv-space-4);
}
.resumo-aeo h2 {
  font-family: var(--mv-font-eyebrow);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-weight-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-agua-800);
  margin: 0 0 var(--mv-space-1);
}
.resumo-aeo ul { margin: 0; padding-left: 1.2em; }
.resumo-aeo li { margin-bottom: 8px; font-size: var(--mv-text-sm); }
.resumo-aeo li:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════
   7. ÍNDICE DO ARTIGO
   ══════════════════════════════════════════════════════════ */
.toc { border: var(--mv-border-width) solid var(--mv-border); border-radius: var(--mv-radius-leaf-md); padding: var(--mv-space-3); }
.toc__title {
  font-family: var(--mv-font-eyebrow);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-weight-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-agua-700);
  margin: 0 0 var(--mv-space-1);
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--mv-divider);
  color: var(--mv-text-muted);
  text-decoration: none;
  font-size: var(--mv-text-sm);
  line-height: var(--mv-leading-snug);
  transition: color var(--mv-duration-fast) var(--mv-ease);
}
.toc a:hover { color: var(--mv-text); }
.toc a[aria-current="true"] {
  color: var(--mv-agua-900);
  border-left-color: var(--mv-coral-500);
  font-weight: var(--mv-weight-medium);
}

/* Versão de celular: recolhível, no topo do texto.
   O template usa um botão flutuante, mas o canto de baixo já é
   do WhatsApp, que é o canal de conversão da clínica. Índice
   nenhum vale disputar espaço com o botão que agenda. */
.toc-mobile {
  border: var(--mv-border-width) solid var(--mv-border);
  border-radius: var(--mv-radius-leaf-md);
  padding: var(--mv-space-2) var(--mv-space-3);
  margin-bottom: var(--mv-space-4);
}
.toc-mobile > summary {
  cursor: pointer;
  font-family: var(--mv-font-eyebrow);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-weight-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mv-agua-700);
}
.toc-mobile > summary:focus-visible { outline: 3px solid var(--mv-focus-ring); outline-offset: 3px; }
.toc-mobile .toc { border: 0; padding: var(--mv-space-1) 0 0; }
@media (min-width: 1025px) { .toc-mobile { display: none; } }

/* ══════════════════════════════════════════════════════════
   8. FICHA DO AUTOR / REVISOR TÉCNICO
   Não é enfeite: é sinal de E-E-A-T para o Google e exigência
   de identificação da CFM 2.336/2023.
   ══════════════════════════════════════════════════════════ */
.author-card {
  display: flex; gap: var(--mv-space-2); align-items: flex-start;
  border: var(--mv-border-width) solid var(--mv-border);
  border-radius: var(--mv-radius-leaf-md);
  padding: var(--mv-space-3);
}
.author-card img {
  width: 64px; height: 64px; flex: none;
  border-radius: var(--mv-radius-circle);
  object-fit: cover;
}
.author-card__name { font-family: var(--mv-font-body); font-size: var(--mv-text-sm); font-weight: var(--mv-weight-semibold); color: var(--mv-text); margin: 0 0 2px; }
.author-card__role { font-size: var(--mv-text-xs); color: var(--mv-text-muted); display: block; }
.author-card__reg {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--mv-text-xs);
  color: var(--mv-agua-700);
  display: block; margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   9. BLOCO DE CONVERSÃO
   No template é um espaço de anúncio. Aqui é o WhatsApp, que
   é o único canal de agendamento da clínica.
   ══════════════════════════════════════════════════════════ */
.promo {
  background: var(--mv-surface-accent);
  border-radius: var(--mv-radius-leaf-md);
  padding: var(--mv-space-3);
}
.promo h2 {
  font-size: var(--mv-text-title);
  color: var(--mv-text-on-agua);
  margin-bottom: var(--mv-space-1);
}
.promo p { font-size: var(--mv-text-sm); color: var(--mv-text-on-agua); margin-bottom: var(--mv-space-2); }
.promo .btn { width: 100%; font-size: var(--mv-text-sm); padding: 13px 20px; }

/* ══════════════════════════════════════════════════════════
   10. AVISO MÉDICO (CFM 2.336/2023)
   Fecha todo artigo. Não é rodapé jurídico escondido:
   é parte do conteúdo e precisa ser lido.
   ══════════════════════════════════════════════════════════ */
.aviso-medico {
  border: var(--mv-border-width) solid var(--mv-coral-100);
  background: var(--mv-coral-50);
  border-radius: var(--mv-radius-leaf);
  padding: var(--mv-space-3);
  margin-top: var(--mv-space-5);
  font-size: var(--mv-text-sm);
  color: var(--mv-text-body);
}
.aviso-medico p:last-child { margin-bottom: 0; }
.aviso-medico strong { color: var(--mv-coral-900); }

/* ══════════════════════════════════════════════════════════
   11. CONTINUE LENDO
   Três artigos que dividem assunto com o atual. É link interno
   automático, que é sinal de SEO direto.
   ══════════════════════════════════════════════════════════ */
.read-more {
  border-top: var(--mv-border-width) solid var(--mv-border);
  margin-top: var(--mv-space-6);
  padding-top: var(--mv-space-5);
}
.read-more h2 {
  font-size: var(--mv-text-display-3);
  margin-bottom: var(--mv-space-3);
}

/* Blocos que no desktop moram na lateral e no celular descem
   para o fim do texto. */
.aside-no-fim { display: grid; gap: var(--mv-space-3); margin-top: var(--mv-space-5); }
@media (min-width: 1025px) { .aside-no-fim { display: none; } }

/* ── Dedo, não mouse ───────────────────────────────────────
   Medido a 375x812: link do sumário 33px de altura, migalha de
   pão 15px. Abaixo de 44px o dedo erra o alvo. Cresce só onde o
   ponteiro é grosso, e a migalha usa margem negativa para não
   empurrar o título do artigo para baixo.
   ────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .toc a { padding-block: 13px; }
  .crumbs a { display: inline-block; padding-block: 15px; margin-block: -15px; }
}