/* Finance With Dev - blog styles. Load AFTER /assets/service.css. */
/* Only adds blog-specific rules; nav, footer, tokens, .doc prose,
   .feat, .note, .faq-item, .cta-band, .related all inherit from service.css. */

/* ---- Article heading hierarchy (service.css styles h1/h2 only) ---- */
.doc h3{font-family:'Epilogue',sans-serif;font-weight:700;letter-spacing:-0.01em;color:var(--ink);font-size:18px;line-height:1.3;margin:26px 0 8px}

/* ---- Post meta row (date · reading time) ---- */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin:6px 0 28px}
.post-meta .dot{color:var(--line)}
.post-meta .cat{font-family:'Epilogue';font-weight:600;color:var(--gunmetal)}

/* ---- Self-hosted reel video (vertical 9:16) ---- */
.post-video{max-width:380px;margin:0 auto 32px;position:relative}
.post-video video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:var(--ink);border:1px solid var(--line);border-radius:var(--r)}
.post-video figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}

/* ---- Key takeaways summary box ---- */
.takeaways{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);padding:22px 26px;margin:0 0 34px}
.takeaways h2{font-size:15px !important;margin:0 0 12px !important;text-transform:uppercase;letter-spacing:.12em;color:var(--gunmetal);font-weight:700}
.takeaways ul{margin:0;padding-left:20px}
.takeaways li{font-size:15.5px;color:var(--charcoal);line-height:1.65;margin-bottom:8px}

/* ---- Blog index listing ---- */
.blog-wrap{max-width:var(--max);margin:0 auto;padding:56px 32px 90px}
.blog-intro{max-width:720px;margin:0 auto 40px;text-align:center}
.blog-intro .lead{margin:12px auto 0}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:.15s}
.post-card:hover{border-color:var(--gunmetal);transform:translateY(-2px)}
.post-card .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--paper);display:block}
.post-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-card .cat{font-family:'Epilogue';font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gunmetal);margin-bottom:10px}
.post-card h2{font-size:19px;line-height:1.25;margin:0 0 8px;color:var(--ink)}
.post-card p{font-size:14.5px;color:var(--charcoal);line-height:1.6;margin:0 0 16px}
.post-card .date{font-size:12.5px;color:var(--muted);margin-top:auto}

@media(max-width:900px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.post-grid{grid-template-columns:1fr}}
@media(max-width:720px){.blog-wrap{padding-left:22px;padding-right:22px}}