.blog-header{background-color:#f8f9fa;background-image:radial-gradient(circle at 1px 1px,#e0e0e0 1px,transparent 0),radial-gradient(circle at 10px 10px,#e0e0e0 1px,transparent 0);background-size:20px 20px;color:#2c3e50;padding:4rem 0;text-align:center;margin-bottom:4rem;border-bottom:1px solid #dee2e6}.blog-header h1{font-size:3.5rem;font-weight:900;margin-bottom:1rem}.blog-header p{font-size:1.2rem;font-weight:400;color:#555;max-width:600px;margin:0 auto}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2.5rem}.post-card{background-color:#fff;border-radius:20px;box-shadow:0 4px 6px #0000000d;overflow:hidden;text-decoration:none;color:#2c3e50;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;display:flex;flex-direction:column;border:1px solid #e0e0e0}.post-card:hover{transform:translateY(-5px);box-shadow:0 12px 20px #0000001a;border-color:#ff8c42}.post-card-image{width:100%;height:220px;object-fit:cover}.post-card-content{padding:1.5rem 2rem 2rem;display:flex;flex-direction:column;flex-grow:1}.post-title{font-size:1.3rem;font-weight:700;margin-bottom:.75rem;line-height:1.4;color:#34495e}.post-snippet{font-size:1rem;line-height:1.6;margin-bottom:1.5rem;flex-grow:1;color:#555}.post-meta{font-size:.85rem;color:#888;font-weight:500;margin-bottom:1.5rem}.post-read-more{display:inline-block;margin-top:auto;padding:10px 20px;background:#ff8c42;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:background-color .3s ease;text-align:center}.post-read-more:hover{background-color:#e67e22}.skeleton-card{background-color:#fff;border-radius:15px;box-shadow:0 10px 20px #00000014;overflow:hidden}.skeleton-post{max-width:800px;margin:2rem auto;padding:2rem;background-color:#fff;border-radius:10px}.skeleton-post-title{height:40px;width:80%;margin-bottom:1.5rem;background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0);background-size:200% 100%;animation:skeleton-wave 1.5s infinite;border-radius:4px}.skeleton-post-meta{height:20px;width:50%;margin-bottom:2rem;background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0);background-size:200% 100%;animation:skeleton-wave 1.5s infinite;border-radius:4px}.skeleton-post-image{height:400px;width:100%;margin-bottom:2rem;background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0);background-size:200% 100%;animation:skeleton-wave 1.5s infinite;border-radius:10px}.skeleton-post-content{height:20px;width:100%;margin-bottom:1rem;background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0);background-size:200% 100%;animation:skeleton-wave 1.5s infinite;border-radius:4px}.skeleton-post-content:last-child{width:70%}.skeleton-image{height:220px;background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0);background-size:200% 100%;animation:skeleton-wave 1.5s infinite}.skeleton-content{padding:1.8rem}.skeleton-title{height:28px;width:70%;margin-bottom:1.5rem;background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0);background-size:200% 100%;animation:skeleton-wave 1.5s infinite;border-radius:4px}.skeleton-text{height:16px;width:100%;margin-bottom:.8rem;background:linear-gradient(90deg,#f0f0f0,#e0e0e0,#f0f0f0);background-size:200% 100%;animation:skeleton-wave 1.5s infinite;border-radius:4px}.skeleton-text:last-child{width:80%}@keyframes skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}.blog-post{max-width:800px;margin:0 auto;padding:2rem;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.post-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1.5rem;background-color:#fffc;backdrop-filter:blur(10px);padding:1.5rem;border-radius:10px;border:1px solid #dee2e6;position:sticky;top:0;z-index:10}.back-link{color:#ff8c42;text-decoration:none;font-weight:600;font-size:.9rem}.back-link:hover{text-decoration:underline}.post-title-main{font-size:3rem;font-weight:900;margin-bottom:1rem;color:#2c3e50;line-height:1.2}.post-meta-main{font-size:1rem;color:#555;margin-bottom:2.5rem;font-weight:500}.post-main-image{width:100%;max-height:500px;object-fit:cover;border-radius:10px;margin-bottom:2rem}.post-content{font-size:1.125rem;line-height:1.8;color:#34495e}.post-content a{color:#ff8c42;text-decoration:none;border-bottom:2px solid #FF8C42;transition:background-color .3s ease}.post-content a:hover{background-color:#fff7f5}.post-content h2{font-size:2rem;font-weight:700;margin-top:3rem;margin-bottom:1.5rem}.post-content h3{font-size:1.5rem;font-weight:700;margin-top:2.5rem;margin-bottom:1rem}.post-content ul{list-style:disc;padding-left:2rem;margin-bottom:1.5rem}.btn{display:inline-flex;align-items:center;padding:.8rem 1.5rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:.9rem;text-align:center;transition:all .3s ease}.btn-icon{margin-right:.5rem}.btn-primary{background-color:#ff8c42;color:#fff;border:2px solid transparent}.btn-primary:hover{background-color:#e67e22}

/* Dark Mode Overrides for Blog */
body.dark-mode .blog-header {
  background-color: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}
body.dark-mode .blog-header p {
  color: #94a3b8;
}
body.dark-mode .post-card {
  background: var(--card-background);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}
body.dark-mode .post-card:hover {
  border-color: rgba(245, 114, 36, 0.4);
}
body.dark-mode .post-title,
body.dark-mode .post-title-main {
  color: #f8fafc;
}
body.dark-mode .post-snippet,
body.dark-mode .post-meta,
body.dark-mode .post-meta-main,
body.dark-mode .post-content {
  color: #cbd5e1;
}
body.dark-mode .post-header {
  background-color: rgba(22, 22, 26, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .skeleton-card,
body.dark-mode .skeleton-post {
  background-color: var(--card-background);
}
body.dark-mode .skeleton-post-title,
body.dark-mode .skeleton-post-meta,
body.dark-mode .skeleton-post-image,
body.dark-mode .skeleton-post-content,
body.dark-mode .skeleton-image,
body.dark-mode .skeleton-title,
body.dark-mode .skeleton-text {
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  background-size: 200% 100%;
}