/* Ordus.help — /blog/ (§8.1: X/Twitter-style short-post feed). */

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }

/* ── BREADCRUMB ── */
.crumb { display: flex; align-items: center; gap: 9px; padding: 1.5rem 0 0; font-size: 12px; font-weight: 300; color: var(--ink-muted); flex-wrap: wrap; }
.crumb a { text-decoration: none; color: var(--ink-muted); transition: color var(--trans); }
.crumb a:hover { color: var(--gold); }
.crumb .sep { color: var(--ink-faint); font-size: 9px; }
.crumb .here { color: var(--ink); }

.category-hero { padding: 2.5rem 0 2rem; }
.category-kicker { font-size: 10px; font-weight: 300; letter-spacing: 0.4em; color: var(--gold); text-transform: uppercase; margin-bottom: 0.75rem; }
.category-title { font-family: 'Montserrat', sans-serif; font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--black); margin-bottom: 0.75rem; }
.category-desc { font-size: 15px; font-weight: 300; color: var(--ink-muted); max-width: 640px; line-height: 1.8; }

.blog-feed { max-width: 640px; margin: 0 auto; padding: 1rem 0 3rem; display: flex; flex-direction: column; gap: 1.25rem; }

.post-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; background: var(--bg); }

.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 0.9rem; }
.post-author-link { display: block; text-decoration: none; }
.post-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-soft); border: 1.5px solid var(--border); }
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-avatar-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 16px; }
.post-head-meta { display: flex; flex-direction: column; gap: 1px; }
.post-author-name { font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--black); text-decoration: none; }
a.post-author-name:hover { color: var(--gold); }
.post-time { font-size: 11.5px; color: var(--ink-faint); }

.post-title { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 0.5rem; }
.post-content { font-size: 14px; font-weight: 300; color: var(--ink); line-height: 1.7; margin-bottom: 0.75rem; }
.post-image { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 0.75rem; background: var(--bg-soft); }
.post-image img { width: 100%; height: auto; display: block; }
.post-tag { display: flex; }

.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-bottom: 4rem; }
.blog-page-info { font-size: 12px; color: var(--ink-muted); }

@media (max-width: 650px) {
  .wrap { padding: 0 1.25rem; }
  .post-card { padding: 1rem 1.1rem; }
}