/* Momo Jord — editorial blog (home.php / archive.php / single.php).
   Port of the Bloggen.html prototype, scoped .mj-scope. .ed-hero + .ed-hero-meta
   come from the shared editorial CSS; this adds the featured post, category
   chips, the card grid, the single-article hero + prose, related posts and
   pagination. Replaces the old CSS-only skin of the default theme markup —
   the bespoke templates now own the blog. */

.mj-scope .blog-hero{ min-height:480px; }
.mj-scope .blog-body{ padding:0 0 16px; }

/* ---------- Featured post ---------- */
.mj-scope .featured-post{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; padding:80px 0; border-bottom:1px solid var(--hairline); }
.mj-scope .featured-post .art{ aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--paper-2); }
.mj-scope .featured-post .art img{ width:100%; height:100%; object-fit:cover; }
.mj-scope .featured-post .lbl{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); }
.mj-scope .featured-post h2{ margin:14px 0 18px; font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(36px,4.4vw,64px); line-height:1.02; letter-spacing:-.025em; color:var(--ink); }
.mj-scope .featured-post h2 em{ font-style:italic; color:var(--brand); }
.mj-scope .featured-post .ex{ color:var(--ink-soft); font-size:17px; line-height:1.6; max-width:52ch; margin-bottom:22px; }
.mj-scope .featured-post .meta{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-mute); display:flex; gap:16px; align-items:center; }
.mj-scope .featured-post .meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--ink-mute); }
.mj-scope .featured-post .btn{ margin-top:24px; }

/* ---------- Category chips ---------- */
.mj-scope .blog-filter{ display:flex; flex-wrap:wrap; gap:8px; padding:24px 0; border-bottom:1px solid var(--hairline); margin-bottom:56px; }
.mj-scope .filter-chip{ padding:8px 16px; border:1px solid var(--hairline-strong); border-radius:999px; font-size:13px; cursor:pointer; background:var(--card); color:var(--ink); transition:all .15s ease; }
.mj-scope .filter-chip:hover{ border-color:var(--ink-soft); }
.mj-scope .filter-chip.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Post grid ---------- */
.mj-scope .posts-section{ padding:56px 0 96px; }
.mj-scope .posts-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; gap:24px; }
.mj-scope .posts-head h2{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(32px,3.6vw,48px); letter-spacing:-.02em; line-height:1.05; color:var(--ink); }
.mj-scope .posts-head h2 em{ font-style:italic; color:var(--brand); }
.mj-scope .posts-head .rc{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; }
.mj-scope .posts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.mj-scope .post-card{ display:flex; flex-direction:column; background:var(--card); border-radius:10px; overflow:hidden; border:1px solid var(--hairline); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; color:var(--ink); }
.mj-scope .post-card:hover{ transform:translateY(-3px); border-color:var(--hairline-strong); box-shadow:0 12px 32px rgba(0,0,0,.06); }
.mj-scope .post-card .art{ aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; }
.mj-scope .post-card .art img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.mj-scope .post-card:hover .art img{ transform:scale(1.04); }
.mj-scope .post-card .body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.mj-scope .post-card .cat{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); }
.mj-scope .post-card h3{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:22px; letter-spacing:-.005em; line-height:1.2; color:var(--ink); }
.mj-scope .post-card .ex{ font-size:14px; color:var(--ink-soft); line-height:1.5; flex:1; }
.mj-scope .post-card .meta{ margin-top:10px; display:flex; gap:12px; align-items:center; font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; color:var(--ink-mute); padding-top:14px; border-top:1px solid var(--hairline); }
.mj-scope .post-card .meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-mute); }
.mj-scope .blog-empty{ color:var(--ink-soft); font-size:17px; padding:40px 0 80px; }

/* ---- "Börja här" CTA panel (fills the prototype's series slot with a real
   link to the flagship guide, not a fabricated content series) ---- */
