/* ============================================================
   marque.med.br — o blog

   Carregado DEPOIS de marque-home.css (o cabeçalho, o rodapé e os botões) e
   DEPOIS de post.css (a tipografia do artigo).

   ---------- por que reusa o post.css do Domínio Médico ----------
   A coluna de leitura, a lista com ✓, a moldura do print, a citação e o
   aviso do fim são decisões de LEGIBILIDADE, não de marca: 68 caracteres
   por linha é 68 caracteres por linha nos dois sites. O que muda é a cor —
   e a cor, lá, está toda em variáveis.

   Então este arquivo não copia o post.css: ele redefine os tokens `--lp-*`
   na paleta do marque (o verde-água no lugar do roxo) e ajusta o que a casca
   daqui pede. Uma correção de tipografia do artigo vale para os dois blogs,
   que é o que se quer; uma troca de cor aqui não atravessa para lá, que
   também é o que se quer.

   Os `--lp-*` moram em landing.css, que esta página NÃO carrega — por isso
   precisam ser declarados aqui, e não só sobrescritos.
   ============================================================ */

:root{
  --lp-tinta:#15233B;          /* o texto, igual ao da capa */
  --lp-tinta-2:#5a6779;        /* 4,9:1 sobre branco — o #6B7686 da capa
                                  fica em 4,0:1 e não passa no corpo de texto */
  --lp-roxo:#00857b;           /* "roxo" é o nome do token, não da cor: aqui
                                  é o verde-água da marca, um tom mais escuro
                                  que o #00A99D dos botões para aguentar
                                  texto de link sobre branco (4,6:1) */
  --lp-roxo-fundo:#E6F7F5;
  --lp-cinza:#f7f9fb;
  --lp-borda:#eef1f6;
  --lp-raio:14px;
  --lp-serif:Georgia, "Times New Roman", serif;
  --lp-larg:1120px;            /* a mesma medida do miolo da capa */
}

/* ---------- a casca ---------- */
/* O cabeçalho do marque é `sticky`: ele OCUPA lugar no fluxo. O do Domínio
   Médico é fixo e flutua por cima, e por isso o post.css reserva 148px de
   respiro no alto — aqui esse respiro seria um buraco. */
.po-topo{ padding-top:56px; }
@media (max-width:760px){ .po-topo{ padding-top:40px; } }

/* O corpo da página do artigo é branco; a capa do marque pinta sozinha. */
body.po{ background:#fff; }

/* Sem a foto de capa no alto (o gerador explica por quê), os 134px de
   respiro do post.css existiam para compensar a imagem que avança 90px
   sobre o texto. Sem imagem, viram um buraco entre o resumo e a primeira
   linha do artigo. */
.po-corpo{ padding-top:64px; }
@media (max-width:760px){ .po-corpo{ padding-top:48px; } }

/* Os cartões de artigo (`.mh-post`) e a grade deles (`.mh-posts`) moram em
   marque-home.css: o mesmo cartão aparece na capa, que não carrega esta
   folha. Aqui é só a largura que a grade ganha fora da coluna de leitura.

   1068 e recuo de 26 — a mesma linha do site, a que o logotipo e o botão
   Entrar da barra do topo desenham. Era 1120 com recuo de 20: os cartões
   começavam 26px antes do logotipo da mesma página, que é o tipo de
   desalinhamento que ninguém sabe nomear e todo mundo vê. */
.mh-posts{ width:min(100% - 52px, 1068px); margin-inline:auto; }

/* ---------- o fim do artigo ---------- */
/* O mesmo degradê do bloco "sou secretária" da capa. Em faixa escura o link
   do corpo (verde sobre branco) desapareceria: aqui o texto é branco e o
   botão carrega a cor. */
.mh-fim{
  background:linear-gradient(140deg,#00695f,#00A99D 130%); color:#fff;
  padding:64px 26px; text-align:center;
}
.mh-fim h2{ font-size:clamp(1.5rem, 3vw, 2.1rem); max-width:18ch; margin:0 auto; }
.mh-fim p{ margin:14px auto 24px; max-width:52ch; color:#E3F6F3; font-size:1rem; }
.mh-fim-acoes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.mh-fim small{ display:block; margin-top:16px; font-size:.82rem; color:#BFE9E4; }
/* Vazado sobre o verde: a borda cinza-claro da capa some neste fundo. */
.mh-fim .mh-botao-vazado{ border-color:rgba(255,255,255,.55); color:#fff; }
.mh-fim .mh-botao-vazado:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }

/* ---------- a lista ---------- */
.po-outros{ background:var(--lp-cinza); }
.po-outros h2{ color:var(--lp-tinta); }

/* No índice, os dois respiros se somavam: 64px no fim da abertura mais 84px
   no começo da grade punham o primeiro cartão a um palmo e meio do texto —
   no celular, fora da primeira tela. `main` separa o índice da seção "para
   continuar lendo", que usa a mesma classe no fim do artigo e ali precisa
   da distância. */
.po-topo-lista{ padding-bottom:26px; }
main.po-outros{ padding-top:44px; }

/* O rodapé do marque é uma faixa branca; depois de uma seção cinza ele
   precisa da linha de cima para não virar continuação do bloco anterior. */
.po + .mh-rodape, .mh-rodape{ background:#fff; }