/* =====================================================================
   JMS MEDIA • 06 — BLOG  (Articles index · archives · search · single post)
   ---------------------------------------------------------------------
   Net-new for Workstream B — the tech-design blog aimed at LinkedIn.
   Loaded ONLY on blog contexts (posts index, single post, archive,
   search) via a conditional enqueue in inc/blog.php, so it never touches
   the marketing pages or their critical path.

   Built on the SAME design system as the rest of the site — tokens from
   01-tokens.css, the gradient PANEL look from 03-components, the yellow
   tight-heading badge, the .jpp-cta panel, TYPE 1 inline links (05-chrome
   already styles .wp-block-post-content links gold for us).

   Sections:
     1) Shared blog lane + index/archive header
     2) Archive grid + post cards (panel system)
     3) Pagination
     4) Single post — head (chip · title · meta) + featured image
     5) Single post — PROSE body (.jms-post__body): headings, lists,
        quotes, CODE BLOCKS, media, tables
     6) Single post — end matter (divider · CTA reuse · back link)
   ===================================================================== */


/* ============ 1) BLOG LANE + INDEX / ARCHIVE HEADER ================= */
.jms-blog{
  max-width:var(--jms-lane);
  margin:0 auto;
  padding:0 var(--jms-pad-x);
  color:var(--jms-ink);
  box-sizing:border-box;
}
.jms-blog, .jms-blog *{ box-sizing:border-box; }
@media (max-width:600px){ .jms-blog{ padding:0 var(--jms-pad-x-sm); } }

/* Index/archive intro line under the yellow "Articles" badge. */
.jms-blog__intro{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  color:var(--jms-muted);
  line-height:var(--jms-leading);
  font-size:1.05rem;
}

/* Archive (category / tag / search) title — centered Lora, with an
   eyebrow kicker. Not the yellow badge (term names are variable-length). */
.jms-blog__kicker{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.74rem;
  font-weight:700;
  color:var(--jms-gold-2);
  margin:0 0 8px;
}
.jms-blog .wp-block-query-title,
.jms-blog__title{
  text-align:center;
  font-family:var(--wp--preset--font-family--lora, Lora, Georgia, serif);
  font-weight:600 !important;   /* beat the global h1-h6 500 cap (05-chrome) */
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--jms-ink-2);
  margin:0 auto;
}


/* ============ 2) ARCHIVE GRID + POST CARDS ========================= */
.jms-blog .wp-block-query{ margin-top:var(--jms-rhythm); }

/* The post loop renders as <ul.wp-block-post-template> → <li.wp-block-post>. */
.jms-blog .wp-block-post-template{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .jms-blog .wp-block-post-template{ grid-template-columns:1fr 1fr; }
}

/* Card = the panel system: hairline border, whisper gradient, inset
   highlight, refined shadow, springy hover-lift (matches .jpp-svc__card). */
