/* ===== BLOG STYLES v2 ===== */

/* Blog Hero */
.blog-hero{padding:120px 0 48px;background:linear-gradient(135deg,#505AF0,#3D46E0);color:#fff;text-align:center}
.blog-hero h1{font-size:2rem;font-weight:900;margin-bottom:8px}
.blog-hero p{font-size:.95rem;color:rgba(255,255,255,.8);max-width:500px;margin:0 auto}

/* Blog Listing */
.blog-listing{padding:48px 0 60px;background:#fff}
.blog-grid{display:grid;grid-template-columns:1fr;gap:20px}

/* Blog Card */
.blog-card{display:block;background:#fff;border-radius:16px;border:1px solid #f0f0f0;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;text-decoration:none;color:inherit}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.1)}
.blog-card-img{height:180px;display:flex;align-items:flex-end;padding:16px;position:relative}
.blog-card-tag{background:rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;padding:5px 14px;border-radius:100px;font-size:.68rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.blog-card-body{padding:20px 20px 24px}
.blog-card-body h2,.blog-card-body h3{font-size:1.02rem;font-weight:800;line-height:1.4;margin-bottom:8px;color:var(--text);transition:color .2s}
.blog-card:hover .blog-card-body h2,.blog-card:hover .blog-card-body h3{color:var(--primary)}
.blog-card-body p{font-size:.84rem;color:var(--text-mid);line-height:1.6;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-meta{display:flex;gap:16px;font-size:.73rem;color:var(--text-light);font-weight:600}

/* Featured Post — Blog listing page */
.blog-featured{display:flex;flex-direction:column;background:#fff;border-radius:20px;border:1px solid #f0f0f0;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;text-decoration:none;color:inherit;margin-bottom:40px}
.blog-featured:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.1)}
.blog-featured-img{height:220px;display:flex;align-items:flex-end;padding:24px;position:relative}
.blog-featured-body{padding:28px 24px 32px}
.blog-featured-body h2{font-size:1.4rem;font-weight:900;line-height:1.3;margin-bottom:10px;color:var(--text);transition:color .2s}
.blog-featured:hover .blog-featured-body h2{color:var(--primary)}
.blog-featured-body p{font-size:.92rem;color:var(--text-mid);line-height:1.7;margin-bottom:14px}

/* Section Labels */
.blog-section-label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--primary);padding:32px 0 14px;border-bottom:2px solid #f0f0f0;margin-bottom:20px}

/* Homepage Blog Preview */
.blog-preview{padding:60px 0;background:#FAFAFA}
.blog-preview h2{text-align:center;font-size:1.5rem;font-weight:900;margin-bottom:8px}
.blog-preview h2 span{color:var(--primary)}
.blog-preview-sub{text-align:center;color:var(--text-mid);font-size:.9rem;margin-bottom:32px}
.blog-preview .blog-grid{max-width:1200px;margin:0 auto}
.blog-preview-cta{text-align:center;margin-top:32px}
.blog-preview-cta a{display:inline-block;padding:14px 36px;border:2px solid var(--primary);color:var(--primary);border-radius:100px;font-size:.88rem;font-weight:700;transition:background .2s,color .2s,transform .15s}
.blog-preview-cta a:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}

/* ===== BLOG POST PAGE ===== */
.blog-post-hero{padding:120px 0 32px;background:linear-gradient(135deg,#505AF0,#3D46E0);color:#fff;text-align:center}
.blog-post-hero .blog-card-tag{display:inline-block;margin-bottom:12px}
.blog-post-hero h1{font-size:1.6rem;font-weight:900;line-height:1.3;max-width:700px;margin:0 auto 12px}
.blog-post-meta{font-size:.82rem;color:rgba(255,255,255,.7)}
.blog-post-meta span{margin:0 8px}

.blog-post-content{padding:40px 0 60px;background:#fff}
.blog-post-content .container{max-width:720px}
.blog-post-content h2{font-size:1.3rem;font-weight:800;margin:32px 0 12px;color:var(--text)}
.blog-post-content h3{font-size:1.1rem;font-weight:700;margin:24px 0 8px;color:var(--text)}
.blog-post-content p{font-size:.92rem;color:var(--text-mid);line-height:1.8;margin-bottom:16px}
.blog-post-content ul,.blog-post-content ol{margin:0 0 16px 20px}
.blog-post-content li{font-size:.92rem;color:var(--text-mid);line-height:1.8;margin-bottom:6px}
.blog-post-content strong{color:var(--text)}
.blog-post-content a{color:var(--primary);text-decoration:underline;text-decoration-color:rgba(80,90,240,.3);text-underline-offset:2px;transition:text-decoration-color .2s}
.blog-post-content a:hover{text-decoration-color:var(--primary)}
.blog-post-content blockquote{border-left:4px solid var(--primary);padding:12px 20px;background:#F0F0FF;border-radius:0 8px 8px 0;margin:20px 0;font-size:.9rem;color:var(--text-mid);font-style:italic}
.blog-post-content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.85rem;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.05)}
.blog-post-content th{background:#000;color:#fff;padding:12px;text-align:left;font-weight:700;font-size:.78rem}
.blog-post-content td{padding:10px 12px;border-bottom:1px solid #f0f0f0;color:var(--text-mid)}
.blog-post-content tr:hover td{background:#FAFAFA}

/* CTA Box inside blog post */
.blog-cta-box{background:linear-gradient(135deg,#505AF0,#3D46E0);color:#fff;border-radius:20px;padding:36px;text-align:center;margin:36px 0;box-shadow:0 12px 32px rgba(80,90,240,.25)}
.blog-cta-box h3{font-size:1.2rem;font-weight:800;margin-bottom:8px}
.blog-cta-box p{font-size:.88rem;color:rgba(255,255,255,.85);margin-bottom:16px}
.blog-cta-box a{display:inline-block;background:#fff;color:var(--primary);padding:14px 36px;border-radius:100px;font-size:.88rem;font-weight:800;transition:transform .15s,box-shadow .2s}
.blog-cta-box a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}

/* Back to blog link */
.blog-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:24px;font-size:.85rem;font-weight:600;color:var(--primary);text-decoration:none !important}
.blog-back:hover{text-decoration:underline !important}

/* Nav active state */
.nav-active{color:#fff !important}

/* ===== RESPONSIVE ===== */
@media(min-width:640px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .blog-hero h1{font-size:2.4rem}
  .blog-post-hero h1{font-size:2rem}
  .blog-featured{flex-direction:row}
  .blog-featured-img{width:45%;height:auto;min-height:260px}
  .blog-featured-body{width:55%;display:flex;flex-direction:column;justify-content:center}
}
@media(min-width:1024px){
  .blog-grid{grid-template-columns:repeat(3,1fr)}
  .blog-featured-body h2{font-size:1.6rem}
}