/* Blog — só nas páginas geradas por src/build-blog.js. Usa os tokens de tokens.css (via style.css);
   nenhuma cor nova. Ciano só como acento, nunca em texto (manual pág. 13). */

.blog-topo{padding:64px 0 24px}
.blog-topo h1{margin-bottom:14px}
.blog-lista{padding:24px 0 88px}
.blog-lista .grid-3, .blog-relacionados .grid-3{row-gap:28px}
.blog-data{font-size:13px;font-weight:600;color:var(--grafite);margin-bottom:6px}
.blog-card-sem-capa{height:100%;background:var(--azul-tint)}

.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.blog-cats a{background:var(--ciano-tint);color:var(--azul);border-radius:var(--radius-pill);
  padding:8px 16px;font-size:14px;font-weight:600}
.blog-cats a:hover{background:var(--azul-tint)}
.blog-cats a[aria-current="page"]{background:var(--azul);color:var(--branco)}
.blog-cats a:focus-visible, .post-corpo a:focus-visible, .post-trilha a:focus-visible{outline:3px solid var(--azul);outline-offset:2px}

.post{padding:48px 0 64px}
.post-wrap{max-width:780px}
.post-trilha{font-size:14px;font-weight:600;color:var(--grafite);margin-bottom:18px}
.post-trilha a{color:var(--azul)}
.post-trilha a:hover{text-decoration:underline}
.post h1{font-size:clamp(28px,3.6vw,42px);margin-bottom:12px}
.post-capa{margin:28px 0 36px;max-height:460px}

.post-corpo{font-size:17.5px;line-height:1.7;color:var(--grafite)}
.post-corpo :is(p,ul,ol,figure,table,blockquote){margin:0 0 1.1em}
.post-corpo :is(h2,h3){margin-bottom:.5em}
.post-corpo h2{font-size:clamp(22px,2.6vw,28px);margin-top:1.8em}
.post-corpo h3{font-size:19px;color:var(--azul);margin-top:1.5em}
.post-corpo a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.post-corpo a:hover{color:var(--azul-600)}
.post-corpo strong{color:#333}
.post-corpo ul, .post-corpo ol{padding-left:1.4em}
.post-corpo ul{list-style:disc}
.post-corpo ol{list-style:decimal}
.post-corpo li + li{margin-top:.4em}
/* o WordPress antigo abria uma <ul> por item; junta visualmente as listas vizinhas */
.post-corpo ul:has(+ ul){margin-bottom:.4em}
.post-corpo img{border-radius:var(--radius-md);height:auto;margin:1.4em auto}
.post-corpo figure{margin:1.4em 0}
.post-corpo table{border-collapse:collapse;width:100%;font-size:15px}
.post-corpo th, .post-corpo td{border:1px solid var(--linha);padding:8px 10px;text-align:left}

.blog-fechamento{padding:64px 0}
.blog-fechamento .wrap{display:block}
.blog-fechamento h2{margin-bottom:4px}
.blog-relacionados{padding:64px 0 88px}
.blog-relacionados h2{margin-bottom:28px}

/* capas do WordPress antigo têm proporções variadas: recorte uniforme no cartão */
.blog-lista .service-card-head, .blog-relacionados .service-card-head{height:auto;aspect-ratio:16/10}
.blog-lista .service-card-head img, .blog-relacionados .service-card-head img{width:100%;height:100%;object-fit:cover;border-radius:0}

/* ---------- sidebar do post (só em artigo com 4+ H2 — ver extrairH2s em build-blog.js) ---------- */
.post-wrap-toc{max-width:var(--maxw)}
.post-wrap-toc>.post-trilha, .post-wrap-toc>h1, .post-wrap-toc>.blog-data{max-width:900px}
.post-grid{display:grid;grid-template-columns:1fr 320px;gap:56px;margin-top:8px}
@media (max-width:900px){.post-grid{grid-template-columns:1fr}}
.post-grid .post-corpo{max-width:72ch}
.post-corpo h2{scroll-margin-top:105px} /* cabeçalho fixo tem 85px — sem isso o clique no sumário esconde o título atrás dele */

/* aside ocupa a altura inteira da linha do grid (sem align-items:start, o grid estica o item):
   é o espaço em que o bloco fixo (sumário + CTA + "mais em categoria") fica grudado enquanto o
   artigo rola. O sumário encolhe e rola por dentro; CTA e "mais em" ficam sempre inteiros. */
.post-sidebar{display:flex;flex-direction:column}
/* top 105px = cabeçalho fixo do site (85px) + folga; com 24px o topo do sumário ficava atrás dele */
.post-sidebar-sticky{position:sticky;top:105px;max-height:calc(100vh - 125px);display:flex;flex-direction:column;gap:16px}

.post-toc, .post-mais{background:var(--superficie);border-radius:var(--radius-md);padding:22px}
.post-toc h2, .post-mais h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--grafite);margin:0 0 14px}
.post-toc{flex:1 1 auto;min-height:140px;overflow-y:auto}
.post-toc::-webkit-scrollbar{width:6px}
.post-toc::-webkit-scrollbar-thumb{background:var(--linha);border-radius:3px}
.post-toc ol{list-style:none;counter-reset:toc;padding:0;display:flex;flex-direction:column;gap:2px}
.post-toc li{counter-increment:toc}
.post-toc a{display:flex;gap:10px;padding:9px 0;font-size:13.5px;color:var(--grafite);border-bottom:1px solid var(--linha)}
.post-toc li:last-child a{border-bottom:none}
.post-toc a::before{content:counter(toc);flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--branco);
  border:1px solid var(--linha);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--azul)}