.jms-blog .wp-block-post{
  margin:0;
  border:1px solid var(--jms-line);
  border-radius:var(--jms-radius);
  background:linear-gradient(180deg,#ffffff 0%,#fafbfc 100%);
  box-shadow:var(--jms-shadow), inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  cursor:pointer;          /* whole-card click (cards.js) */
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover:hover){
  .jms-blog .wp-block-post:hover{
    transform:translateY(-3px);
    box-shadow:var(--jms-shadow-lg), inset 0 1px 0 rgba(255,255,255,.9);
    border-color:var(--jms-line-strong);
  }
}

/* Featured image — 16:9 cover, flush to the card top. */
.jms-blog .wp-block-post-featured-image{
  margin:0;
  display:block;
  overflow:hidden;
  background:var(--jms-panel-2);
}
.jms-blog .wp-block-post-featured-image a,
.jms-blog .wp-block-post-featured-image img{ display:block; width:100%; }
.jms-blog .wp-block-post-featured-image img{
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .35s ease;
}
@media (hover:hover){
  .jms-blog .wp-block-post:hover .wp-block-post-featured-image img{ transform:scale(1.03); }
}

/* Card body — even padding, flex column so the date pins to the bottom. */
.jms-post-card__body{
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
}
.jms-post-card__body > *{ margin:0; }

/* Category chip — the site's yellow-accent pill (matches .chip). */
.jms-blog .wp-block-post-terms{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:0;                 /* kill whitespace between term links */
}
.jms-blog .wp-block-post-terms a{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(11,12,15,.78) !important;
  background:#fff;
  border:1.5px solid var(--jms-line-strong);
  border-left:3px solid var(--jms-hl);
  border-radius:6px;
  padding:4px 10px;
  text-decoration:none !important;
  line-height:1.2;
  transition:border-color .15s ease, color .15s ease;
}
@media (hover:hover){
  .jms-blog .wp-block-post-terms a:hover{ border-color:var(--jms-ink); color:var(--jms-ink) !important; }
}

/* Card title — Lora 600, ink, gold on hover. */
.jms-blog .wp-block-post-title{
  font-family:var(--wp--preset--font-family--lora, Lora, Georgia, serif);
  font-weight:600 !important;   /* beat the global h1-h6 500 cap */
  font-size:1.3rem;
  line-height:1.25;
  letter-spacing:-.01em;
}
.jms-blog .wp-block-post-title a{
  color:var(--jms-ink-2) !important;
  text-decoration:none !important;
  transition:color .15s ease;
}
@media (hover:hover){
  .jms-blog .wp-block-post:hover .wp-block-post-title a,
  .jms-blog .wp-block-post-title a:hover{ color:var(--jms-gold-2) !important; }
}

/* Excerpt — muted, clamped to keep cards even. */
.jms-blog .wp-block-post-excerpt{ color:var(--jms-muted); }
.jms-blog .wp-block-post-excerpt p,
.jms-blog .wp-block-post-excerpt__excerpt{
  margin:0;
  color:var(--jms-muted);
  line-height:var(--jms-leading);
  font-size:.98rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.jms-blog .wp-block-post-excerpt__more-text{ display:none; }

/* Date — pinned to the card bottom, quiet. */
.jms-blog .wp-block-post-date{
  margin-top:auto;
  padding-top:4px;
  color:rgba(11,12,15,.5);
  font-size:.84rem;
  letter-spacing:.01em;
}
.jms-blog .wp-block-post-date time{ color:inherit; }

/* Empty state */
.jms-blog .wp-block-query-no-results{
  text-align:center;
  color:var(--jms-muted);
  padding:40px 0;
}


/* ============ 3) PAGINATION ======================================== */
.jms-blog .wp-block-query-pagination{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-items:center;
}
.jms-blog .wp-block-query-pagination > *{ margin:0; }
.jms-blog .wp-block-query-pagination a,
.jms-blog .wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border:1.5px solid var(--jms-line-strong);
  border-radius:10px;
  background:#fff;
  color:var(--jms-ink) !important;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none !important;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
@media (hover:hover){
  .jms-blog .wp-block-query-pagination a:hover,
  .jms-blog .wp-block-query-pagination .page-numbers:hover{
    background:var(--jms-gold-wash);
    border-color:var(--jms-ink);
    transform:translateY(-1px);
  }
}
.jms-blog .wp-block-query-pagination .page-numbers.current{
  background:var(--jms-hl);
  border-color:var(--jms-ink);
  color:var(--jms-ink) !important;
}
.jms-blog .wp-block-query-pagination .page-numbers.dots{
  border:0;
  background:none;
  min-width:auto;
}


/* ============ 4) SINGLE POST — HEAD + FEATURED IMAGE =============== */
.jms-post{
  --jms-read: 720px;            /* comfortable reading measure */
  max-width:var(--jms-read);
  margin:0 auto;
  padding:0 var(--jms-pad-x);
  color:var(--jms-ink);
  box-sizing:border-box;
}
.jms-post, .jms-post *{ box-sizing:border-box; }
@media (max-width:600px){ .jms-post{ padding:0 var(--jms-pad-x-sm); } }

.jms-post__head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.jms-post__head > *{ margin:0; }

/* Category chip — same pill as the cards, centered. */
.jms-post__head .wp-block-post-terms{ display:flex; gap:8px; justify-content:center; font-size:0; }
.jms-post__head .wp-block-post-terms a{
  display:inline-block;
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(11,12,15,.78) !important;
  background:#fff;
  border:1.5px solid var(--jms-line-strong);
  border-left:3px solid var(--jms-hl);
  border-radius:6px; padding:4px 10px; text-decoration:none !important; line-height:1.2;
}

/* Title — real article H1 in Lora (NOT the yellow badge). */
.jms-post .wp-block-post-title{
  font-family:var(--wp--preset--font-family--lora, Lora, Georgia, serif);
  font-weight:600 !important;   /* beat the global h1-h6 500 cap */
  font-size:clamp(30px,4vw,44px);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--jms-ink-2);
  text-align:center;
}

/* Meta line — date · reading time (from [jms_post_meta]). */
.jms-post__meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:rgba(11,12,15,.55);
  font-size:.9rem;
  letter-spacing:.01em;
}
.jms-post__dot{ color:rgba(11,12,15,.3); }

