.blog-filter-module{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;width:100%}.filter-section{background:#fff;border-bottom:1px solid #e2e8f0;padding:30px 0}.filter-container{margin:0 auto;max-width:1200px;padding:0 20px}.desktop-filters{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start}.filter-btn{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:50px;color:#64748b;cursor:pointer;font-size:.95rem;font-weight:500;padding:12px 24px;transition:all .3s ease;white-space:nowrap}.filter-btn:hover{background:#e2e8f0;color:#475569;transform:translateY(-1px)}.filter-btn.active{background:#0e3aa3;border-color:#0e3aa3;box-shadow:0 2px 8px rgba(14,58,163,.2);color:#fff}.mobile-filter-dropdown{display:none}.filter-select{appearance:none;background:#fff;background-image:url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4L2 0zM2 5L0 3h4L2 5z"/></svg>');background-position:right 12px center;background-repeat:no-repeat;background-size:12px;border:1px solid #e2e8f0;border-radius:8px;color:#475569;cursor:pointer;font-size:1rem;font-weight:500;padding:12px 16px;width:100%}.filter-select:focus{border-color:#0e3aa3;box-shadow:0 0 0 3px rgba(14,58,163,.1);outline:none}.blog-posts-section{background:#fff;padding:60px 0}.blog-posts-container{margin:0 auto;max-width:1200px;padding:0 20px}.blog-posts-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));margin-bottom:50px}.blog-post-card{background:#fff;border:1px solid #f1f5f9;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.07);overflow:hidden;transition:all .3s ease}.blog-post-card:hover{box-shadow:0 20px 40px rgba(0,0,0,.1);transform:translateY(-5px)}.post-image{height:220px;overflow:hidden;position:relative;width:100%}.post-image img{height:100%;object-fit:cover;transition:transform .3s ease;width:100%}.blog-post-card:hover .post-image img{transform:scale(1.05)}.post-image-placeholder{align-items:center;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#94a3b8;display:flex;height:100%;justify-content:center;width:100%}.post-image-placeholder svg{height:48px;width:48px}.post-content{padding:24px}.post-meta{align-items:flex-start;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:16px}.post-meta time{color:#64748b;font-size:.875rem;font-weight:500}.post-tags{display:flex;flex-wrap:wrap;gap:6px}.tag{background:none;border-bottom:1px solid #e2e8f0;border-radius:0;color:#475569;font-size:.75rem;font-weight:500;padding:4px 8px}.post-title{font-size:1.25rem;font-weight:600;line-height:1.4;margin:0 0 12px}.post-title a{color:#1e293b;text-decoration:none;transition:color .3s ease}.post-title a:hover{color:#0e3aa3}.post-excerpt{color:#64748b;font-size:.95rem;line-height:1.6;margin:0 0 20px}.read-more{align-items:center;color:#0e3aa3;display:inline-flex;font-size:.875rem;font-weight:600;gap:4px;text-decoration:none;transition:all .3s ease}.read-more:hover{color:#0a2d82;transform:translateX(4px)}.read-more:after{content:"→";transition:transform .3s ease}.read-more:hover:after{transform:translateX(4px)}.no-posts-message{padding:60px 20px;text-align:center}.no-posts-content h3{color:#475569;font-size:1.5rem;margin:0 0 12px}.no-posts-content p{color:#64748b;font-size:1rem;margin:0}.load-more-section{padding:20px 0;text-align:center}.load-more-btn{background:#0e3aa3;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:16px 32px;transition:all .3s ease}.load-more-btn:hover{background:#0a2d82;box-shadow:0 8px 20px rgba(14,58,163,.3);transform:translateY(-2px)}@media (max-width:768px){.desktop-filters{display:none}.mobile-filter-dropdown{display:block}.blog-posts-grid{gap:20px;grid-template-columns:1fr}.post-meta{align-items:flex-start;flex-direction:column;gap:8px}}@media (max-width:480px){.filter-select{font-size:.9rem;padding:10px 14px}.blog-posts-grid{grid-template-columns:1fr}.post-content{padding:20px}}.blog-post-card.hidden{display:none}.blog-post-card.fade-in{animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}