/* ============================================================
   Blog — listing + individual post pages
   Inherits tokens + nav/footer/buttons from /styles.css.
   Deliberately mirrors case-studies.css so the two long-form
   page types share one reading system (to be unified into a
   shared content system in the design pass).
   ============================================================ */

.footer__mark--img img{ width:172px; height:auto; filter:brightness(0) invert(1); opacity:.9; }
@media (max-width:720px){ .footer__mark--img img{ width:150px; } }

/* back link (post pages) */
.blog-back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-text); margin-bottom:24px; transition:color .15s ease; }
.blog-back svg{ transition:transform .18s ease; }
.blog-back:hover{ color:var(--ink); }
.blog-back:hover svg{ transform:translateX(-3px); }

/* ============================================================
   LISTING  (/blog/)
   ============================================================ */
.blog-list-hero{ background:var(--white); padding:clamp(40px,6vw,64px) 0 clamp(20px,3vw,32px); }
.blog-list-hero .h2{ margin-bottom:16px; }

.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; }

.blog-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hairline); border-radius:16px;
  padding:28px 30px 26px; box-shadow:var(--sh-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height:240px;
}
.blog-card--link:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--hairline-strong); }
.blog-card--soon{ opacity:.92; }
.blog-card__top{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.blog-card__cat{ font-family:var(--display); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-text); border:1px solid var(--hairline); border-radius:999px; padding:4px 10px 3px; white-space:nowrap; }
.blog-card__read{ font-family:var(--display); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-text); margin-left:auto; }
.blog-card__title{ font-family:var(--sans); font-weight:700; font-size:clamp(19px,1.9vw,22px); line-height:1.25; letter-spacing:-.018em; color:var(--ink); margin:0 0 12px; text-wrap:balance; }
.blog-card__excerpt{ font-size:15px; line-height:1.55; color:var(--ink-soft); margin:0; }
.blog-card__cta{ margin-top:auto; padding-top:20px; }
.blog-card .tlink{ align-self:flex-start; }
.blog-card__soonlabel{ margin-top:auto; padding-top:20px; font-family:var(--display); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-text); }
.blog-card--link .blog-cover{ position:absolute; inset:0; border-radius:16px; }

/* ============================================================
   POST PAGE  (/blog/<slug>/)
   ============================================================ */
.blog-hero{ background:var(--white); padding:clamp(26px,4vw,42px) 0 clamp(28px,4vw,40px); border-bottom:1px solid var(--hairline); }
.blog-hero__eyebrow{ margin-bottom:20px; }
.blog-hero__title{ font-family:var(--sans); font-weight:700; font-size:clamp(30px,4.4vw,50px); line-height:1.12; letter-spacing:-0.03em; color:var(--black); max-width:20ch; margin:0 0 22px; text-wrap:balance; }
.blog-hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.blog-hero__pill{ font-family:var(--display); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); background:var(--grey); border:1px solid var(--hairline); border-radius:999px; padding:7px 13px 6px; }
.blog-hero__dot{ color:var(--grey-text); font-size:12px; }
.blog-hero__meta time,.blog-hero__meta .m{ font-family:var(--display); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-text); }

.blog-body{ background:var(--white); }

/* ---------- Reading system lives in the SHARED /content.css ----------
   The column width, type scale, rhythm, and every content primitive
   (.blog-lede, .blog-block, .blog-note, .blog-stats, .blog-fig, .blog-faq,
   .blog-end) are defined there so blog posts and case studies read as one
   publication. Only the post-page chrome (hero, back link, lightbox,
   listing cards) lives in this file. */

/* lightbox (the site's one sanctioned JS) */
#lb{ display:none; position:fixed; inset:0; background:rgba(10,10,10,.93); z-index:1000; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
#lb img{ max-width:98%; max-height:95%; border-radius:8px; box-shadow:0 24px 70px -20px rgba(0,0,0,.6); }
#lb .hint{ position:fixed; top:16px; right:22px; color:rgba(255,255,255,.72); font-size:13px; font-family:var(--sans); letter-spacing:.02em; }

@media (max-width:720px){
  .blog-card{ padding:22px 22px 22px; min-height:0; }
}