.blog-page{padding:0 1rem 2rem}.page-header{text-align:center;padding:2rem 0;border-bottom:1px solid var(--color-border);margin-bottom:2rem}.page-title{font-size:1.75rem;font-weight:800;margin-bottom:.5rem}.page-description{color:var(--color-text-secondary);font-size:.875rem}.blog-grid{display:grid;grid-template-columns:1fr;gap:1rem}.blog-card{background:white;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:all .2s}.blog-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.blog-image{position:relative;width:100%;padding-bottom:56.25%;background:var(--color-bg-secondary)}.blog-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;opacity:.3}.blog-content{padding:1.5rem}.blog-categories{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.category-tag{display:inline-block;padding:.25rem .625rem;background:var(--color-bg-secondary);color:var(--color-text-secondary);border-radius:12px;font-size:.75rem;font-weight:500}.blog-title{font-size:1.25rem;font-weight:700;line-height:1.4;margin-bottom:.75rem;-webkit-line-clamp:2}.blog-excerpt,.blog-title{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.blog-excerpt{font-size:.875rem;line-height:1.6;color:var(--color-text-secondary);margin-bottom:1rem;-webkit-line-clamp:3}.blog-meta{justify-content:space-between;font-size:.8125rem;color:var(--color-text-secondary)}.author-info,.blog-meta{display:flex;align-items:center}.author-info{gap:.5rem}.author-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--color-bg-secondary)}.author-name{font-weight:500}.blog-date{color:var(--color-text-light)}@media (min-width:768px){.blog-page{padding:0 2rem 3rem}.page-header{padding:3rem 0}.page-title{font-size:2.25rem}.page-description{font-size:1rem}.blog-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}@media (min-width:1024px){.blog-page{max-width:1200px;margin:0 auto}.blog-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2rem}}