/* ==========================================================================
   Dr. Davi Klava — folha do artigo (blog-post.php)
   Design 2.0 · consultório editorial

   Carregada só na página do artigo, depois de site.css e blog.css.
   NÃO repete o que já existe:
     - o topo escuro, os crumbs, o grid e o card vêm do blog.css;
     - a tipografia base do texto do editor vem de .prose (blog.css).
   Aqui entra o que é exclusivo do artigo: meta do cabeçalho, imagem
   destacada, blocos de GEO, extensões de .prose que a categoria não usa
   (citação, tabela, filete, legenda) e o bloco de CTA.

   Regra do projeto mantida: nenhum valor literal de cor, fonte ou espaço.
   Breakpoints: 1024px e 767px, nenhum outro.
   ========================================================================== */

/* ------------------------------------------------- cabeçalho (sobre o escuro) */
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-on-dark);
  opacity: .72;
}
.post-meta .sep { opacity: .5; }
.post-meta strong { font-weight: var(--fw-semibold); }

/* Assinatura com retrato: rosto + CRM ao lado do nome (E-E-A-T) e a dupla
   data/leitura empurrada para a direita. */
.post-byline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
  align-self: stretch; /* o pai é flex-start: sem isto a linha encolhe e o
                          margin-left:auto da meta não tem onde empurrar */
}
.post-byline__foto {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  border: 1px solid var(--color-hairline-champagne);
  flex: 0 0 auto;
}
.post-byline__quem {
  margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--color-on-dark);
}
.post-byline__quem strong { font-weight: var(--fw-semibold); }
.post-byline__quem span { opacity: .65; }
.post-byline .post-meta { margin-left: auto; }

/* ------------------------------------------------------------ coluna do texto */
/* Coluna do artigo: texto alinhado à esquerda, mas o BLOCO centrado no
   container de 1200px. Sem o margin-inline o conteúdo encostava à esquerda
   e sobrava um vão de ~400px à direita. */
.post-column {
  max-width: var(--container-article);
  margin-inline: auto;
}

/* No artigo o cabecalho escuro adota a medida da coluna do texto: migalhas,
   categoria, titulo, olho e a foto destacada passam a nascer todos na mesma
   vertical. Com 760px no topo e 800px embaixo sobrava um degrau de 20px. */
.blog-head { --head-measure: var(--container-article); }

/* Sangria editorial: a foto rompe a coluna de 800px e vai a 960px. O calc
   dá -80px de cada lado; o media de 1024px devolve a zero no empilhado. */
.post-featured {
  margin-block: 0 var(--space-10);
  margin-inline: calc((var(--container-article) - 960px) / 2);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-hairline);
  box-shadow: var(--shadow-card);
}
/* Mesma gradação fotográfica das fotos da landing e do mapa do rodapé */
.post-featured img {
  width: 100%; height: auto;
  filter: grayscale(.18) sepia(.14) saturate(.82) contrast(1.02);
}
.post-featured figcaption {
  padding: var(--space-4) var(--space-5);
  background: var(--color-cream);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: center;
}

/* ------------------------------------------------------------------ GEO */
/* Resposta direta: o trecho citável vestido de citação — creme, filete teal
   e aspas champanhe. As props anulam o .panel que vem no markup. */
.post-answer {
  position: relative;
  margin-bottom: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--color-cream);
  border: 1px solid var(--color-border-hairline);
  border-left: 3px solid var(--color-teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: none;
  overflow: hidden;
}
.post-answer::after {
  content: "”";
  position: absolute; top: -30px; right: 2px;
  font-size: 8rem; line-height: 1;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-warm);
  opacity: .35;
  pointer-events: none;
}
.post-answer .eyebrow { margin-bottom: var(--space-3); }
.post-answer p {
  position: relative;
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-text);
}

/* Perguntas em duas colunas: metade da altura, mesma informação. */
.post-questions { margin-bottom: var(--space-10); }
.post-questions .eyebrow { margin-bottom: var(--space-3); }
.post-questions .checklist { columns: 2; column-gap: var(--space-8); }
.post-questions .checklist li { break-inside: avoid; }
.post-questions .checklist li + li { border-top: 0; }

/* ------------------------------------- extensões de .prose só para o artigo */
/* Capitular teal na abertura — assinatura de revista. Só o primeiro
   parágrafo do corpo; os blocos GEO ficam de fora por estarem antes. */
.post-body > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: .82;
  padding: 5px 10px 0 0;
  font-weight: var(--fw-semibold);
  color: var(--color-teal);
}
/* Âncora de h2 não pode nascer atrás do header fixo */
.post-body h2, .post-faq h2 { scroll-margin-top: calc(var(--header-height) + var(--space-6)); }

/* Filete teal sob os H2, como nas seções da landing */
.post-body h2::after {
  content: ""; display: block;
  width: 44px; height: 2px;
  background: var(--color-teal);
  margin-top: var(--space-3);
}
.post-body h4 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--color-heading-alt);
  margin: var(--space-8) 0 var(--space-3);
}
.post-body li > ul, .post-body li > ol { margin-top: var(--space-3); }

.post-body blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-cream);
  border-left: 2px solid var(--color-teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text);
  font-size: var(--fs-lead);
}
.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body figure { margin: var(--space-8) 0; }
.post-body figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.post-body hr {
  margin: var(--space-10) 0;
  border: 0; height: 1px;
  background: var(--color-border-hairline);
}