/* Featured image — full reading-column width, rounded, lifted. Allowed to
   breathe a little wider than the text on desktop for a magazine feel. */
.jms-post .wp-block-post-featured-image{
  margin:28px auto 0;
  border-radius:var(--jms-radius);
  overflow:hidden;
  box-shadow:var(--jms-shadow-lg);
}
.jms-post .wp-block-post-featured-image img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover;
}
@media (min-width:900px){
  .jms-post .wp-block-post-featured-image{
    width:calc(100% + 120px);
    max-width:none;
    margin-inline:-60px;
  }
}


/* ============ 5) SINGLE POST — PROSE BODY ========================== */
.jms-post__body{ margin-top:36px; }
.jms-post__body .wp-block-post-content > *{ margin:0; }

/* Block rhythm — generous, long-form. */
.jms-post__body .wp-block-post-content > * + *{ margin-top:1.4em; }

/* Paragraphs / list items — bigger type, looser leading than the marketing
   pages (long-form reading wants more air than agency-tight 1.5). */
.jms-post__body .wp-block-post-content p,
.jms-post__body .wp-block-post-content li{
  font-size:1.12rem;
  line-height:1.75;
  color:rgba(11,12,15,.86);
}

/* Headings — left-aligned (override the global centered .wp-block-post-content
   heading rule), Lora, clear hierarchy + extra space above. */
.jms-post__body .wp-block-post-content > .wp-block-heading{ text-align:left; }
.jms-post__body .wp-block-post-content h2{
  font-family:var(--wp--preset--font-family--lora, Lora, Georgia, serif);
  font-weight:600 !important;   /* beat the global h1-h6 500 cap */
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--jms-ink-2);
  margin-top:1.9em;
}
.jms-post__body .wp-block-post-content h3{
  font-family:var(--wp--preset--font-family--lora, Lora, Georgia, serif);
  font-weight:600 !important;   /* beat the global h1-h6 500 cap */
  font-size:clamp(20px,2.1vw,24px);
  line-height:1.3;
  color:var(--jms-ink-2);
  margin-top:1.6em;
}

/* Lists — proper indent, gold markers, comfortable spacing. */
.jms-post__body .wp-block-post-content ul,
.jms-post__body .wp-block-post-content ol{ padding-left:1.4em; }
.jms-post__body .wp-block-post-content li + li{ margin-top:.5em; }
.jms-post__body .wp-block-post-content ul li::marker{ color:var(--jms-gold-2); }
.jms-post__body .wp-block-post-content ol li::marker{ color:var(--jms-gold-2); font-weight:700; }

