.blog-page{padding:2rem 1rem;max-width:1280px;margin:0 auto}.blog-header{text-align:center;margin-bottom:2.5rem}.blog-header h1{font-size:2rem;font-weight:800;color:#0f172a;margin-bottom:.5rem}.blog-header p{color:#64748b;font-size:1.1rem;max-width:600px;margin:0 auto;line-height:1.6}.blog-categories{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem}.blog-category-tab{padding:.5rem 1rem;border:1px solid #E2E8F0;border-radius:2rem;background:#fff;color:#475569;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.blog-category-tab:hover{border-color:var(--color-brand-primary);color:var(--color-brand-primary)}.blog-category-tab.active{background:var(--color-brand-primary);color:#fff;border-color:var(--color-brand-primary)}.blog-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}.blog-card{background:#fff;border:1px solid #E2E8F0;border-radius:.75rem;overflow:hidden;transition:all .2s ease;text-decoration:none;color:inherit;display:flex;flex-direction:column}.blog-card-thumb-wrap{width:100%;aspect-ratio:16 / 9;background:#f1f5f9;overflow:hidden}.blog-card-thumb{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;transition:transform .3s ease}.blog-card:hover .blog-card-thumb{transform:scale(1.03)}.blog-card-body{padding:1.5rem;display:flex;flex-direction:column;flex:1}.blog-card:hover{border-color:var(--color-brand-primary);box-shadow:0 4px 12px var(--color-brand-primary-soft);transform:translateY(-2px)}.blog-card-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;flex-wrap:wrap}.blog-card-category{background:var(--color-brand-primary-soft);color:var(--color-brand-primary);padding:.25rem .625rem;border-radius:1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.blog-card-date,.blog-card-readtime{color:#94a3b8;font-size:.8rem}.blog-card h2{font-size:1.25rem;font-weight:700;color:#0f172a;margin-bottom:.5rem;line-height:1.4}.blog-card p{color:#64748b;font-size:.95rem;line-height:1.6;margin:0}.blog-card-tags{display:flex;gap:.375rem;flex-wrap:wrap;margin-top:.75rem}.blog-card-tag{color:#94a3b8;font-size:.75rem}.blog-empty{text-align:center;padding:3rem 1rem;color:#94a3b8}@media (min-width: 640px){.blog-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 768px){.blog-page{padding:3rem 1rem}.blog-header h1{font-size:2.5rem}}@media (min-width: 1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}