/* ============================================================
   JKM — blog refinements + mobile rules
   (loaded after jkm-sidebar.css on all blog-related pages)

   0) Meta line: wrap alignment fix (all widths)
   1) Sidebar stacking (<=1024px)
   2) Blog listing cards on phones (<=767px)
   ============================================================ */

/* ---------- 0. META LINE ALIGNMENT (all widths) ----------
   The theme lays the meta groups out as inline-block with a 22px right
   margin. When a group's text wraps, the continuation line aligns under
   that group's start — which is the ragged indent on lines 2/3.

   Switching the container to flex-wrap and making each group nowrap means:
   groups stay whole and only break BETWEEN groups, and every wrapped row
   starts hard against the container's left edge. */
body.jkm-style .blog-single-meta,
body.jkm-style .mk-blog-meta-wrapper{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:baseline !important;
  column-gap:22px !important;
  row-gap:4px !important;
  text-indent:0 !important;
  padding-left:0 !important;
}
body.jkm-style .blog-single-meta > .mk-blog-author,
body.jkm-style .blog-single-meta > .mk-post-date,
body.jkm-style .blog-single-meta > .mk-post-cat,
body.jkm-style .mk-blog-meta-wrapper > .mk-blog-author,
body.jkm-style .mk-blog-meta-wrapper > .mk-categories,
body.jkm-style .mk-blog-meta-wrapper > span,
body.jkm-style .mk-blog-meta-wrapper > time{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:5px !important;
  margin-right:0 !important;
  margin-left:0 !important;
  padding-left:0 !important;
  text-indent:0 !important;
  white-space:nowrap !important;   /* keep each group on one line */
}
/* the hidden schema block must stay hidden */
body.jkm-style .mk-post-meta-structured-data{ display:none !important; }

/* ---------- 1. SIDEBAR (<=1024px) ----------
   The placement JS already moves #jkm-sidebar AFTER .jkm-content-col in
   the DOM at this width, so posts come first. These rules stack them. */
@media (max-width:1024px){

  body .theme-content.jkm-has-sidebar{
    display:block !important;
    gap:0 !important;
  }
  body .theme-content.jkm-has-sidebar > .jkm-content-col{
    width:100% !important;
    float:none !important;
  }
  body #jkm-sidebar{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
    order:0 !important;
    margin:44px 0 0 !important;
    float:none !important;
  }

  body #jkm-sidebar section.jkm-side-card{
    padding:22px 20px 26px !important;
    margin:0 0 26px !important;
    border-radius:24px !important;
  }
  body #jkm-sidebar section.jkm-side-guide{ padding:22px 20px 26px !important; }
  body #jkm-sidebar section.jkm-side-topics{ margin:0 0 30px !important; }

  body #jkm-sidebar .jkm-side-mosaic{
    max-height:52vh !important;
    object-position:center top !important;
  }
  body #jkm-sidebar .jkm-side-guide-cover{ max-height:56vh !important; object-fit:contain !important; }
  body #jkm-sidebar video.jkm-side-media{ max-height:60vh !important; }
}

@media (max-width:600px){
  body #jkm-sidebar h2.jkm-side-wordmark{ font-size:24px !important; }
  body #jkm-sidebar .jkm-side-guide h3.jkm-side-guide-title{ font-size:21px !important; }
  body #jkm-sidebar a.jkm-side-topic{ font-size:16px !important; padding:15px 12px !important; }
}

/* ============================================================
   2. BLOG LISTING CARDS ON PHONES (<=767px)

   Card becomes one column and follows the single-post reading order:
     image -> TITLE -> meta (by / in / posted) -> engagement icons -> excerpt -> button

   The icons are a sibling of .mk-blog-meta in the theme markup, so a small
   script (jkm-blog-mobile.js) moves them inside .mk-blog-meta on phones and
   puts them back on wider screens. These rules order the result.
   ============================================================ */
@media (max-width:767px){

  body.jkm-style article.mk-blog-modern-item,
  body.jkm-style article.mk-blog-classic-item,
  body.jkm-style article.mk-isotop-item{
    display:flex !important;
    flex-direction:column !important;
    padding:20px 20px 24px !important;
    border-radius:24px !important;
    margin-bottom:34px !important;
  }

  body.jkm-style article.mk-blog-modern-item .featured-image,
  body.jkm-style article.mk-isotop-item .featured-image{
    order:1 !important;
    margin-bottom:20px !important;
  }

  body.jkm-style article.mk-blog-modern-item .mk-blog-meta,
  body.jkm-style article.mk-isotop-item .mk-blog-meta{
    order:2 !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    padding-left:0 !important;
    float:none !important;
    display:flex !important;
    flex-direction:column !important;
  }

  /* reading order inside the card body */
  body.jkm-style article .mk-blog-meta > .the-title{ order:1 !important; margin:0 0 14px !important; }
  body.jkm-style article .mk-blog-meta > .mk-blog-meta-wrapper{ order:2 !important; margin:0 0 14px !important; }
  body.jkm-style article .mk-blog-meta > .blog-modern-social-section{ order:3 !important; }
  body.jkm-style article .mk-blog-meta > .the-excerpt{ order:4 !important; }
  body.jkm-style article .mk-blog-meta > .mk-button-container{ order:5 !important; }
  body.jkm-style article .mk-blog-meta > .clearboth{ display:none !important; }

  /* engagement icons: one horizontal row under the meta line.
     No hairline above it — the separation comes from the 37px gap below. */
  body.jkm-style article .blog-modern-social-section{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border-top:none !important;
    border:none !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:30px !important;
    min-height:0 !important;
    height:auto !important;
  }
  body.jkm-style article .blog-modern-social-section > *{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    float:none !important;
    height:auto !important;
    min-height:0 !important;
    line-height:1 !important;
  }
  body.jkm-style article .blog-modern-social-section a,
  body.jkm-style article .blog-modern-social-section span{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    line-height:1 !important;
  }
  body.jkm-style article .blog-modern-social-section svg{ margin:0 !important; }

  /* 37px of air between the icons row and the excerpt */
  body.jkm-style article .mk-blog-meta > .the-excerpt{
    padding-top:37px !important;
    margin:0 0 24px !important;
  }

  body.jkm-style article .clearboth{ display:none !important; }

  body.jkm-style article .the-title,
  body.jkm-style article .the-title a{
    font-size:24px !important;
    line-height:1.16 !important;
  }
  body.jkm-style article .the-excerpt,
  body.jkm-style article .the-excerpt p{ font-size:16px !important; }

  /* ---- Meta line 3px smaller on phones (10.5 -> 7.5) ----
     Applies on the listing, archives and single posts. */
  body.jkm-style .blog-single-meta,
  body.jkm-style .blog-single-meta a,
  body.jkm-style .blog-single-meta span,
  body.jkm-style .blog-single-meta time,
  body.jkm-style .blog-single-meta div,
  body.jkm-style .mk-blog-meta-wrapper,
  body.jkm-style .mk-blog-meta-wrapper a,
  body.jkm-style .mk-blog-meta-wrapper span,
  body.jkm-style .mk-blog-meta-wrapper time,
  body.jkm-style .mk-blog-meta-wrapper div{
    font-size:7.5px !important;
    letter-spacing:0.12em !important;
  }
  /* tighter gaps so all three groups try to fit on one line */
  body.jkm-style .blog-single-meta,
  body.jkm-style .mk-blog-meta-wrapper{
    column-gap:14px !important;
    row-gap:3px !important;
  }
}