/* Blog — listagem (/blog/) e post (/blog/<slug>/). Reaproveita tokens e classes
   .official-* do site institucional; este arquivo só cobre o que é específico
   do blog (hero de listagem, cards, corpo do artigo). */

.blog-eyebrow{color:var(--accent);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex}

/* ===== listagem ===== */
.blog-index-hero{padding:120px 24px 56px;background:#fff}
.blog-index-hero .official-container{max-width:760px}
.blog-index-hero h1{font-family:Manrope,sans-serif;font-size:clamp(32px,4.5vw,52px);font-weight:800;letter-spacing:-.05em;line-height:1.1;margin:14px 0 16px;color:#0e0e0f}
.blog-index-hero p{font-size:18px;line-height:1.6;color:var(--muted);max-width:560px}

.blog-index-list{padding:8px 24px 120px;background:#fff}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:var(--radius);overflow:hidden;background:var(--gs-paper);border:1px solid var(--line);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-card-media{aspect-ratio:4/5;overflow:hidden;background:var(--gs-paper)}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.blog-card:hover .blog-card-media img{transform:scale(1.03)}
.blog-card-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px}
.blog-card-eyebrow{color:var(--accent);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.blog-card-body h2{font-family:Manrope,sans-serif;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:0;color:var(--gs-black)}
.blog-card-body p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}
.blog-card-date{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ===== post ===== */
.blog-post-head{max-width:760px;padding:100px 24px 28px;text-align:center;margin:0 auto}
.blog-post-head h1{font-family:Manrope,sans-serif;font-size:clamp(30px,4.2vw,46px);font-weight:800;letter-spacing:-.05em;line-height:1.15;margin:14px 0 14px;color:#0e0e0f}
.blog-post-meta{font-size:13.5px;color:var(--muted)}

.blog-post-cover{max-width:920px;margin:0 auto 48px;padding:0 24px}
.blog-post-cover img{width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:var(--shadow)}

.blog-post-body{max-width:700px;padding:0 24px 100px}
.blog-lede{font-size:19px;line-height:1.65;color:var(--ink);font-weight:500;margin:0 0 32px}
.blog-post-body h2{font-family:Manrope,sans-serif;font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--gs-black);margin:44px 0 16px}
.blog-post-body h2:first-of-type{margin-top:0}
.blog-post-body p{font-size:17px;line-height:1.75;color:var(--ink);margin:0 0 20px}

.blog-cta{margin-top:56px;padding:36px 32px;background:var(--gs-paper);border-radius:var(--radius);text-align:center}
.blog-cta p{font-size:19px;color:var(--gs-black);margin:0 0 18px}
.blog-cta .official-button{display:inline-flex}

@media(max-width:700px){
  .blog-index-hero{padding:72px 20px 40px}
  .blog-index-list{padding:0 20px 80px}
  .blog-post-head{padding:64px 20px 22px}
  .blog-post-cover{padding:0 20px;margin-bottom:32px}
  .blog-post-body{padding:0 20px 70px}
  .blog-lede{font-size:17px}
  .blog-post-body h2{font-size:21px;margin:36px 0 12px}
  .blog-post-body p{font-size:16px}
  .blog-cta{padding:28px 22px}
}