/* ============================================================
   Belzcont — Infoblog (listagem + artigo)
   Depende de assets/base.css (tokens, header, rodapé).
   ============================================================ */

/* ---------- topo das páginas do blog ---------- */
.blog-hero{position:relative;overflow:hidden;padding:8rem 0 3rem}
@media(min-width:640px){.blog-hero{padding:10rem 0 4rem}}
.blog-hero .blob-a{top:-12rem;left:-8rem;width:32rem;height:32rem;background-image:var(--gradient-primary);opacity:.13;filter:blur(64px)}
.blog-hero .blob-b{top:-4rem;right:-10rem;width:26rem;height:26rem;background:var(--gold);opacity:.16;filter:blur(64px)}
.blog-hero-inner{position:relative;z-index:1;max-width:46rem}
.blog-hero h1{margin-top:1rem;font-size:2.25rem;font-weight:700;line-height:1.1}
@media(min-width:640px){.blog-hero h1{font-size:3rem}}
.blog-hero .lead{margin-top:1.25rem;color:var(--muted-foreground);line-height:1.625}
@media(min-width:640px){.blog-hero .lead{font-size:1.125rem}}

.cadence{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.75rem;
  border:1px solid var(--border);border-radius:9999px;background:var(--card);
  padding:.5rem 1rem;font-size:.8125rem;font-weight:500;color:var(--muted-foreground);
  box-shadow:var(--shadow-soft);
}
.cadence svg{width:1rem;height:1rem;color:var(--primary);flex-shrink:0}

/* ---------- metadados ---------- */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-size:.75rem;color:var(--muted-foreground)}
.chip{
  display:inline-flex;align-items:center;border-radius:9999px;
  background:var(--accent);color:var(--accent-foreground);
  padding:.25rem .625rem;font-size:.6875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.dot{width:3px;height:3px;border-radius:9999px;background:currentColor;opacity:.5}

/* ---------- listagem ---------- */
.post-list{padding-bottom:5rem}
@media(min-width:640px){.post-list{padding-bottom:6rem}}

.post-featured{display:block;padding:1.75rem}
@media(min-width:900px){
  .post-featured{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;padding:2.5rem}
}
.post-featured .flag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--primary);
}
.post-featured h2{margin-top:.875rem;font-size:1.625rem;font-weight:700;line-height:1.2}
@media(min-width:640px){.post-featured h2{font-size:2rem}}
.post-featured p{margin-top:1rem;color:var(--muted-foreground);line-height:1.625}
.post-featured .post-meta{margin-top:1.25rem}
.featured-art{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background-image:var(--gradient-surface);color:var(--surface-foreground);
  padding:2.5rem 2rem;margin-top:1.75rem;min-height:13rem;
  display:flex;flex-direction:column;justify-content:flex-end;
}
@media(min-width:900px){.featured-art{margin-top:0;min-height:16rem}}
.featured-art .blob{top:-5rem;right:-4rem;width:18rem;height:18rem;background:var(--primary-glow);opacity:.28;filter:blur(40px)}
.featured-art .n{position:relative;z-index:1;font-family:var(--font-display);font-size:3.5rem;font-weight:700;line-height:1;opacity:.35}
.featured-art .k{position:relative;z-index:1;margin-top:.5rem;font-size:.875rem;opacity:.85}

.post-grid{margin-top:1.5rem;display:grid;gap:1.25rem}
@media(min-width:640px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.post-grid{grid-template-columns:repeat(3,1fr)}}

.post-card{display:flex;flex-direction:column;height:100%;padding:1.75rem}
.post-card h3{margin-top:.875rem;font-size:1.125rem;font-weight:600;line-height:1.3}
.post-card p{margin-top:.625rem;font-size:.875rem;line-height:1.625;color:var(--muted-foreground)}
.read-more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.25rem;
  font-size:.875rem;font-weight:600;color:var(--primary);
}
.post-card .read-more{margin-top:auto;padding-top:1.25rem}
.read-more svg{width:.875rem;height:.875rem;transition:transform .2s}
a:hover .read-more svg,.read-more:hover svg{transform:translateX(4px)}

.empty-state{
  margin-top:1.5rem;border:1px dashed var(--border);border-radius:var(--radius);
  padding:3rem 1.5rem;text-align:center;color:var(--muted-foreground);
}

