/* ═══════════ BLOG ═══════════ */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; }
.post-card-img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-bottom: 1px solid var(--line); }
.post-card-body { display: flex; flex-direction: column; gap: 12px; padding: 28px; flex: 1; }
.post-card-date { font-size: 13px; color: var(--text-3); }
.post-card h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.15; }
.post-card p { color: var(--text-2); font-size: 15px; }
.post-card .link-arrow { margin-top: auto; padding-top: 8px; }
.posts-empty { color: var(--text-2); font-size: 17px; }

.article { max-width: 760px; margin: 0 auto; }
.article-meta { color: var(--text-3); font-size: 14px; margin-top: 20px; }
.article-cover { width: 100%; border-radius: 16px; border: 1px solid var(--line); margin-bottom: 56px; }
.article-body { color: var(--text-2); font-size: 17px; line-height: 1.8; }
.article-body > * + * { margin-top: 1.2em; }
.article-body h2, .article-body h3, .article-body h4 { color: var(--text); letter-spacing: -0.02em; line-height: 1.2; margin-top: 2em; }
.article-body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.article-body h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: 0.4em; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.article-body blockquote { border-left: 1px solid var(--accent); padding-left: 24px; color: var(--text); font-style: italic; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.article-body pre { overflow-x: auto; padding: 18px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.article-back { display: inline-block; margin-top: 64px; }

@media (max-width: 960px) {
  .posts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .posts { grid-template-columns: 1fr; }
  .post-card-body { padding: 22px; }
  .article-body { font-size: 16px; }
}