/* ---------------------------------------------------------------------------
   Blog — listing (/blog/) and article pages (/blog/<slug>).
   Dark theme, built on the tokens in site.css. Reuses .wk-hero, .crumb, .lead,
   .cta-card from site.css / pages.css. Loaded after site.css and pages.css.
--------------------------------------------------------------------------- */

/* ---------- Listing ---------- */
.blog-list{padding-block:0 clamp(70px,9vw,120px)}
.blog-list .wrap{position:relative}

.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}

.pcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.pcard:hover,.pcard:focus-visible{transform:translateY(-6px);border-color:var(--line-2);background:var(--card-2)}
.pcard__media{aspect-ratio:16/9;overflow:hidden;background:#0a1c1e}
.pcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.04)}
.pcard__body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:12px;flex:1}
.pcard__cat{font:500 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--aqua)}
.pcard__title{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.22;letter-spacing:-.02em;margin:0}
.pcard__ex{color:var(--muted);font-size:.98rem;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard__meta{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:10px;color:var(--dim);font:500 .8rem var(--mono);letter-spacing:.04em;border-top:1px solid var(--line)}
.pcard__go{margin-left:auto;color:var(--aqua);display:inline-flex;transition:transform .3s var(--ease)}
.pcard:hover .pcard__go{transform:translateX(4px)}
.pcard__go svg{width:18px;height:18px}

/* Featured (first) card: wider, image beside the copy on desktop */
.pcard--feat{grid-column:1/-1;flex-direction:row;align-items:stretch}
.pcard--feat .pcard__media{flex:0 0 52%;aspect-ratio:auto}
.pcard--feat .pcard__body{padding:clamp(26px,3vw,46px);justify-content:center}
.pcard--feat .pcard__title{font-size:clamp(1.5rem,2.6vw,2.3rem)}
.pcard--feat .pcard__ex{-webkit-line-clamp:4;font-size:1.05rem}

/* ---------- Article ---------- */
.post-hero{padding-block:120px clamp(28px,4vw,48px);background:radial-gradient(50% 50% at 88% 6%,rgba(17,137,121,.22),transparent 70%)}
.post-hero__head{max-width:62rem}
.post-cat{display:inline-block;font:500 .74rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-grad);background:var(--grad);padding:5px 12px;border-radius:999px;margin-bottom:18px}
.post-hero h1{font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.04;letter-spacing:-.03em;margin:0 0 20px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;color:var(--muted);font:500 .9rem var(--mono);letter-spacing:.03em}
.post-meta span{display:inline-flex;align-items:center;gap:8px}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--dim)}

.post-cover{margin-block:clamp(10px,2vw,22px) 0}
.post-cover img{width:100%;max-height:560px;object-fit:cover;border-radius:20px;border:1px solid var(--line);display:block}

/* Prose */
.post-body{max-width:46rem;margin-inline:auto;padding-block:clamp(40px,6vw,72px);font-size:clamp(1.05rem,1.25vw,1.18rem);line-height:1.75;color:#CFE0DC}
.post-body>*+*{margin-top:1.4em}
.post-body p{margin:0}
.post-body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2;letter-spacing:-.02em;color:var(--text);margin-top:1.9em;margin-bottom:.1em}
.post-body h3{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.25;letter-spacing:-.01em;color:var(--text);margin-top:1.5em}
.post-body a{color:var(--aqua);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post-body a:hover{color:var(--mint)}
.post-body ul,.post-body ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:.6em}
.post-body li{padding-left:.2em}
.post-body li::marker{color:var(--aqua)}
.post-body strong{color:var(--text);font-weight:600}
.post-body blockquote{margin:0;padding:4px 0 4px 26px;border-left:3px solid var(--aqua);color:var(--muted);font-style:normal}
.post-body blockquote p+p{margin-top:1em}
.post-body .lede{font-size:1.18em;color:var(--text);line-height:1.6}

/* The shared .cta-card is a two-column grid (mascot + copy). Blog pages don't
   load the mascot, so make the card a single full-width column here. */
.cta-card--solo{grid-template-columns:minmax(0,1fr)}

/* Footer of an article: back link + CTA reuse */
.post-foot{padding-block:0 clamp(60px,8vw,110px)}
.post-back{display:inline-flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none;font:500 .9rem var(--mono);letter-spacing:.04em;margin-bottom:40px}
.post-back:hover{color:var(--text)}
.post-back svg{width:18px;height:18px}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .blog-grid{grid-template-columns:minmax(0,1fr)}
  .pcard--feat{flex-direction:column}
  .pcard--feat .pcard__media{flex:auto;aspect-ratio:16/9}
}

@media (prefers-reduced-motion: reduce){
  .pcard,.pcard__media img,.pcard__go{transition:none}
  .pcard:hover,.pcard:focus-visible{transform:none}
  .pcard:hover .pcard__media img{transform:none}
}