/* ============================================================
   BLOG.CSS — Estilos exclusivos do blog
   Depende de global.min.css como base
   ============================================================ */

/* ── HERO DA LISTAGEM ───────────────────────────────────────── */
.blog-hero{
  background:var(--bg);
  padding:60px var(--section-px) 0;
}
.blog-hero-inner{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.blog-hero h1{
  font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
  margin-bottom:14px;
}
.blog-hero h1 em{ font-style:normal; color:var(--verde); }
.blog-hero p{
  color:var(--txt2);
  font-size:1rem;
  line-height:1.7;
  max-width:580px;
}

/* ── FILTROS DE CATEGORIA ───────────────────────────────────── */
.blog-filters{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:32px var(--section-px) 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.filter-btn{
  background:var(--bg3);
  border:1px solid rgba(255,255,255,.08);
  color:var(--txt2);
  font-family:'Poppins',sans-serif;
  font-size:0.8rem;
  font-weight:600;
  padding:8px 18px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:all var(--t);
  letter-spacing:.03em;
}
.filter-btn:hover,
.filter-btn.active{
  background:rgba(46,232,154,.12);
  border-color:rgba(46,232,154,.35);
  color:var(--verde);
}

/* ── GRID DE POSTS ──────────────────────────────────────────── */
.blog-grid-section{
  background:var(--bg);
  padding:40px var(--section-px) 100px;
}
.blog-grid{
  max-width:var(--wrap-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.post-card{
  background:var(--bg3);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all var(--t);
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
}
.post-card:hover{
  border-color:rgba(46,232,154,.22);
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.post-thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.post-thumb-placeholder{
  width:100%;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--bg4),var(--bg2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
}
.post-body{
  padding:24px 24px 28px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.post-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.post-cat{
  background:rgba(46,232,154,.1);
  border:1px solid rgba(46,232,154,.2);
  color:var(--verde);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:var(--radius-pill);
}
.post-date{
  color:var(--txt2);
  font-size:0.75rem;
}
.post-title{
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  margin-bottom:10px;
  color:var(--branco);
}
.post-excerpt{
  color:var(--txt2);
  font-size:0.85rem;
  line-height:1.65;
  flex:1;
  margin-bottom:20px;
}
.post-read-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--verde);
  font-size:0.82rem;
  font-weight:600;
  margin-top:auto;
}
.post-card:hover .post-read-more{ gap:10px; }

/* ── POST INDIVIDUAL ────────────────────────────────────────── */
.post-hero{
  background:var(--bg);
  padding:60px var(--section-px) 48px;
}
.post-hero-inner{
  max-width:800px;
  margin:0 auto;
}
.post-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:28px;
  font-size:0.8rem;
  color:var(--txt2);
}
.post-breadcrumb a{
  color:var(--txt2);
  text-decoration:none;
  transition:color var(--t);
}
.post-breadcrumb a:hover{ color:var(--verde); }
.post-breadcrumb span{ color:rgba(255,255,255,.2); }
.post-hero h1{
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.025em;
  margin-bottom:20px;
}
.post-hero-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07);
}
.post-author{
  display:flex;
  align-items:center;
  gap:10px;
}
.post-author-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(46,232,154,.15);
  border:1px solid rgba(46,232,154,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  font-weight:800;
  color:var(--verde);
  flex-shrink:0;
}
.post-author-name{ font-size:0.85rem; font-weight:600; }
.post-author-role{ color:var(--txt2); font-size:0.75rem; }
.post-hero-date{ color:var(--txt2); font-size:0.8rem; }
.post-hero-read{ color:var(--txt2); font-size:0.8rem; }

/* ── CONTEÚDO DO ARTIGO ─────────────────────────────────────── */
.post-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:48px;
  max-width:1100px;
  margin:0 auto;
  padding:48px var(--section-px) 100px;
  align-items:start;
}
.post-content{
  min-width:0;
}
.post-featured-img{
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  margin-bottom:36px;
  border:1px solid rgba(255,255,255,.06);
}
/* Tipografia do artigo */
.post-content h2{
  font-size:1.5rem;
  font-weight:800;
  line-height:1.25;
  margin:40px 0 16px;
  color:var(--branco);
}
.post-content h3{
  font-size:1.15rem;
  font-weight:700;
  margin:28px 0 12px;
  color:var(--branco);
}
.post-content p{
  color:var(--txt);
  font-size:1rem;
  line-height:1.85;
  margin-bottom:20px;
}
.post-content strong{ color:var(--branco); font-weight:700; }
.post-content em{ color:var(--verde); font-style:normal; font-weight:600; }
.post-content ul,
.post-content ol{
  padding-left:0;
  list-style:none;
  margin-bottom:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.post-content ul li,
.post-content ol li{
  color:var(--txt);
  font-size:0.97rem;
  line-height:1.7;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.post-content ul li::before{
  content:'▸';
  color:var(--verde);
  flex-shrink:0;
  margin-top:2px;
}
.post-content ol{ counter-reset:ol; }
.post-content ol li::before{
  counter-increment:ol;
  content:counter(ol)'.';
  color:var(--verde);
  font-weight:700;
  font-size:0.85rem;
  flex-shrink:0;
  margin-top:2px;
  min-width:18px;
}
.post-content blockquote{
  background:rgba(46,232,154,.07);
  border-left:3px solid var(--verde);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:20px 24px;
  margin:28px 0;
  color:var(--txt);
  font-size:1rem;
  line-height:1.75;
  font-style:italic;
}
.post-content .highlight-box{
  background:rgba(46,232,154,.07);
  border:1px solid rgba(46,232,154,.2);
  border-radius:var(--radius-md);
  padding:24px 28px;
  margin:28px 0;
}
.post-content .highlight-box p{ margin-bottom:0; }
.post-divider{
  border:none;
  border-top:1px solid rgba(255,255,255,.07);
  margin:36px 0;
}
/* Tags do artigo */
.post-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.07);
}
.post-tag{
  background:var(--bg4);
  border:1px solid rgba(255,255,255,.08);
  color:var(--txt2);
  font-size:0.75rem;
  padding:5px 14px;
  border-radius:var(--radius-pill);
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.post-sidebar{ position:sticky; top:calc(var(--header-h) + 24px); }
.sidebar-card{
  background:var(--bg3);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  margin-bottom:20px;
}
.sidebar-card h4{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--verde);
  margin-bottom:16px;
}
.sidebar-cta{
  background:linear-gradient(135deg,rgba(46,232,154,.1),rgba(46,232,154,.04));
  border:1px solid rgba(46,232,154,.22);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  margin-bottom:20px;
  text-align:center;
}
.sidebar-cta h4{
  font-size:1rem;
  font-weight:800;
  margin-bottom:10px;
  line-height:1.3;
}
.sidebar-cta p{
  color:var(--txt2);
  font-size:0.82rem;
  line-height:1.65;
  margin-bottom:20px;
}
.sidebar-cta .btn-main{
  width:100%;
  justify-content:center;
  font-size:0.88rem;
  padding:14px 20px;
}
/* Posts relacionados */
.related-post{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  text-decoration:none;
  color:inherit;
  transition:all var(--t);
}
.related-post:last-child{ border-bottom:none; padding-bottom:0; }
.related-post:hover .related-post-title{ color:var(--verde); }
.related-post-icon{
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  background:var(--bg4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.related-post-title{
  font-size:0.82rem;
  font-weight:600;
  line-height:1.4;
  transition:color var(--t);
}
.related-post-date{ color:var(--txt2); font-size:0.72rem; margin-top:3px; }

/* ── CTA FINAL DO POST ──────────────────────────────────────── */
.post-cta-section{
  background:var(--bg2);
  padding:72px var(--section-px);
  text-align:center;
  border-top:1px solid rgba(255,255,255,.06);
}
.post-cta-inner{
  max-width:620px;
  margin:0 auto;
}
.post-cta-inner h2{
  font-size:clamp(1.5rem,2.5vw,2rem);
  font-weight:800;
  margin-bottom:14px;
  line-height:1.25;
}
.post-cta-inner p{
  color:var(--txt2);
  font-size:0.97rem;
  line-height:1.75;
  margin-bottom:32px;
}

/* ── PAGINAÇÃO ──────────────────────────────────────────────── */
.blog-pagination{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:0 var(--section-px) 80px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.page-btn{
  width:38px;
  height:38px;
  border-radius:var(--radius-sm);
  background:var(--bg3);
  border:1px solid rgba(255,255,255,.08);
  color:var(--txt2);
  font-family:'Poppins',sans-serif;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--t);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.page-btn:hover,
.page-btn.active{
  background:rgba(46,232,154,.12);
  border-color:rgba(46,232,154,.35);
  color:var(--verde);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1024px){
  .post-layout{ grid-template-columns:1fr; }
  .post-sidebar{ position:static; }
}
@media(max-width:768px){
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .blog-hero,.blog-grid-section{ padding-left:18px; padding-right:18px; }
  .blog-filters{ padding-left:18px; padding-right:18px; }
  .post-hero,.post-layout,.post-cta-section{ padding-left:18px; padding-right:18px; }
  .blog-hero{ padding-top:32px; }
  .post-hero{ padding-top:32px; }
}
@media(max-width:600px){
  .blog-grid{ grid-template-columns:1fr; }
  .post-layout{ padding-top:32px; }
}