/* =========================================================
   FLOWBIRD — BLOG POST (uses global tokens + gentle scope)
   Scope anchor: .body-container--blog-post / .focus_blog_post-*
   ========================================================= */

/* --- Container alignment (match .fb-container) --- */
.body-container--blog-post .content-wrapper{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* --- Header / title block --- */
.focus_blog_post-header_container{
  position: relative;
  padding: clamp(18px,4vw,28px) 0 0;
  background: #fff;
}

.focus_blog_post-header_inner{
  padding-bottom: clamp(8px,1.6vw,12px);
}

.focus_module_page_title_container{ margin: 0 0 6px; }

.focus_blog_post-title{
  margin: 0;
  color: var(--ink);
  /* brand h1 feel */
  font: 800 clamp(28px,4.8vw,42px)/1.14 ui-sans-serif,system-ui;
  letter-spacing: -.01em;
  max-width: min(860px,100%);
}

/* Meta row (date + author) */
.focus_grid-date_bar{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 6px;
  color: var(--muted);
  font: 600 13px/1.2 ui-sans-serif,system-ui;
}

.focus_grid-author{ display: inline-flex; align-items: center; gap: 8px; }
.focus_grid-author-image{
  width: 34px; height: 34px; object-fit: cover;
  border-radius: var(--r-img); border: 1px solid var(--border);
}
.focus_grid-author-name{
  color: var(--ink); text-decoration: none; font-weight: 800;
}
.focus_grid-author-name:hover{ text-decoration: underline; text-underline-offset: 2px; }

/* Featured image (works whether it renders in header or inside article) */
.focus_blog_post-featured_image{
  display: block;
  width: 100%; height: auto;
  max-width: var(--container);
  margin: clamp(8px,1.6vw,12px) auto 0;
  border-radius: var(--r-img);
  border: 1px solid var(--border);
  box-shadow: var(--sh1);
  object-fit: cover;
}

/* --- Body layout: handle optional sidebar ------------------------------- */
/* The template adds .ms_vis when sidebar is visible and ss = visible_left/right */

.blog-post-container{ margin: clamp(16px,2.4vw,22px) 0 0; }

.blog-post-container.ms_vis.visible_right{
  display: grid; gap: 24px;
  grid-template-columns: minmax(0,1fr) 320px;
  align-items: start;
}
.blog-post-container.ms_vis.visible_left{
  display: grid; gap: 24px;
  grid-template-columns: 320px minmax(0,1fr);
  align-items: start;
}
@media (max-width: 992px){
  .blog-post-container.ms_vis.visible_right,
  .blog-post-container.ms_vis.visible_left{
    grid-template-columns: 1fr;
  }
}

/* Article card shell (subtle elevation) */
.blog-post{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh1);
  padding: clamp(14px,2vw,18px);
}

/* --- Article typography (brand type rhythm) ----------------------------- */
.blog-post__body{
  color: var(--copy);
  font: 400 16px/1.75 ui-sans-serif,system-ui;
}

/* Headings inside the post body */
.blog-post__body :where(h2){
  margin: 18px 0 8px; color: var(--ink);
  font: 800 clamp(22px,3.2vw,28px)/1.22 ui-sans-serif,system-ui;
}
.blog-post__body :where(h3){
  margin: 16px 0 6px; color: var(--ink);
  font: 800 18px/1.25 ui-sans-serif,system-ui;
}
.blog-post__body :where(h4){
  margin: 14px 0 6px; color: var(--ink);
  font: 800 16px/1.25 ui-sans-serif,system-ui;
}

/* Paragraphs, lists, images */
.blog-post__body p{ margin: 10px 0; }
.blog-post__body ul,
.blog-post__body ol{ margin: 10px 0 12px 22px; }
.blog-post__body li{ margin: 6px 0; }

.blog-post__body img{
  display: block; width: 100%; height: auto;
  border-radius: var(--r-img);
  border: 1px solid var(--border);
  box-shadow: var(--sh1);
  margin: 12px auto;
}

/* Blockquote */
.blog-post__body blockquote{
  margin: 14px 0; padding: 10px 14px;
  border-left: 4px solid var(--navy);
  background: #FAFBFF;
  border-radius: 8px;
  color: var(--copy);
}

/* Code */
.blog-post__body code{
  background: #F3F6FF; border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 6px; font-size: .95em;
}

/* --- Share row ----------------------------------------------------------- */
.blog-post__share{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.blog-post__share h3{
  margin: 0 0 8px; color: var(--muted);
  font: 700 12.5px/1.2 ui-sans-serif,system-ui; text-transform: none;
}

/* --- Tags (chips) -------------------------------------------------------- */
.blog-post__tags{ margin-top: 10px; }
.blog-post__tags a{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin: 6px 6px 0 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--navy);
  text-decoration: none; font: 700 12px/1 ui-sans-serif,system-ui;
}
.blog-post__tags a:hover{
  border-color: var(--border-strong); background: #FBFDFF;
}

/* --- Author info block (from partial) ------------------------------------ */
.focus_blog_author{  /* safety catch-all if the partial outputs this root */
  margin: 18px 0 0;
  background:#fff; border:1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--sh1); padding: 14px;
}
.focus_blog_author .author{
  display: flex; gap: 12px; align-items: center;
}
.focus_blog_author .author img{
  width: 56px; height: 56px; border-radius: var(--r-img);
  border: 1px solid var(--border); object-fit: cover;
}
.focus_blog_author .author .name{ font-weight: 800; color: var(--ink); }

/* --- Related posts grid (generic, works with your JS or fallback UL) ----- */
.blog-post__related-posts{ margin-top: 18px; }
.blog-post__related-posts :is(ul,ol,div){
  display: grid; gap: 16px;
  grid-template-columns: repeat(3,minmax(0,1fr));
  padding: 0; margin: 8px 0 0; list-style: none;
}
@media (max-width:1024px){
  .blog-post__related-posts :is(ul,ol,div){ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:680px){
  .blog-post__related-posts :is(ul,ol,div){ grid-template-columns: 1fr; }
}
/* card feel for each related item */
.blog-post__related-posts :is(li,article,div){
  background:#fff; border:1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--sh1); overflow: hidden;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.blog-post__related-posts :is(li,article,div):hover{
  background: var(--sky); border-color: var(--border-strong); transform: translateY(-1px);
}
.blog-post__related-posts img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

/* --- Pagination ----------------------------------------------------------- */
.blog-post__pagination{
  margin: 18px 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 14px;
}
.blog-post__pagination a{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padd
/* Kill post-end cruft on blog posts only */
.body-container--blog-post .blog-post__share,
.body-container--blog-post .blog-post__tags,
.body-container--blog-post .blog-post__related-posts,
.body-container--blog-post .blog-comments-container,
.body-container--blog-post .blog-post__pagination{
  display:none !important;
}

/* Hide the marketplace theme promo footer elements that appear on that page */
footer img[alt="focus-logo"],
footer a[href*="stuff-n-matters.com"]{
  display:none !important;
}