/* Blog — Sam · Atomosphere (gerado por scripts/build-site.mjs) */

.blog-list { padding-top: 0; border-top: none; }
.blog-list .wrap { display: grid; gap: 20px; }
.blog-empty { color: var(--text-tertiary); font-family: var(--font-mono); }

.blog-card {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 32px;
  transition: border-color 0.15s ease;
}
.blog-card:hover { border-color: var(--accent); }
.blog-card h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 8px 0 10px; }
.blog-card p { color: var(--text-secondary); font-size: 0.96rem; }

.blog-meta { font-family: var(--font-mono); font-size: 13px; color: var(--text-tertiary); }

.blog-article { padding: 140px 0 100px; }
.blog-article .wrap { max-width: 680px; }
.blog-back { font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); display: inline-block; margin-bottom: 24px; }
.blog-back:hover { color: var(--accent); }
.blog-article h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 10px 0 20px; }
.blog-draft-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 12px; color: #F87171;
  border: 1px solid #F87171; border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
}
.blog-tags { display: flex; gap: 8px; margin-bottom: 28px; }
.blog-tag {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.3);
  border-radius: 999px; padding: 3px 12px;
}

.blog-content { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.75; }
.blog-content h2 { font-family: var(--font-display); color: var(--text-primary); font-size: 1.4rem; margin: 40px 0 16px; }
.blog-content h3 { font-family: var(--font-display); color: var(--text-primary); font-size: 1.15rem; margin: 32px 0 12px; }
.blog-content p { margin-bottom: 18px; }
.blog-content ul, .blog-content ol { margin: 0 0 18px 24px; }
.blog-content li { margin-bottom: 8px; }
.blog-content a { color: var(--accent); text-decoration: underline; }
.blog-content strong { color: var(--text-primary); }
.blog-content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-elevated); padding: 2px 6px; border-radius: 4px; }
.blog-content pre { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 20px; overflow-x: auto; margin-bottom: 18px; }
.blog-content pre code { background: none; padding: 0; }