/* =========================================================
   Blog (/blog e /blog/slug). Tokens, header, rodapé, botões e cards
   vêm do CSS do index.html, que as páginas do blog carregam inteiro.
   ========================================================= */

/* item "Blog" ativo no menu */
.hdr-nav a[aria-current]{color:var(--color-on-dark)}
.hdr-nav a[aria-current]::after{transform:scaleX(1)}
.hdr.is-scrolled .hdr-nav a[aria-current]{color:var(--color-text)}
.menu-links a[aria-current]{color:var(--color-accent)}

/* Header sobre fundo claro (listagem e artigo começam claros, sem painel escuro) */
.hdr--light{color:var(--color-text)}
.hdr--light .hdr-nav a{color:var(--color-text-muted)}
.hdr--light .hdr-nav a:hover,.hdr--light .hdr-nav a[aria-current]{color:var(--color-text)}
.hdr--light .hdr-menu{border-color:var(--border-subtle)}

/* Topo das páginas claras: espaço para o header fixo */
.page-top{padding-top:calc(var(--frame) + var(--header-h) + var(--space-3xl))}

/* ---------- /blog: título + grade de cards em caixa ---------- */
.blog-title{margin-top:var(--space-md);font:400 clamp(44px,5.6vw,80px)/1.02 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.blog-intro{margin-top:var(--space-md);max-width:52ch;color:var(--color-text-muted)}
.blog-list{padding-top:var(--space-2xl);padding-bottom:var(--section-y)}
.blog-tabs{margin-top:0;margin-bottom:var(--space-xl)}
.blog-tabs .tab{display:inline-flex;align-items:center;text-decoration:none}
.blog-tabs .tab[aria-current="page"]{color:var(--color-text)}
.blog-tabs .tab[aria-current="page"]::after{transform:scaleX(1)}
.blog-tabs .tab:focus-visible{outline-offset:-2px;border-radius:4px}
.post-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);margin-top:0}
.blog-more{display:flex;justify-content:center;margin-top:var(--space-3xl)}
.blog-more .btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.blog-pages{margin-top:var(--space-lg);text-align:center}
.blog-empty{display:grid;justify-items:start;gap:var(--space-sm);max-width:640px}
.blog-empty-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-md)}

.post-card--boxed{overflow:hidden;background:var(--color-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.post-card--boxed:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.post-card--boxed .media{aspect-ratio:2/1;border-radius:0}
.post-card-body{display:flex;flex:1;flex-direction:column;padding:var(--space-md) var(--space-lg) var(--space-lg)}
.post-card--boxed .post-meta{justify-content:space-between;margin-top:0}
.post-card--boxed .post-card-title{margin-top:var(--space-sm);font:500 clamp(20px,1.6vw,23px)/1.3 var(--font-display);letter-spacing:-.015em}
.post-card--boxed:has(a:focus-visible){outline-offset:3px}
.chip-cat{display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--color-accent-soft);color:#A6450B;font:500 12.5px/1.2 var(--font-ui);text-decoration:none}
a.chip-cat:hover{background:rgba(240,98,15,.14)}

/* ---------- Artigo: título em cima, texto à esquerda, dados à direita ---------- */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 272px;column-gap:clamp(var(--space-xl),7vw,var(--space-4xl))}
.post-head{grid-column:1;padding-bottom:var(--space-xl)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--space-xs);list-style:none;font:500 var(--fs-caption)/1.4 var(--font-ui);color:var(--color-text-muted)}
.crumbs li+li::before{content:"/";margin-right:var(--space-xs);opacity:.45}
.crumbs a{text-decoration:none;transition:color var(--dur) var(--ease)}
.crumbs a:hover{color:var(--color-text)}
.post-title{margin-top:var(--space-md);font:400 clamp(34px,3.6vw,52px)/1.1 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.post-main{grid-column:1;grid-row:2;min-width:0}
.post-cover{margin:0}
.post-cover .media{aspect-ratio:16/9;border-radius:var(--radius-md)}
.post-lead{margin-top:var(--space-xl);font:400 var(--fs-body-lg)/1.6 var(--font-body);letter-spacing:-.005em;color:var(--color-text)}

.post-aside{grid-column:2;grid-row:2}
.post-facts{position:sticky;top:calc(var(--header-h) + var(--space-lg));display:grid;gap:var(--space-lg)}
.post-fact dt{font:400 var(--fs-caption)/1.4 var(--font-ui);color:var(--color-text-muted)}
.post-fact dd{margin-top:var(--space-xs);font:400 var(--fs-small)/1.45 var(--font-ui)}
.post-author{display:flex;align-items:center;gap:var(--space-sm)}
.post-author img{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;object-position:60% 16%;background:var(--color-surface-alt)}
.post-author b{display:block;font-weight:500}
.post-author small{display:block;font-size:var(--fs-caption);color:var(--color-text-muted)}

/* Texto do artigo: hierarquia editorial dentro da coluna principal */
.prose{margin-top:var(--space-lg);font:400 18px/1.75 var(--font-body);color:var(--color-text-muted);overflow-wrap:break-word}
.post-cover+.prose{margin-top:var(--space-xl)}
.prose>*+*{margin-top:1.15em}
.prose h2,.prose h3,.prose strong,.prose blockquote,.prose a{color:var(--color-text)}
.prose h2{margin-top:2em;font:400 clamp(26px,2.4vw,34px)/1.2 var(--font-display);letter-spacing:-.025em;text-wrap:balance;scroll-margin-top:calc(var(--header-h) + var(--space-md))}
.prose h3{margin-top:1.7em;font:500 clamp(20px,1.7vw,23px)/1.3 var(--font-display);letter-spacing:-.015em;scroll-margin-top:calc(var(--header-h) + var(--space-md))}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose a{text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-thickness var(--dur) var(--ease)}
.prose a:hover{text-decoration-thickness:2px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{padding-left:.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--color-accent)}
.prose blockquote{margin-block:1.8em;padding-left:var(--space-lg);border-left:2px solid var(--color-accent);font:400 clamp(20px,1.9vw,24px)/1.45 var(--font-display);letter-spacing:-.01em}
.prose blockquote p+p{margin-top:.6em}
.prose figure{margin-block:2em}
.prose img{width:100%;height:auto;border-radius:var(--radius-sm);background:var(--color-surface-alt)}
.prose strong{font-weight:600}

/* CTA numa linha própria da grade: a coluna de dados termina junto com o texto, e o box fixo para ali */
.post-end{grid-column:1;grid-row:3;margin-top:var(--space-3xl);padding-bottom:var(--space-3xl)}
.post-cta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-lg)}
.post-cta .h3{margin-top:var(--space-xs)}
.post-cta p.muted{margin-top:var(--space-xs);max-width:44ch}
.post-back{margin-top:var(--space-xl)}
.flip{transform:scaleX(-1)}
.btn:hover svg.flip{transform:scaleX(-1) translateX(3px)}