.post-body table {
  width: 100%; margin: 0 0 var(--space-8);
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}
.post-body th, .post-body td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-hairline);
  text-align: left; vertical-align: top;
}
.post-body th { color: var(--color-heading); font-weight: var(--fw-semibold); }
.post-body table caption {
  caption-side: bottom; padding-top: var(--space-3);
  font-size: var(--fs-caption); color: var(--color-text-muted);
}

/* Fim do texto: três pontos champanhe entre filetes — o leitor sente que o
   artigo acabou antes de entrar nas dúvidas. */
.post-end {
  display: flex; align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-10);
  color: var(--color-accent-warm);
  font-size: var(--fs-lead);
  letter-spacing: .4em;
  text-indent: .4em; /* compensa o tracking do último ponto */
}
.post-end::before, .post-end::after {
  content: ""; flex: 1; height: 1px;
  background: var(--color-border-hairline);
}

/* ------------------------------------------------------------------ FAQ */
.post-faq { margin-top: var(--space-10); }
.post-faq .eyebrow { margin-bottom: var(--space-2); }
.post-faq h2 { margin-bottom: var(--space-6); }

/* ------------------------------------------------------------------ CTA */
/* Fecho escuro: o único bloco de contraste máximo da página inteira — o
   convite. Mesmo fundo e brilho quente do hero da landing; as props anulam
   o .panel branco que vem no markup. */
.post-cta {
  position: relative;
  margin-top: var(--space-12);
  padding: var(--space-10) var(--space-8);
  background: var(--gradient-hero), var(--color-brown-dark);
  border: 1px solid var(--color-hairline-champagne);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: center;
}
.post-cta::before {
  content: ""; position: absolute; inset: 42% -20% -32%;
  background: radial-gradient(60% 62% at 50% 100%, var(--color-glow-warm), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}
.post-cta > * { position: relative; }
.post-cta .eyebrow { color: var(--color-accent-warm); justify-content: center; }
.post-cta h2 {
  font-size: var(--fs-h2);
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
  text-wrap: balance;          /* linhas parelhas em vez de escada */
}
/* :not(.eyebrow) porque o eyebrow também é um <p> filho direto — sem a
   exclusão ele herdaria a opacidade e a medida do corpo. */
.post-cta > p:not(.eyebrow) {
  color: var(--color-on-dark);
  opacity: .82;
  line-height: var(--lh-lead);
  max-width: 46ch;             /* medida de leitura para texto centrado */
  margin-inline: auto;
}

/* Pilha de conversão: o botão manda, as notas sussurram. O .microcopy
   global é caixa-alta com tracking — sob o botão, no escuro, as duas notas
   viravam quatro linhas gritadas (cada uma quebrava em duas). Aqui elas
   voltam para caixa normal e o degrau entre elas diminui. */
.post-cta .cta-block { margin-top: var(--space-6); gap: var(--space-5); align-items: center; }
.post-cta .btn { padding: 21px 40px; font-size: var(--fs-caption); }

/* A linha de confiança (componente .trust do site.css) sobre o cartão
   escuro: itens centrados e nas cores de fundo escuro — o cartão não é
   .section--dark, então as cores entram aqui. */
.post-cta .trust { justify-content: center; }
.post-cta .trust li { color: rgba(255, 255, 255, .78); }
.post-cta .trust .trust__icon { color: var(--color-link-on-dark); }

/* ---------------------------------------------------------------- autor */
.post-author {
  margin-top: var(--space-8);
  display: flex; align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-cream);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
}
.post-author__foto {
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover; object-position: 50% 18%;
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-card);
  flex: 0 0 auto;
}
.post-author__info > * { margin: 0 0 var(--space-2); }
.post-author__info > :last-child { margin-bottom: 0; }
.post-author__nome { font-weight: var(--fw-semibold); color: var(--color-heading); }
.post-author__titulo { font-size: var(--fs-caption); color: var(--color-text-muted); }
.post-author__bio { font-size: var(--fs-body-sm); color: var(--color-text); line-height: var(--lh-body); }
.post-author .link-inline { font-size: var(--fs-body-sm); }

/* ===== TABLET — até 1024px ===== */
@media (max-width: 1024px) {
  /* Empilhado não tem os 80px de folga: a sangria volta à coluna */
  .post-featured { margin-inline: 0; }
}

/* ===== MOBILE — até 767px ===== */
@media (max-width: 767px) {
  /* Tabela larga rola sozinha em vez de estourar a página */
  .post-body table { display: block; overflow-x: auto; }

  .post-byline .post-meta { margin-left: 0; width: 100%; }

  .post-answer { padding: var(--space-5); }
  .post-answer::after { font-size: 5.5rem; top: -18px; }
  .post-questions .checklist { columns: 1; }
  .post-questions .checklist li + li { border-top: 1px solid var(--color-border-hairline); }

  .post-cta { padding: var(--space-8) var(--space-5); }
  .post-cta > p:not(.eyebrow) { font-size: var(--fs-body-sm); }

  /* Rótulo do botão em UMA linha: o ícone sai (o 1º item da checklist já
     diz WhatsApp), o padding encolhe e o corpo escala com a tela — em
     botão, rótulo quebrado lê como dois botões. */
  .post-cta .btn { padding-inline: var(--space-3); letter-spacing: .06em;
                   font-size: clamp(0.6rem, 4.2vw - 2.6px, 0.844rem); }
  .post-cta .btn .icon { display: none; }
  .post-cta .btn span { white-space: nowrap; }

  .post-author { flex-direction: column; text-align: center; }
  .post-author__info > * { margin-inline: auto; }
}