/* Blockquote — gold keyline, italic Lora pull-quote. */
.jms-post__body .wp-block-post-content blockquote,
.jms-post__body .wp-block-post-content .wp-block-quote{
  margin:1.6em 0;
  padding:6px 0 6px 22px;
  border-left:3px solid var(--jms-gold);
  font-family:var(--wp--preset--font-family--lora, Lora, Georgia, serif);
  font-style:italic;
  font-weight:500;             /* use the loaded Lora 500-italic face (no 400-italic exists) */
  font-size:1.18rem;
  line-height:1.6;
  color:var(--jms-ink-2);
}
.jms-post__body .wp-block-post-content blockquote p{ font-size:inherit; line-height:inherit; color:inherit; }
.jms-post__body .wp-block-post-content blockquote cite{
  display:block; margin-top:8px; font-size:.92rem; font-style:normal;
  font-family:"Work Sans",sans-serif; color:var(--jms-muted);
}

/* Inline code — light tinted chip. */
.jms-post__body .wp-block-post-content :not(pre) > code{
  font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.88em;
  background:#f3f1ea;
  color:var(--jms-gold-2);
  border:1px solid rgba(196,154,73,.25);
  padding:.12em .42em;
  border-radius:6px;
  word-break:break-word;
}

/* Code BLOCK — the one place dark is right. GitHub-dark palette, monospace,
   horizontal scroll, hairline border + lift. (It's a TECH blog.) */
.jms-post__body .wp-block-post-content pre,
.jms-post__body .wp-block-post-content .wp-block-code{
  margin:1.6em 0;
  background:#0d1117;
  color:#e6edf3;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:18px 20px;
  overflow-x:auto;
  font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.9rem;
  line-height:1.65;
  box-shadow:var(--jms-shadow);
  -webkit-text-size-adjust:100%;
  tab-size:2;
}
.jms-post__body .wp-block-post-content pre code,
.jms-post__body .wp-block-post-content .wp-block-code code{
  background:none; border:0; padding:0; color:inherit; font-size:inherit; border-radius:0;
}

/* Images / figures — rounded, lifted, with a quiet caption. */
.jms-post__body .wp-block-post-content figure,
.jms-post__body .wp-block-post-content img{ max-width:100%; height:auto; }
.jms-post__body .wp-block-post-content figure{ margin:1.8em 0; }
.jms-post__body .wp-block-post-content img{
  border-radius:var(--jms-radius);
  box-shadow:var(--jms-shadow);
  display:block;
}
.jms-post__body .wp-block-post-content figcaption{
  margin-top:10px; text-align:center;
  font-size:.88rem; color:var(--jms-muted); line-height:1.4;
}

/* Divider inside prose */
.jms-post__body .wp-block-post-content hr{
  border:0; height:1px; background:var(--jms-line-strong);
  margin:2em auto; width:100%;
}

/* Tables */
.jms-post__body .wp-block-post-content table{
  width:100%; border-collapse:collapse; font-size:.98rem; margin:1.6em 0;
}
.jms-post__body .wp-block-post-content th,
.jms-post__body .wp-block-post-content td{
  border:1px solid var(--jms-line); padding:10px 12px; text-align:left;
}
.jms-post__body .wp-block-post-content th{ background:var(--jms-panel-2); font-weight:700; }

/* Lead/intro paragraph helper (optional, add .is-style-lead or .jms-lead) */
.jms-post__body .wp-block-post-content p.jms-lead{
  font-size:1.22rem; line-height:1.6; color:var(--jms-ink-2);
}


/* ============ 6) SINGLE POST — END MATTER ========================== */
/* Reuses .jpp-cta / .jpp-cta__panel from 03-components. Just need spacing
   + the back-to-articles action link. */
.jms-post-end{ max-width:var(--jms-lane); margin:0 auto; }
.jms-post-end .jpp-rule{ margin-top:48px; }

.jms-post-back{
  text-align:center;
  margin:8px auto 0;
}
.jms-post-back a.jms-actionlink{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:1rem;
}
.jms-post-back .arr{ transition:transform .2s ease; }
@media (hover:hover){
  .jms-post-back a.jms-actionlink:hover .arr{ transform:translateX(-3px); }
}