.post-toc a:hover, .post-toc a.ativo{color:var(--azul)}
.post-toc a.ativo::before{background:var(--azul);border-color:var(--azul);color:var(--branco)}

/* "mais em categoria": cartão branco com borda e filete ciano, para não se confundir com o
   sumário (cinza) nem com o texto do artigo; nome da categoria em azul, títulos como links
   azuis separados por linha — cada título ocupa um bloco, mesmo quando quebra em duas linhas */
.post-mais{flex:0 0 auto;background:var(--branco);border:1px solid var(--linha);border-left:3px solid var(--ciano);padding:18px 20px}
.post-mais h2{display:flex;flex-direction:column;gap:3px;text-transform:none;letter-spacing:0;font-size:15px;line-height:1.25;color:var(--azul);margin:0 0 6px}
.post-mais h2 span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--grafite)}
.post-mais ul{list-style:none;padding:0;margin:0}
.post-mais li{border-top:1px solid var(--linha)}
.post-mais li a{display:flex;gap:8px;padding:10px 0;color:var(--azul);font-size:13.5px;font-weight:600;line-height:1.35}
.post-mais li a::before{content:"›";flex:0 0 auto;color:var(--ciano);font-weight:800}
.post-mais li a:hover{color:var(--azul-600);text-decoration:underline;text-underline-offset:2px}
.post-mais-todos{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--azul)}
.post-mais-todos:hover{text-decoration:underline;text-underline-offset:2px}

.post-cta{flex:0 0 auto;background:var(--azul);border-radius:var(--radius-md);padding:24px;color:var(--branco)}
.post-cta h2{font-size:17px;margin:0 0 10px;color:var(--branco)}
.post-cta p{color:var(--cinza-claro);font-size:13.5px;margin-bottom:16px}
.post-cta .btn{width:100%}

/* tela baixa (notebook com escala de exibição do Windows fica perto de 650-700px de altura útil):
   CTA encolhe para título + botão, para caber sumário + CTA + "mais em". Só em tela muito baixa
   o "mais em" sai — o "Leia também" no fim do artigo continua. */
@media (max-height:820px){
  .post-cta{padding:18px 20px}
  .post-cta h2{font-size:15.5px;margin-bottom:12px}
  .post-cta p{display:none}
  .post-toc{padding:16px 20px}
  .post-toc h2{margin-bottom:10px}
  .post-mais{padding:14px 18px}
  .post-mais li a{padding:8px 0}
  .post-mais-todos{display:none}
}
@media (max-height:600px){.post-sidebar .post-mais{display:none}}

/* ---------- componentes do post pilar (padrão de artigo longo, desde 02/10/2026) ----------
   Mesmo vocabulário de classes do blog da Révolus, com as cores da EngProcess:
   post-resumo/lead-box = resposta direta (ciano), callout-box = prática de campo (azul),
   note-box = observação (superfície), warning-box = alerta (mostarda), cta-box = chamada. */
.post-corpo .post-resumo{font-size:17px;color:var(--azul);font-weight:600;margin:0 0 1em}
.post-corpo :is(.lead-box,.callout-box,.note-box,.warning-box,.cta-box){
  margin:1.6em 0;padding:20px 24px;border-radius:0 var(--radius-md) var(--radius-md) 0;border-left:4px solid}
.post-corpo :is(.lead-box,.callout-box,.note-box,.warning-box,.cta-box) > :last-child{margin-bottom:0}
.post-corpo .lead-box{background:var(--ciano-tint);border-color:var(--ciano)}
.post-corpo .callout-box{background:var(--azul-tint);border-color:var(--azul)}
.post-corpo .note-box{background:var(--superficie);border-color:var(--cinza-claro)}
.post-corpo .warning-box{background:#FBF5E3;border-color:#7A5E07}
.post-corpo .cta-box{background:var(--superficie);border-color:var(--ciano)}
.post-corpo .cta-box a{color:var(--azul);font-weight:700;text-decoration:underline}
.post-corpo .table-scroll{overflow-x:auto;margin:1.4em 0}
.post-corpo .table-scroll table{margin:0;min-width:520px}
.post-corpo caption{caption-side:top;text-align:left;font-size:14px;font-weight:600;color:var(--azul);padding-bottom:8px}
.post-corpo thead th{background:var(--azul-tint);color:var(--azul)}
/* diagrama de camadas em HTML (texto real, legível por buscador e por IA) */
.post-corpo .camadas{list-style:none;padding:0;margin:1.6em 0;display:grid;gap:10px;counter-reset:camada}
.post-corpo .camadas li{position:relative;padding:14px 18px 14px 60px;border:1px solid var(--linha);
  border-radius:var(--radius-sm);background:var(--branco);counter-increment:camada}
.post-corpo .camadas li::before{content:counter(camada);position:absolute;left:16px;top:14px;width:30px;height:30px;
  border-radius:50%;background:var(--azul);color:var(--branco);font-weight:700;display:grid;place-items:center;font-size:14px}
.post-corpo .camadas li:not(:last-child)::after{content:"";position:absolute;left:30px;bottom:-11px;width:2px;height:10px;background:var(--ciano)}
.post-corpo .camadas strong{color:var(--azul)}
.post-grid>*{min-width:0}
.post-corpo{overflow-wrap:anywhere}
.post-corpo .post-fonte{font-size:13px;color:var(--grafite);border-top:1px solid var(--linha);padding-top:12px;margin-top:24px}
.post-corpo table{overflow-wrap:normal;word-break:normal}