.mj-scope .series-cta{ margin:8px 0 88px; padding:56px; background:var(--ink); color:var(--paper); border-radius:12px; display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center; }
.mj-scope .series-cta .body .eyebrow{ display:block; color:var(--gold); margin-bottom:14px; }
.mj-scope .series-cta h3{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(28px,3vw,42px); line-height:1.05; letter-spacing:-.02em; margin:0 0 14px; color:var(--paper); }
.mj-scope .series-cta h3 em{ font-style:italic; color:var(--gold); }
.mj-scope .series-cta p{ color:color-mix(in oklab,var(--paper) 80%,transparent); margin:0 0 24px; font-size:16px; line-height:1.6; max-width:46ch; }
.mj-scope .series-cta .art{ aspect-ratio:4/3; border-radius:8px; overflow:hidden; }
.mj-scope .series-cta .art img{ width:100%; height:100%; object-fit:cover; }
.mj-scope .btn-gold{ background:var(--gold); color:var(--ink); border:0; }
.mj-scope .btn-gold:hover{ background:color-mix(in oklab,var(--gold) 88%, #000); color:var(--ink); }
@media (max-width:900px){ .mj-scope .series-cta{ grid-template-columns:1fr; padding:36px; gap:28px; } }

/* Kit (ConvertKit) inline form, styled to the editorial .subscribe pill */
.mj-scope .newsletter-band .subscribe{ max-width:460px; }
.mj-scope .newsletter-band .subscribe .formkit-input{ flex:1; min-width:0; background:transparent; border:0; outline:0; padding:10px 16px; font:inherit; color:var(--ink); }
.mj-scope .newsletter-band .subscribe .formkit-input::placeholder{ color:var(--ink-mute); }
.mj-scope .newsletter-band .subscribe .formkit-submit{ flex:none; white-space:nowrap; }
.mj-scope .newsletter-band .subscribe .formkit-submit > span{ display:block; }
.mj-scope .newsletter-band .formkit-alert{ list-style:none; margin:12px 0 0; padding:0; font-size:13px; color:var(--ink-soft); }

/* ---------- Pagination ---------- */
.mj-scope .mj-pagination,
.mj-scope .blog-body .navigation.pagination{ padding:0 0 88px; }
.mj-scope .navigation.pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; }
.mj-scope .navigation.pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border:1px solid var(--hairline-strong); border-radius:999px; font-family:var(--ff-mono); font-size:13px; color:var(--ink); background:var(--card); }
.mj-scope .navigation.pagination .page-numbers:hover{ border-color:var(--ink-soft); }
.mj-scope .navigation.pagination .page-numbers.current{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.mj-scope .navigation.pagination .page-numbers.dots{ border:0; background:transparent; }

/* ---------- Single article ---------- */
.mj-scope .post-hero{ min-height:600px; }
.mj-scope .post-hero .post-hero-inner{ max-width:880px; }
.mj-scope .post-hero h1{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(40px,6vw,84px); line-height:0.96; letter-spacing:-.028em; margin:8px 0 0; text-shadow:0 2px 24px rgba(0,0,0,.3); }
.mj-scope .post-hero .post-meta{ margin-top:18px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; color:color-mix(in oklab,var(--paper) 80%,transparent); }
.mj-scope .post-hero .post-meta .dot{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; }

.mj-scope .post-body{ padding:64px 0 24px; }
.mj-scope .post-prose{ max-width:68ch; margin:0 auto; font-size:18px; line-height:1.75; color:var(--ink); }
.mj-scope .post-prose > *{ max-width:100%; }
.mj-scope .post-prose p{ margin:0 0 1.3em; }
.mj-scope .post-prose h2{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(28px,3.2vw,42px); letter-spacing:-.02em; line-height:1.05; margin:1.9em 0 .5em; }
.mj-scope .post-prose h3{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(22px,2.4vw,30px); letter-spacing:-.01em; margin:1.4em 0 .4em; }
.mj-scope .post-prose h4{ font-family:var(--ff-sans); font-weight:600; font-size:18px; margin:1.4em 0 .4em; }
.mj-scope .post-prose a{ color:var(--brand); border-bottom:1px solid color-mix(in oklab,var(--brand) 40%,transparent); }
.mj-scope .post-prose a:hover{ border-bottom-color:var(--brand); }
.mj-scope .post-prose img{ border-radius:10px; height:auto; margin:1.2em 0; }
.mj-scope .post-prose figure{ margin:1.6em 0; }
.mj-scope .post-prose figcaption{ font-size:13px; color:var(--ink-mute); text-align:center; margin-top:8px; }
.mj-scope .post-prose ul,
.mj-scope .post-prose ol{ margin:0 0 1.3em; padding-left:1.4em; }
.mj-scope .post-prose li{ margin:0 0 .5em; }
.mj-scope .post-prose blockquote{ margin:1.6em 0; padding:6px 0 6px 24px; border-left:3px solid var(--brand); font-family:var(--ff-display); font-style:italic; font-size:24px; line-height:1.4; color:var(--ink); }
.mj-scope .post-prose iframe{ width:100%; aspect-ratio:16/9; height:auto; border-radius:10px; margin:1.2em 0; }

.mj-scope .post-tags{ max-width:760px; margin:36px auto 0; display:flex; flex-wrap:wrap; gap:8px; }
.mj-scope .post-tag{ font-family:var(--ff-mono); font-size:12px; color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--hairline); border-radius:999px; padding:5px 12px; }
.mj-scope .post-tag:hover{ border-color:var(--ink-soft); color:var(--ink); }
.mj-scope .post-foot{ max-width:760px; margin:40px auto 0; padding-top:28px; border-top:1px solid var(--hairline); }

.mj-scope .related-posts{ border-top:1px solid var(--hairline); padding-top:56px; margin-top:24px; }
.mj-scope .related-posts .posts-head{ margin-bottom:28px; }

@media (max-width:980px){
  .mj-scope .featured-post{ grid-template-columns:1fr; gap:28px; padding:52px 0; }
  .mj-scope .posts-grid{ grid-template-columns:repeat(2,1fr); gap:24px; }
  .mj-scope .post-body{ padding:48px 0 16px; }
  .mj-scope .post-prose{ font-size:17px; }
}
@media (max-width:600px){
  .mj-scope .posts-grid{ grid-template-columns:1fr; }
  .mj-scope .blog-hero,
  .mj-scope .post-hero{ min-height:400px; }
}