/* ============================================================
   Blog do Integrador PONTO — tipografia de artigo + listagem.
   Carrega junto com styles.css (reaproveita header/footer/tokens).
   ============================================================ */

/* fundo claro do conteúdo do blog */
.blogbody { background: var(--bg); }

/* ---------- Cabeçalho do blog / hero ---------- */
.blog-head { background: var(--navy-grad); color:#fff; position:relative; overflow:hidden; }
.blog-head .hero__glow { top:-160px; right:-120px; }
.blog-head__inner { position:relative; z-index:2; padding: 64px 0 56px; text-align:center; max-width:760px; margin:0 auto; }
.blog-head h1 { color:#fff; font-size: clamp(30px,4vw,46px); font-weight:800; letter-spacing:-.03em; }
.blog-head p { margin-top:14px; color: rgba(255,255,255,.82); font-size:17px; }

/* breadcrumb */
.crumb { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:20px; }
.crumb a { color:var(--brand); font-weight:600; }
.crumb span { opacity:.6; }

/* ---------- Grade de posts (índice) ---------- */
.post-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.post-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); padding:26px; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.post-card__tag { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin-bottom:12px; }
.post-card h2 { font-size:19px; font-weight:700; line-height:1.25; }
.post-card p { margin-top:10px; font-size:14.5px; color:var(--muted); line-height:1.55; flex:1; }
.post-card__more { margin-top:16px; font-size:14px; font-weight:700; color:var(--brand); display:inline-flex; align-items:center; gap:6px; }

/* ---------- Artigo ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article__head { margin-bottom: 30px; }
.article__kicker { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); }
.article h1 { font-size: clamp(28px,3.6vw,40px); font-weight:800; line-height:1.12; margin-top:12px; letter-spacing:-.025em; }
.article__meta { margin-top:16px; font-size:13.5px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.article__body { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.article__body h2 { font-family:'Sora','Inter',sans-serif; font-size: clamp(22px,2.6vw,28px); font-weight:700; color:var(--ink); letter-spacing:-.02em; margin: 40px 0 14px; }
.article__body p { margin: 0 0 18px; }
.article__body a { color: var(--brand); font-weight:600; text-decoration: underline; text-underline-offset: 2px; }
.article__body ul { margin: 0 0 20px; padding: 0; list-style: none; display:flex; flex-direction:column; gap:11px; }
.article__body ul li { position:relative; padding-left:28px; }
.article__body ul li::before { content:""; position:absolute; left:2px; top:9px; width:8px; height:8px; border-radius:3px; background: var(--brand); }
.article__body strong { color: var(--ink); }

/* box de destaque (takeaways / faq no artigo) */
.article-faq { margin-top: 40px; border-top:1px solid var(--line); padding-top: 30px; }
.article-faq h2 { font-family:'Sora'; font-size:24px; font-weight:700; margin-bottom:16px; }
.article-faq details { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:2px 20px; margin-bottom:10px; }
.article-faq summary { list-style:none; cursor:pointer; padding:16px 0; font-weight:600; font-size:16px; }
.article-faq summary::-webkit-details-marker { display:none; }
.article-faq p { padding:0 0 18px; color:var(--muted); font-size:15px; line-height:1.65; }

/* CTA do artigo */
.article-cta { margin-top: 44px; background: var(--navy-grad); color:#fff; border-radius: var(--radius-lg);
  padding: 40px; position:relative; overflow:hidden; }
.article-cta h2 { color:#fff; font-family:'Sora'; font-size: clamp(22px,2.8vw,30px); font-weight:700; }
.article-cta p { color: rgba(255,255,255,.84); margin:12px 0 22px; font-size:16px; max-width:560px; }
.article-cta .hero__glow { top:-120px; left:-80px; }
.article-cta__actions { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:12px; }

/* posts relacionados */
.related { margin-top: 56px; }
.related h2 { font-family:'Sora'; font-size:22px; font-weight:700; margin-bottom:18px; }
.related__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.related a { display:block; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.35; transition: border-color .15s, transform .15s; }
.related a:hover { border-color: var(--brand); transform: translateY(-2px); }

@media (max-width: 900px) {
  .post-grid { grid-template-columns: 1fr; }
  .related__grid { grid-template-columns: 1fr; }
  .article-cta { padding: 30px 22px; }
}