/* ---------- artigo ---------- */
.article{padding:7.5rem 0 0}
@media(min-width:640px){.article{padding-top:9.5rem}}
.article-wrap{width:100%;max-width:46rem;margin-inline:auto;padding-inline:1.25rem}

.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--muted-foreground)}
.breadcrumb a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.breadcrumb svg{width:.875rem;height:.875rem;opacity:.6}

.article-head h1{margin-top:1.25rem;font-size:2rem;font-weight:700;line-height:1.15}
@media(min-width:640px){.article-head h1{font-size:2.75rem}}
.article-head .lead{margin-top:1.25rem;font-size:1.0625rem;line-height:1.7;color:var(--muted-foreground)}
.article-head .post-meta{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}

/* ---------- corpo do texto ---------- */
.prose{margin-top:2.5rem;font-size:1.0625rem;line-height:1.75}
.prose > * + *{margin-top:1.5rem}
.prose h2{margin-top:3rem;font-size:1.5rem;font-weight:700;line-height:1.25}
.prose h3{margin-top:2.25rem;font-size:1.1875rem;font-weight:600;line-height:1.3}
.prose h2 + *,.prose h3 + *{margin-top:1rem}
.prose p{color:color-mix(in oklab,var(--foreground) 88%,transparent)}
.prose strong{font-weight:700;color:var(--foreground)}
.prose a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose ul,.prose ol{padding-left:1.25rem;display:flex;flex-direction:column;gap:.625rem}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:1.5rem}
.prose ul li::before{
  content:"";position:absolute;left:.3rem;top:.65em;
  width:.4rem;height:.4rem;border-radius:9999px;background:var(--primary-glow);
}
.prose ol{list-style:decimal}
.prose ol li{padding-left:.25rem}
.prose ol li::marker{color:var(--primary);font-weight:700}
.prose blockquote{
  border-left:3px solid var(--primary-glow);
  background:var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:1.25rem 1.5rem;color:var(--accent-foreground);font-size:1rem;
}
.prose blockquote p{color:inherit}
.prose blockquote > * + *{margin-top:.75rem}
.prose code{
  background:var(--muted,var(--accent));border-radius:.375rem;
  padding:.15em .4em;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.prose hr{border:0;border-top:1px solid var(--border);margin-block:2.5rem}
.prose img{border-radius:var(--radius);margin-block:2rem}

/* ---------- fim do artigo ---------- */
.article-cta{
  position:relative;overflow:hidden;margin-top:4rem;
  border-radius:var(--radius-3xl);background-image:var(--gradient-surface);
  color:var(--surface-foreground);padding:2.25rem 1.75rem;box-shadow:var(--shadow-float);
}
@media(min-width:640px){.article-cta{padding:2.75rem}}
.article-cta .blob{bottom:-6rem;left:-4rem;width:18rem;height:18rem;background:var(--primary-glow);opacity:.25;filter:blur(40px)}
/* :not(.blob) — senão o blob decorativo perde o position:absolute e entra no fluxo */
.article-cta > *:not(.blob){position:relative;z-index:1}
.article-cta h2{font-size:1.375rem;font-weight:700;line-height:1.3}
@media(min-width:640px){.article-cta h2{font-size:1.625rem}}
.article-cta p{margin-top:.75rem;font-size:.9375rem;line-height:1.7;opacity:.85}
/* botão claro sobre o fundo escuro */
.article-cta .btn{
  margin-top:1.75rem;border:0;
  background:var(--surface-foreground);color:var(--primary);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.5);
}
.article-cta .btn:hover{background:#fff;color:var(--primary)}

.disclaimer{
  margin-top:2.5rem;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);padding:1.25rem 1.5rem;
  font-size:.8125rem;line-height:1.7;color:var(--muted-foreground);
}
.disclaimer strong{color:var(--foreground)}

.related{padding:4rem 0 5rem}
@media(min-width:640px){.related{padding-bottom:6rem}}
.related h2{font-size:1.375rem;font-weight:700}
.related .post-grid{margin-top:1.5rem}
@media(min-width:1024px){.related .post-grid{grid-template-columns:repeat(2,1fr)}}