/* Blog index */
.blog-hero { background: linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%); color:#fff; padding:4rem 1.5rem 3rem; text-align:center; }
.blog-hero h1 { font-size:2.2rem; font-weight:800; margin:0 0 .75rem; }
.blog-hero p  { font-size:1.05rem; opacity:.88; max-width:540px; margin:0 auto; line-height:1.6; }

.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; max-width:1100px; margin:2.5rem auto; padding:0 1.5rem 3rem; }
.blog-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:1.75rem; display:flex; flex-direction:column; gap:.6rem; transition:box-shadow .15s,transform .15s; }
.blog-card:hover { box-shadow:0 8px 24px rgba(37,99,235,.1); transform:translateY(-2px); }
.blog-card-tag { display:inline-block; background:#eff6ff; color:#2563eb; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.25rem .65rem; border-radius:9999px; align-self:flex-start; }
.blog-card h2 { font-size:1rem; font-weight:700; color:#0f172a; margin:0; line-height:1.4; }
.blog-card p  { font-size:.83rem; color:#6b7280; margin:0; line-height:1.55; flex:1; }
.blog-card-meta { font-size:.75rem; color:#9ca3af; }
.blog-card a.read-more { display:inline-flex; align-items:center; gap:.35rem; color:#2563eb; font-size:.82rem; font-weight:700; text-decoration:none; align-self:flex-start; margin-top:.25rem; }
.blog-card a.read-more:hover { text-decoration:underline; }

/* Blog post layout */
.post-hero { background:#f8fafc; border-bottom:1px solid #e2e8f0; padding:3rem 1.5rem 2.5rem; text-align:center; }
.post-hero .post-tag { display:inline-block; background:#eff6ff; color:#2563eb; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.3rem .8rem; border-radius:9999px; margin-bottom:1rem; }
.post-hero h1 { font-size:2rem; font-weight:800; color:#0f172a; max-width:720px; margin:0 auto .75rem; line-height:1.3; }
.post-hero .post-meta { font-size:.8rem; color:#9ca3af; display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
.post-hero .post-meta span { display:flex; align-items:center; gap:.3rem; }

.post-body { max-width:720px; margin:0 auto; padding:2.5rem 1.5rem 1rem; }
.post-body h2 { font-size:1.25rem; font-weight:700; color:#0f172a; margin:2rem 0 .6rem; }
.post-body h3 { font-size:1rem; font-weight:700; color:#1e40af; margin:1.5rem 0 .4rem; }
.post-body p  { font-size:.93rem; color:#374151; line-height:1.75; margin:0 0 1rem; }
.post-body ul, .post-body ol { padding-left:1.4rem; margin:0 0 1rem; }
.post-body li { font-size:.93rem; color:#374151; line-height:1.75; margin-bottom:.3rem; }
.post-body a { color:#2563eb; }
.post-body a:hover { text-decoration:underline; }
.post-body strong { color:#0f172a; }

.post-callout { background:#eff6ff; border-left:4px solid #2563eb; border-radius:0 8px 8px 0; padding:1rem 1.25rem; margin:1.5rem 0; }
.post-callout p { margin:0; font-size:.88rem; color:#1e40af; }

/* Tool CTA inside post */
.post-tool-cta { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:1.5rem; margin:2rem 0; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.post-tool-cta .ptc-icon { width:48px; height:48px; background:#eff6ff; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#2563eb; flex-shrink:0; }
.post-tool-cta .ptc-text h4 { font-size:.9rem; font-weight:700; color:#0f172a; margin:0 0 .2rem; }
.post-tool-cta .ptc-text p  { font-size:.8rem; color:#6b7280; margin:0; }
.post-tool-cta a.ptc-btn { display:inline-flex; align-items:center; gap:.4rem; background:#2563eb; color:#fff; font-size:.8rem; font-weight:700; padding:.5rem 1.1rem; border-radius:7px; text-decoration:none; margin-left:auto; white-space:nowrap; }
.post-tool-cta a.ptc-btn:hover { background:#1d4ed8; }

/* Post footer nav */
.post-footer { max-width:720px; margin:0 auto; padding:1.5rem; border-top:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.post-footer a { color:#2563eb; font-size:.85rem; font-weight:600; text-decoration:none; display:flex; align-items:center; gap:.35rem; }
.post-footer a:hover { text-decoration:underline; }

@media (max-width:640px) {
    .blog-hero h1 { font-size:1.6rem; }
    .post-hero h1 { font-size:1.4rem; }
    .post-tool-cta a.ptc-btn { margin-left:0; }
}