/* ============================================================
   Blog (WordPress): post, listagem, busca e 404.
   As páginas saem do mu-plugin wp-content/mu-plugins/certifica-blog.php,
   com header, rodapé, tokens e componentes de site.css e paginas.css.
   Aqui ficam o texto dos posts (blocos do Gutenberg sem o CSS do
   WordPress), o sumário, os cartões de artigo e a paginação.
   ============================================================ */

/* ░░ TOPO DO POST ░░ */
.post-hero h1{font-size:clamp(30px,3.3vw,46px);line-height:1.1;letter-spacing:-.03em;max-width:24ch}
.post-hero .ph-grid.is-wide{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.post-hero-in{max-width:860px}
/* a foto de destaque aparece inteira: muitas são banners com o título escrito na imagem */
.post-hero .ph-media.is-wide{aspect-ratio:auto}
.post-hero .ph-media img{height:auto}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:22px;font-size:15px;color:var(--ink-3)}
.post-meta > *{display:inline-flex;align-items:center;gap:7px}
.post-meta .ph{font-size:17px}
.post-meta a{font-weight:600;color:var(--blue-cta)}
.post-meta a:hover{color:var(--blue-h)}

/* ░░ CORPO DO POST: sumário à esquerda, texto à direita (como os textos legais) ░░ */
.post-sec{padding-top:64px}
.post-grid{display:grid;grid-template-columns:252px minmax(0,760px);gap:56px;align-items:start}
.post-main{min-width:0}
.post-rail{position:sticky;top:calc(var(--header-h,72px) + 32px);display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - var(--header-h,72px) - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.post-toc{position:static;gap:0}
.post-toc a{padding:7px 0;font-size:14.5px;line-height:1.4;text-wrap:pretty}
.post-toc a[aria-current]{color:var(--blue-h);font-weight:600}
.rail-cta{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.rail-cta .rail-t{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.rail-cta p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.rail-cta .btn{margin-top:4px;width:100%;padding:0 16px;gap:8px}
.rail-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.rail-wa .i-wa{font-size:18px;color:#1f9d55}
.rail-wa:hover{color:var(--ink)}

/* sumário no celular: recolhido acima do texto */
.post-toc-m{display:none;margin-bottom:32px;border-radius:var(--r);background:var(--surface)}
.post-toc-m summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 18px;font-size:15.5px;font-weight:700;cursor:pointer;list-style:none}
.post-toc-m summary::-webkit-details-marker{display:none}
.post-toc-m summary .ph{font-size:18px;color:var(--ink-3);transition:transform .25s var(--ease-out)}
.post-toc-m[open] summary .ph{transform:rotate(180deg)}
.post-toc-m nav{display:flex;flex-direction:column;padding:0 18px 10px}
.post-toc-m a{padding:11px 0;border-top:1px solid var(--line-2);font-size:15px;line-height:1.4;color:var(--ink-2)}

/* ░░ TEXTO DO POST (HTML do editor do WordPress) ░░ */
.post-prose > :first-child{margin-top:0}
.post-prose h1,.post-prose h2{font-size:30px;letter-spacing:-.025em;line-height:1.2;margin:48px 0 14px;scroll-margin-top:calc(var(--header-h,72px) + 24px)}
.post-prose h3{scroll-margin-top:calc(var(--header-h,72px) + 24px)}
.post-prose h4,.post-prose h5,.post-prose h6{font-size:18px;letter-spacing:-.015em;line-height:1.3;margin:28px 0 8px}
.post-prose h2 + h3{margin-top:18px}
.post-prose strong,.post-prose b{font-weight:600;color:var(--ink)}
.post-prose ul li::marker,.post-prose ol li::marker{color:var(--blue-cta);font-weight:600}
.post-prose p + ul,.post-prose p + ol{margin-top:12px}
.post-prose li > ul,.post-prose li > ol{margin:6px 0 0}
.post-prose sup{font-size:.7em;line-height:0}
.post-prose mark{padding:0 3px;border-radius:3px;background:var(--blue-xl);color:var(--ink)}
.post-prose a:hover{color:var(--blue-h)}
.post-prose img{height:auto;border-radius:var(--r)}
.post-prose figure{margin:36px 0}
.post-prose figure img{width:100%}
.post-prose figcaption,.post-prose .wp-element-caption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-3);text-align:center}
.post-prose .aligncenter{margin-left:auto;margin-right:auto}
.post-prose .alignleft{float:left;max-width:50%;margin:6px 28px 16px 0}
.post-prose .alignright{float:right;max-width:50%;margin:6px 0 16px 28px}
.post-prose hr{margin:44px 0;border:0;border-top:1px solid var(--line-2)}
.post-prose blockquote{margin:32px 0;padding:2px 0 2px 24px;border-left:1px solid var(--line-2)}
.post-prose blockquote p{font-size:20px;font-weight:500;line-height:1.55;color:var(--ink)}
.post-prose blockquote cite{display:block;margin-top:10px;font-size:14px;font-style:normal;color:var(--ink-3)}
.post-prose table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.post-prose th,.post-prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--ink-2)}
.post-prose th{font-weight:700;color:var(--ink);border-bottom-color:var(--line-2)}
.post-prose .wp-block-table{margin:32px 0;overflow-x:auto}
/* galeria do Gutenberg */
.post-prose .wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:36px 0}
.post-prose .wp-block-gallery figure{margin:0}
.post-prose .wp-block-gallery.is-cropped img{aspect-ratio:4/3;object-fit:cover}
/* vídeo incorporado (YouTube) */
.post-prose .wp-block-embed{margin:36px 0}
.post-prose .wp-has-aspect-ratio .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.post-prose .wp-has-aspect-ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.post-prose iframe{max-width:100%}
/* bloco de FAQ do Yoast */
.post-prose .schema-faq{margin:32px 0;border-top:1px solid var(--line-2)}
.post-prose .schema-faq-section{padding:20px 0;border-bottom:1px solid var(--line-2)}
.post-prose .schema-faq-question{display:block;font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.4;color:var(--ink)}
.post-prose .schema-faq-answer{margin-top:8px}
.post-prose::after{content:"";display:table;clear:both}

