/* blog.css — extra styling for blog listing + long-form article pages
   Reuses design tokens from css/style.css, never edits it. */

/* Featured article cards on blog.html (the 6 new clickable ones) */
.blog-card.featured{position:relative;text-decoration:none;cursor:pointer}
.blog-card.featured .blog-cat{color:#fff;background:var(--brand)}
.blog-card.featured .blog-read{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--blue);padding:0 26px 24px;margin-top:auto}
.blog-card.featured .blog-read svg{width:15px;height:15px;transition:transform .3s}
.blog-card.featured:hover .blog-read svg{transform:translateX(4px)}
.blog-grid-divider{grid-column:1 / -1;display:flex;align-items:center;gap:16px;margin:12px 0 4px;color:var(--muted-dark);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.blog-grid-divider::before,.blog-grid-divider::after{content:"";flex:1;height:1px;background:var(--line-light)}

/* Long-form article typography */
.article-content{max-width:680px;margin:0 auto;text-align:left}
.article-content h2{font-family:'Sora',sans-serif;font-size:1.55rem;font-weight:700;color:var(--text-dark);margin:42px 0 16px}
.article-content h2:first-child{margin-top:0}
.article-content p{color:var(--muted-dark);font-size:1rem;line-height:1.85;margin-bottom:18px}
.article-content strong{color:var(--text-dark)}
.article-content ul{padding-left:22px;margin:0 0 20px;color:var(--muted-dark)}
.article-content li{margin-bottom:10px;line-height:1.7}
.article-content li b{color:var(--text-dark)}

.article-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;max-width:680px;margin:0 auto 8px}

.article-cta{max-width:680px;margin:52px auto 0;background:var(--bg-light);border:1px solid var(--line-light);border-radius:var(--radius);padding:36px;text-align:center}
.article-cta h3{font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:700;color:var(--text-dark);margin-bottom:10px}
.article-cta p{color:var(--muted-dark);font-size:.95rem;margin-bottom:22px}

.article-back{max-width:680px;margin:36px auto 0}
.article-back a{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:700;font-size:.9rem}
.article-back a svg{width:16px;height:16px}

@media(max-width:640px){
  .article-content h2{font-size:1.3rem}
  .article-cta{padding:26px}
}