/* "Mais conteúdos": painel branco, como a seção de Resultados da home */
.related-stage{margin-inline:var(--frame);border-radius:var(--radius-lg);background:var(--color-surface)}
.related-title{margin-top:var(--space-sm);font:400 var(--fs-h2)/1.08 var(--font-display);letter-spacing:-.03em;text-wrap:balance}

/* Painel escuro (só a página 404) */
.page-hero{position:relative;margin:var(--frame);border-radius:var(--radius-lg);overflow:hidden;overflow:clip;isolation:isolate}
.page-hero-in{padding-top:calc(var(--header-h) + var(--space-4xl));padding-bottom:var(--space-3xl)}
.page-hero .display{margin-top:var(--space-md);max-width:16ch}
.page-hero-sub{margin-top:var(--space-md);max-width:52ch;color:var(--color-on-dark-muted)}
.page-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-lg);margin-top:var(--space-xl)}

/* Barra de pré-visualização (só aparece para quem está logado no painel) */
.preview-bar{position:fixed;left:50%;bottom:var(--space-md);z-index:90;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-md);max-width:calc(100% - 2 * var(--space-md));padding:12px 22px;border-radius:var(--radius-pill);background:var(--color-dark);color:var(--color-on-dark);box-shadow:var(--shadow-sm);font:400 var(--fs-caption)/1.4 var(--font-ui);transform:translateX(-50%)}
.preview-bar strong{font-weight:500;color:var(--color-accent-hover)}
.preview-bar a{text-underline-offset:4px}
.is-preview .m-cta{display:none!important}

@media (min-width:861px) and (max-width:1099px){
  .related-stage .post-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-sm)}
}
@media (max-width:1099px){
  .post-layout{grid-template-columns:minmax(0,1fr) 232px;column-gap:var(--space-xl)}
}
@media (max-width:860px){
  .page-top{padding-top:calc(var(--frame) + var(--header-h) + var(--space-2xl))}
  .page-hero-in{padding-top:calc(var(--header-h) + var(--space-3xl));padding-bottom:var(--space-2xl)}
  .blog-list{padding-top:var(--space-xl)}
  .blog-tabs{margin-bottom:var(--space-lg)}
  /* artigo: título, dados do artigo, depois capa e texto */
  .post-layout{grid-template-columns:minmax(0,1fr)}
  .post-head{padding-bottom:var(--space-lg)}
  .post-aside{grid-column:1;grid-row:2;margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--border-subtle)}
  .post-main{grid-row:3}
  .post-end{grid-row:4}
  .post-facts{position:static;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-md) var(--space-lg)}
  .post-fact:has(.post-author){grid-column:1/-1;order:-1}
}
@media (max-width:600px){
  .post-grid--2{grid-template-columns:minmax(0,1fr)}
  .post-card-body{padding:var(--space-md)}
  .prose{font-size:17px}
  .prose blockquote{padding-left:var(--space-md)}
  .post-cover .media{aspect-ratio:4/3}
  .post-cta{padding:var(--space-md)}
  .post-cta .btn{width:100%}
  .page-hero-actions .btn-primary{width:100%}
  .preview-bar{left:var(--space-sm);right:var(--space-sm);bottom:var(--space-sm);border-radius:var(--radius-sm);transform:none}
}