/* blog.css — carregado DEPOIS de landing.css nas paginas do blog.
   Nao redefine :root nem .btn/.lp-*: reaproveita tudo isso do
   landing.css, so adiciona o que e especifico do blog. */

.blog-hero{position:relative;z-index:10;max-width:820px;margin:0 auto;padding:48px 24px 24px;text-align:center}
.blog-hero .lp-h1{margin-bottom:14px}

.category-filter{position:relative;z-index:10;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:820px;margin:0 auto 36px;padding:0 24px}
.category-pill{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted);font-size:.82rem;font-weight:600;padding:8px 16px;border-radius:100px;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif}
.category-pill:hover{color:var(--white);border-color:rgba(255,255,255,.2)}
.category-pill.active{background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:transparent;color:#fff}

.blog-grid{position:relative;z-index:10;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;max-width:1100px;margin:0 auto;padding:0 24px 60px}
.blog-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,border-color .2s ease}
.blog-card:hover{transform:translateY(-3px);border-color:rgba(124,58,237,.4)}
.blog-card-cat{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--purple2)}
.blog-card-title{font-family:'Playfair Display',serif;font-size:1.2rem;line-height:1.3;margin:0}
.blog-card-excerpt{color:var(--muted);font-size:.88rem;line-height:1.55;margin:0}
.blog-card-date{color:var(--faint);font-size:.76rem;margin-top:auto}
.blog-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0}

.blog-article{position:relative;z-index:10;max-width:720px;margin:0 auto;padding:48px 24px 8px}
.blog-article-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--faint);margin-bottom:14px}
.blog-article-cat{color:var(--purple2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}
.blog-article h1{font-family:'Playfair Display',serif;font-size:2.1rem;line-height:1.22;margin-bottom:22px}
.blog-article-body{color:var(--white);font-size:1rem;line-height:1.75}
.blog-article-body h2{font-family:'Playfair Display',serif;font-size:1.5rem;margin:34px 0 14px}
.blog-article-body h3{font-size:1.12rem;margin:24px 0 10px;color:var(--white)}
.blog-article-body p{margin-bottom:16px;color:var(--muted)}
.blog-article-body ul,.blog-article-body ol{margin:0 0 16px 22px;color:var(--muted)}
.blog-article-body li{margin-bottom:8px}
.blog-article-body strong{color:var(--white)}

.blog-cta-box{position:relative;z-index:10;max-width:720px;margin:8px auto 24px;padding:28px;border-radius:18px;background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid rgba(124,58,237,.35);text-align:center}
.blog-cta-box p{color:var(--muted);font-size:.95rem;margin-bottom:16px}

.blog-inline-cta{margin:28px 0;padding:16px 20px;border-radius:14px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.28);font-size:.92rem;color:var(--white)}
.blog-inline-cta a{color:var(--purple2);font-weight:700;text-decoration:underline;text-underline-offset:2px}

.blog-follow{position:relative;z-index:10;max-width:720px;margin:0 auto 24px;padding:24px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--border);text-align:center}
.blog-follow p{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.blog-follow-icons{display:flex;align-items:center;justify-content:center;gap:16px}

.blog-related{position:relative;z-index:10;max-width:720px;margin:0 auto;padding:0 24px 60px}
.blog-related h2{font-family:'Playfair Display',serif;font-size:1.3rem;margin-bottom:16px}
.blog-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}

@media(max-width:640px){
  .blog-article h1{font-size:1.65rem}
  .blog-article{padding:32px 18px 6px}
  .blog-hero{padding:32px 18px 20px}
}