/* ░░ LISTAGEM ░░ */
.bl-busca{display:flex;gap:8px;max-width:560px;margin-top:28px}
.bl-busca .inp{flex:1;min-width:0}
.bl-busca .inp::-webkit-search-cancel-button{cursor:pointer}
.bl-busca .btn{min-height:50px;flex-shrink:0}
.bl-busca .btn .ph{font-size:18px}
.bl-sec{padding-top:64px}
.bl-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:32px}
.bl-feat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.bl-side{display:grid;grid-template-rows:1fr 1fr;gap:16px;min-width:0}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

/* cartão de artigo */
.card{display:flex;flex-direction:column;min-width:0;border-radius:var(--r);background:#fff;box-shadow:var(--sh-1),0 0 0 1px var(--line);overflow:hidden;color:var(--ink);transition:box-shadow .25s ease,transform .25s var(--ease-out)}
/* 16:9: os banners de capa (1376x768) têm o título rente à borda esquerda e aparecem inteiros; as fotos 3:2 perdem só um pouco em cima e embaixo */
.card-media{position:relative;flex-shrink:0;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.card-media.is-empty{background:var(--surface)}
.card-media.is-empty .guilloche{position:absolute;left:50%;top:50%;width:min(320px,92%);transform:translate(-50%,-50%)}
.card-media.is-empty .guilloche path{opacity:.5}
.card-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;padding:20px 22px 22px}
.card time{font-size:13.5px;color:var(--ink-3)}
.card h2,.card h3{font-size:18px;line-height:1.35;letter-spacing:-.015em;text-wrap:pretty}
.card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.6;color:var(--ink-2)}
.card .prod-link{margin-top:auto;padding-top:6px}
.card:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .card:hover{box-shadow:var(--sh-2),0 0 0 1px var(--line-2);transform:translateY(-2px)}
  .card:hover .card-media img{transform:scale(1.03)}
  .card:hover .i-arrow{transform:translateX(3px)}
}
.card-destaque{background:var(--blue-t);box-shadow:0 0 0 1px var(--blue-xl)}

.card-destaque .card-body{gap:12px;padding:28px 30px 30px}
.card-destaque h2{font-size:28px;line-height:1.2;letter-spacing:-.025em;max-width:26ch}
.card-destaque p{font-size:16px;max-width:56ch}
.card-lado{flex-direction:row}
.card-lado .card-media{width:42%;aspect-ratio:auto}
.card-lado .card-body{padding:20px 22px}
.card-lado h2{font-size:18px}
.card-lado p{-webkit-line-clamp:2}

/* paginação */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:48px}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-sm);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;transition:box-shadow .2s ease,color .2s ease,transform .16s var(--ease-out)}
.pager .page-numbers .ph{font-size:16px}
.pager .prev,.pager .next{padding:0 16px}
.pager .current{background:var(--blue-cta);box-shadow:none;color:#fff}
.pager .dots{min-width:20px;padding:0;background:none;box-shadow:none;color:var(--ink-3)}
.pager a:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){ .pager a:hover{box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue-h)} }

/* busca sem resultado */
.bl-vazio{max-width:680px;padding:36px;border-radius:20px;background:var(--surface)}
.bl-vazio h2{font-size:26px;letter-spacing:-.025em}
.bl-vazio p{margin-top:10px;font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.bl-vazio-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}

/* 404 */
.nf-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.nf-hero .bl-busca{margin-top:28px}

/* ░░ RESPONSIVO ░░ */
@media (max-width:1100px){
  .post-grid{grid-template-columns:minmax(0,760px);gap:0}
  .post-rail{display:none}
  .post-toc-m{display:block}
}
@media (max-width:1024px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .post-hero .ph-grid.is-wide{grid-template-columns:1fr}
  .post-meta{margin-top:18px;font-size:14.5px}
  .post-sec,.bl-sec{padding-top:40px}
  .post-prose h1,.post-prose h2{font-size:25px;margin-top:40px}
  .post-prose blockquote p{font-size:18px}
  .post-prose .alignleft,.post-prose .alignright{float:none;max-width:none;margin:28px 0}
  .bl-feat{grid-template-columns:1fr;gap:12px;margin-bottom:12px}
  .bl-side{grid-template-rows:none;gap:12px}
  .bl-grid{gap:12px}
  .card-destaque .card-body{padding:22px 20px 24px}
  .card-destaque h2{font-size:23px}
  .bl-vazio{padding:24px 20px}
}
@media (max-width:640px){
  .bl-grid{grid-template-columns:1fr}
  /* em lista: foto pequena à esquerda, título e data ao lado */
  .bl-grid .card,.card-lado{flex-direction:row}
  .bl-grid .card-media,.card-lado .card-media{width:112px;aspect-ratio:auto;min-height:112px}
  .bl-grid .card-body,.card-lado .card-body{gap:6px;padding:14px 16px}
  .bl-grid .card h2,.bl-grid .card h3,.card-lado h2{font-size:16px}
  .bl-grid .card p,.card-lado p,.bl-grid .card .prod-link,.card-lado .prod-link{display:none}
  .bl-busca .btn{padding:0 16px}
  .pager .page-numbers:not(.prev):not(.next):not(.current){display:none}
}
