/* ════════════════════════════════════════════════════════════════════════
   POOOL Blog — Layer 4: blog list page ONLY
   Head + featured lead + card grid rhythm. The cards themselves (.bpost)
   and the category chips (.fchip) live in components.css — never restyled
   here, this file only positions them. Marketing chrome (centered .wrap).
   ════════════════════════════════════════════════════════════════════════ */

.blog-main { padding: 44px 0 96px; }

.blog-head { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.blog-head h1 { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--fg-heading-2); margin: 16px 0 10px; }
.blog-head p { font-size: 16.5px; color: var(--fg-secondary); line-height: 1.6; margin: 0 auto; max-width: 560px; }

/* Featured lead sits alone above the grid */
.blog-lead { max-width: 1020px; margin: 26px auto 24px; }
.blog-grid { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.blog-foot { max-width: 1020px; margin: 0 auto; }
.blog-sub { max-width: 1020px; margin: 40px auto 0; }

/* Result line under the chips (mirrors the marketplace's .results idiom) */
.blog-n { text-align: center; font-size: 13.5px; color: var(--fg-muted); margin: 0 0 18px; }

@media (max-width: 980px) {
  .blog-head h1 { font-size: 34px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}