/* ─── pages/blog.css ─ blog index + post extras. Post head and body use the
   shared document styles in site.css ("Document pages"). ── */

/* ── Index cards ───────────────────────────────────────────────────────────
   Same vocabulary as the design's .step / .rec / .pbox cards: elevated panel,
   dashed brand border, corner marks, a small brand label on top, and a footer
   split off by a dashed rule. */
.post-feature, .post-card {
  position: relative; background: var(--bg-elevated); border: 1px dashed var(--brand-line-strong); color: inherit;
  transition: border-color 60ms steps(1);
}
.post-feature:hover, .post-card:hover { border-color: var(--brand); color: inherit; }
.post-kicker { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font: 700 12px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--brand); }
.post-kicker time { color: var(--hint); }
.post-desc { margin: 0; font: 400 14px/22px var(--font-mono); color: var(--fg-muted); }
.post-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--divider-dim);
  font: 400 12px/1 var(--font-mono); color: var(--fg-secondary);
}
.post-read { font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--brand); }
.post-feature:hover .post-read, .post-card:hover .post-read { color: var(--fg-primary); }

/* Featured (latest) post: cover left, text right */
.post-feature { display: grid; grid-template-columns: 1.1fr .9fr; }
.post-feature-cover { display: block; overflow: hidden; border-right: 1px dashed var(--brand-line-strong); }
.post-feature-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 32px 28px 28px; }
.post-feature-body .post-foot { margin-top: 8px; }
.post-feature-title { margin: 0; font: 800 30px/1.1 var(--font-mono); letter-spacing: -.4px; color: var(--fg-primary); text-wrap: pretty; }
.post-feature:hover .post-feature-title { color: var(--brand); }

/* Grid cards */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.post-card { display: flex; flex-direction: column; }
.post-card-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px dashed var(--brand-line-strong); }
.post-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 22px 20px 20px; }
.post-card-title { margin: 0; font: 700 16px/1.35 var(--font-mono); letter-spacing: .2px; color: var(--fg-primary); text-wrap: pretty; }
.post-card:hover .post-card-title { color: var(--brand); }

/* ── Index: pager ──────────────────────────────────────────────────────────── */
.blog-pager { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 40px; }
.blog-pager-count { font: 400 12px/1 var(--font-mono); color: var(--fg-muted); }
.btn-lg.is-disabled { opacity: .35; pointer-events: none; }

/* ── Post ──────────────────────────────────────────────────────────────────── */
.doc-crumb { color: inherit; }
.doc-crumb:hover { color: var(--fg-primary); }
.prose .post-cover { margin: 8px 0 28px; }
.post-back { margin: 0 0 24px; }
.blog-prose { padding-bottom: 40px; }

/* FAQ accordion from Storyblok "faq_item" bloks (_data/posts.js). It's the
   shared .faq component; these undo the .prose element styles that would
   otherwise restyle its heading, paragraphs and lists. */
.blog-faq { margin: 4px 0 24px; }
.prose .blog-faq .faq-h { margin: 0; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.prose .blog-faq .faq-a p { margin: 0; }
.prose .blog-faq .faq-a :is(ul, ol) { margin: 0 0 22px; padding-left: 46px; font-size: 13px; line-height: 22px; color: var(--fg-muted); }
.prose .blog-faq .faq-a :is(ul, ol) + p { margin-top: -8px; }

@media (max-width:1040px) {
  .post-feature { grid-template-columns: 1fr; }
  .post-feature-cover { border-right: none; border-bottom: 1px dashed var(--brand-line-strong); }
  .post-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px) {
  .prose .blog-faq .faq-a p { padding-left: 2px; }
  .prose .blog-faq .faq-a :is(ul, ol) { padding-left: 2px; }
  .post-feature-body { padding: 24px 20px; }
  .post-feature-title { font-size: 22px; }
  .post-grid { grid-template-columns: 1fr; }
}