/* ================================================================
   Blog — Listing & Post Pages
   See docs/design-system.md §9 for blog integration notes
   ================================================================ */

/* ---- listing page ---- */
.blog-hero{background:var(--paper);padding:clamp(140px,14vw,200px) 5vw clamp(60px,7vw,100px)}
.blog-hero .eyebrow{color:var(--muted)}
.blog-hero h1{font-family:var(--fd);font-weight:620;font-size:clamp(2.8rem,7vw,6rem);line-height:.92;letter-spacing:-.045em;color:var(--ink)}
.blog-hero h1 em{font-style:italic;color:var(--coral)}
.blog-hero p{max-width:520px;color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem);margin-top:28px;line-height:1.6}

.blog-grid{background:var(--paper);padding:0 5vw clamp(80px,11vw,170px)}
.blog-grid-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:28px}

/* blog card — derived from .case */
.blog-card{background:var(--paper-2);border-radius:18px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(11,10,9,.1)}
.blog-card-media{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--gold),var(--sage))}
.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.blog-card:hover .blog-card-media img{transform:scale(1.04)}
.blog-card-body{padding:28px 24px 32px}
.blog-card-body .blog-tag{display:inline-block;font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:14px}
.blog-card-body h2{font-family:var(--fd);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.1;letter-spacing:-.03em}
.blog-card-body .blog-excerpt{color:var(--muted);font-size:14.5px;line-height:1.55;margin-top:12px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-body .blog-meta{display:flex;align-items:center;gap:16px;margin-top:20px;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---- post page ---- */
.post-header{background:var(--paper);padding:clamp(140px,14vw,200px) 5vw clamp(40px,5vw,70px)}
.post-header-inner{max-width:760px;margin:0 auto}
.post-header .blog-tag{display:inline-block;font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:20px}
.post-header h1{font-family:var(--fd);font-weight:620;font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.post-header .post-meta{display:flex;align-items:center;gap:16px;margin-top:26px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-header .post-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--muted)}

.post-hero-img{max-width:1100px;margin:0 auto;padding:0 5vw}
.post-hero-img img{width:100%;border-radius:18px;aspect-ratio:2/1;object-fit:cover}

/* prose body */
.post-body{background:var(--paper);padding:clamp(48px,6vw,80px) 5vw clamp(80px,11vw,170px)}
.prose{max-width:720px;margin:0 auto;font-family:var(--fb);font-size:clamp(16px,1.15vw,18px);line-height:1.78;color:var(--ink)}
.prose p{margin-bottom:1.6em}
.prose h2{font-family:var(--fd);font-weight:600;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.03em;margin-top:2.4em;margin-bottom:.8em}
.prose h3{font-family:var(--fd);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.15;letter-spacing:-.025em;margin-top:2em;margin-bottom:.6em}
.prose img{width:100%;border-radius:14px;margin:2em 0}
.prose blockquote{border-left:3px solid var(--coral);padding-left:24px;margin:2em 0;font-style:italic;color:var(--muted);font-size:1.05em}
.prose ul,.prose ol{padding-left:1.5em;margin-bottom:1.6em}
.prose li{margin-bottom:.5em}
.prose a{color:var(--coral);text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.prose a:hover{color:var(--orange)}
.prose code{font-family:var(--fm);font-size:.88em;background:var(--paper-2);padding:2px 6px;border-radius:4px}
.prose pre{background:var(--ink);color:var(--paper);padding:24px 28px;border-radius:12px;overflow-x:auto;margin:2em 0;font-family:var(--fm);font-size:.85em;line-height:1.6}
.prose pre code{background:none;padding:0;border-radius:0;color:inherit}
.prose hr{border:none;border-top:1px solid rgba(11,10,9,.12);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;margin:2em 0;font-size:.92em}
.prose th,.prose td{text-align:left;padding:12px 16px;border-bottom:1px solid rgba(11,10,9,.12)}
.prose th{font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.prose td{color:var(--ink)}
.prose strong{font-weight:600}
.prose em{font-style:italic}

/* post nav (prev/next) */
.post-nav{background:var(--paper-2);padding:clamp(40px,5vw,70px) 5vw}
.post-nav-inner{max-width:760px;margin:0 auto;display:flex;justify-content:space-between;gap:24px}
.post-nav a{font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.post-nav a:hover{color:var(--coral)}
.post-nav a span{display:block;font-family:var(--fd);font-weight:540;font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.02em;color:var(--ink);margin-top:6px;text-transform:none}
.post-nav a.next{text-align:right}

/* post CTA */
.post-cta{margin-top:clamp(48px,6vw,80px);padding-top:clamp(48px,6vw,80px);border-top:1px solid rgba(11,10,9,.12)}
.post-cta-inner{max-width:720px;margin:0 auto;text-align:center}
.post-cta-inner h3{font-family:var(--fd);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.05;letter-spacing:-.03em}
.post-cta-inner h3 em{font-style:italic;color:var(--coral)}
.post-cta-inner p{color:var(--muted);font-size:16px;line-height:1.6;margin-top:16px;max-width:480px;margin-left:auto;margin-right:auto}
.post-cta-inner .btn-primary{margin-top:28px}

@media(max-width:760px){
  .blog-grid-inner{grid-template-columns:1fr}
  .post-nav-inner{flex-direction:column}
}