/* ==========================================================================
   blog.css — blog-only styles for WTF AI Labs.
   Loads AFTER wtf.css and reuses its design tokens (var(--accent), --bone,
   --mono, .wrap, .btn, .card, .eyebrow, .grad-text, .live-pill ...).
   Only adds article typography + post cards. Dark, matches the site.
   ========================================================================== */

/* The blog pages never run the WebGL hero; reveal content immediately even if
   core.js's reveal observer is the only thing toggling visibility. */
.blog-body [data-reveal]{opacity:1;transform:none}

/* ---------- BLOG HUB HERO ---------- */
.blog-hero{position:relative;padding-block:clamp(120px,16vh,180px) clamp(30px,5vh,60px);overflow:hidden}
.blog-hero__h{margin-top:24px;font-size:clamp(2.4rem,8vw,6rem)}
.blog-hero__lead{margin-top:28px;max-width:60ch}

/* ---------- POST CARD GRID (hub) ---------- */
.blog-list{padding-block:10px clamp(70px,12vh,130px)}
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:clamp(16px,2vw,26px);
}
.post-card{display:flex;flex-direction:column;gap:14px;text-decoration:none;min-height:248px}
.post-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.post-card__chip{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;
}
.post-card__date{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--mute)}
.post-card__title{
  font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.01em;
  font-size:clamp(1.25rem,1.8vw,1.6rem);color:var(--bone);margin:2px 0 0;
}
.post-card__desc{color:var(--fog);font-size:.96rem;line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:14px;border-top:1px solid var(--line)}
.post-card__kw{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.post-card__more{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--accent)}

/* ---------- ARTICLE PAGE ---------- */
.post{padding-block:clamp(110px,14vh,150px) clamp(60px,10vh,120px)}
.post__head{max-width:760px}
.post__crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.post__crumbs a{color:var(--mute);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.post__crumbs a:hover{color:var(--bone);border-color:var(--line-2)}
.post__meta{margin-top:22px}
.post__title{margin-top:18px;font-size:clamp(2rem,4.6vw,3.4rem);text-transform:none;line-height:1.04}
.post__tags{margin-top:24px}

/* readable article column (~720px) */
.post__body{max-width:720px}
.post__body > *{margin-inline:0}
.post__body h2{
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.1;
  font-size:clamp(1.5rem,2.6vw,2.05rem);color:var(--bone);margin:2.1em 0 .55em;
}
.post__body h2:first-child{margin-top:1.4em}
.post__body h3{
  font-family:var(--display);font-weight:500;letter-spacing:-.005em;line-height:1.15;
  font-size:clamp(1.2rem,1.9vw,1.5rem);color:var(--bone);margin:1.7em 0 .5em;
}
.post__body p{font-size:1.085rem;line-height:1.72;color:var(--fog);margin:0 0 1.25em}
.post__body strong{color:var(--bone);font-weight:700}
.post__body a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft);transition:border-color .2s}
.post__body a:hover{border-color:var(--accent)}
.post__body ul{margin:0 0 1.4em;padding:0;list-style:none;display:flex;flex-direction:column;gap:.6em}
.post__body ul li{position:relative;padding-left:1.5em;font-size:1.06rem;line-height:1.6;color:var(--fog)}
.post__body ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;
  background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.post__body ol{margin:0 0 1.4em;padding-left:1.3em;color:var(--fog)}
.post__body ol li{font-size:1.06rem;line-height:1.7;margin-bottom:.5em;padding-left:.3em}
.post__body blockquote{margin:1.6em 0;padding:14px 22px;border-left:3px solid var(--accent);
  background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;color:var(--bone);font-size:1.1rem}
.post__body code{font-family:var(--mono);font-size:.9em;background:var(--smoke);border:1px solid var(--line);
  padding:.12em .42em;border-radius:6px;color:var(--bone)}
.post__body pre{background:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;overflow:auto;margin:0 0 1.4em}
.post__body pre code{background:none;border:0;padding:0;font-size:.86rem;line-height:1.6}

/* "Key takeaways" / callout: any h2 whose text is Key takeaways / What this means
   is styled by the author block downstream; we make trailing list emphasis read well. */

/* ---------- RELATED POSTS ---------- */
.post-related{max-width:760px;margin-top:clamp(40px,7vh,70px);padding-top:34px;border-top:1px solid var(--line)}
.post-related__h{font-family:var(--display);font-weight:500;font-size:1.3rem;color:var(--bone);margin:0 0 18px;letter-spacing:-.01em}
.post-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.post-related__card{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  text-decoration:none;color:var(--fog);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;line-height:1.35;font-size:.96rem;
  transition:border-color .25s,color .25s,transform .25s}
.post-related__card:hover{border-color:var(--line-2);color:var(--bone);transform:translateY(-3px)}
.post-related__card .arrow{color:var(--accent);font-size:.85rem}

/* ---------- PRODUCT CTA BAND ---------- */
.post-cta{max-width:760px;margin-top:clamp(40px,7vh,70px);display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3.4vw,40px)}
.post-cta__host{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);display:flex;align-items:center;gap:12px}
.post-cta__h{margin:4px 0 0}
.post-cta__actions{margin-top:14px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:680px){
  .post-grid{grid-template-columns:1fr}
  .post__body p,.post__body ul li,.post__body ol li{font-size:1.02rem}
  .post-cta__actions{flex-direction:column;align-items:stretch}
  .post-cta__actions .btn{justify-content:center}
}

/* ---- share + reading progress (injected by blog-share.js) ---- */
.blog-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--red),var(--ember),var(--gold));z-index:9500;transition:width .1s linear}
.blog-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.blog-share__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-right:4px}
.blog-share__btn{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--bone);border:1px solid var(--line-2);border-radius:100px;padding:9px 16px;background:transparent;cursor:pointer;transition:border-color .25s,background .25s}
.blog-share__btn:hover{border-color:var(--accent);background:var(--accent-soft)}