.blog-list-page{--blog-primary:#2563eb;--blog-primary-dark:#1e40af;--blog-dark:#1e293b;--blog-text:#475569;--blog-text-light:#64748b;--blog-border:#e2e8f0;--blog-bg:#f8fafc;background:var(--blog-bg);min-height:100vh}.blog-list-hero{border-bottom:1px solid var(--blog-border);text-align:center;background:#fff;padding:48px 24px}.blog-list-hero h1{color:var(--blog-dark);margin:0 0 16px;font-size:clamp(36px,5vw,56px);font-weight:800;line-height:1.1}.blog-list-hero>p{color:var(--blog-text);max-width:600px;margin:0 auto 32px;font-size:1.125rem;line-height:1.6}.blog-filter{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.filter-btn{color:var(--blog-text);border:1px solid var(--blog-border);cursor:pointer;background:#fff;border-radius:100px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.filter-btn:hover{border-color:var(--blog-primary);color:var(--blog-primary)}.filter-btn.active{background:var(--blog-primary);border-color:var(--blog-primary);color:#fff}.filter-count{background:#00000014;border-radius:100px;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 6px;font-size:12px;font-weight:700;display:inline-flex}.filter-btn.active .filter-count{background:#ffffff40}.blog-list-posts{padding:48px 24px 80px}.posts-container{max-width:1200px;margin:0 auto}.filter-header{margin-bottom:32px}.filter-header h2{color:var(--blog-dark);align-items:center;gap:12px;margin:0;font-size:1.5rem;font-weight:700;display:flex}.result-count{color:var(--blog-text-light);font-size:1rem;font-weight:400}.posts-grid{grid-template-columns:repeat(3,1fr);gap:32px;display:grid}.post-card.featured{grid-column:1/-1;grid-template-columns:1.2fr 1fr;gap:0;display:grid}.post-card.featured .post-image{height:100%;min-height:320px}.post-card.featured .post-content{flex-direction:column;justify-content:center;padding:40px;display:flex}.post-card.featured h2{font-size:1.75rem}.post-card.featured .post-excerpt{-webkit-line-clamp:4}.post-card{border:1px solid var(--blog-border);background:#fff;border-radius:16px;text-decoration:none;transition:all .2s;overflow:hidden;box-shadow:0 2px 8px #0000000a}.post-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000014}.post-image{height:180px;overflow:hidden}.post-image img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.post-card:hover .post-image img{transform:scale(1.05)}.post-content{padding:24px}.post-category{text-transform:uppercase;letter-spacing:.5px;color:var(--blog-primary);background:#2563eb14;border-radius:4px;margin-bottom:12px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-block}.post-card h2{color:var(--blog-dark);margin:0 0 12px;font-size:1.25rem;font-weight:700;line-height:1.4}.post-excerpt{color:var(--blog-text);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0 0 16px;font-size:.95rem;line-height:1.6;display:-webkit-box;overflow:hidden}.post-meta{color:var(--blog-text-light);align-items:center;gap:12px;font-size:13px;display:flex}.post-date:after{content:"•";color:var(--blog-border);margin-left:12px}.no-posts{text-align:center;border:1px solid var(--blog-border);background:#fff;border-radius:16px;padding:80px 24px}.no-posts p{color:var(--blog-text-light);margin:0 0 24px;font-size:1.125rem}.back-to-all{background:var(--blog-primary);color:#fff;border-radius:8px;padding:12px 24px;font-size:15px;font-weight:600;text-decoration:none;transition:background .2s;display:inline-block}.back-to-all:hover{background:var(--blog-primary-dark)}@media (max-width:1024px){.posts-grid{grid-template-columns:repeat(2,1fr);gap:24px}.post-card.featured{grid-template-columns:1fr}.post-card.featured .post-image{min-height:240px}.post-card.featured .post-content{padding:24px}}@media (max-width:640px){.blog-list-hero{padding:32px 20px}.blog-list-hero h1{font-size:32px}.blog-filter{gap:8px}.filter-btn{padding:8px 16px;font-size:13px}.blog-list-posts{padding:24px 16px 60px}.posts-grid{grid-template-columns:1fr;gap:20px}.post-card.featured h2{font-size:1.25rem}.post-image{height:160px}.post-content{padding:20px}}
