.blog-page{background:var(--color-background);min-height:100vh}.blog-hero{text-align:center;padding-top:calc(var(--space-5xl) + 60px)}.blog-hero h1{margin-bottom:var(--space-lg);font-size:clamp(2.5rem,5vw,3.5rem)}.blog-hero__subtitle{color:var(--color-text-secondary);max-width:600px;margin:0 auto;font-size:1.25rem}.blog-content{padding-top:var(--space-3xl)}.blog-grid{gap:var(--space-2xl);grid-template-columns:1fr;display:grid}@media (min-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}.blog-card{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:all var(--transition-base);overflow:hidden}.blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.blog-card__image{aspect-ratio:16/10;position:relative;overflow:hidden}.blog-card__image img{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-slow)}.blog-card:hover .blog-card__image img{transform:scale(1.05)}.blog-card__category{top:var(--space-md);left:var(--space-md);padding:var(--space-xs)var(--space-md);background:var(--color-lavender);color:#fff;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;position:absolute}.blog-card__content{padding:var(--space-xl)}.blog-card__meta{align-items:center;gap:var(--space-sm);color:var(--color-text-muted);margin-bottom:var(--space-md);font-size:.875rem;display:flex}.blog-card__title{margin-bottom:var(--space-md);color:var(--color-text-primary);font-size:1.5rem;font-weight:600;line-height:1.3}.blog-card__excerpt{color:var(--color-text-secondary);margin-bottom:var(--space-lg);font-size:.9375rem;line-height:1.6}.blog-card__link{align-items:center;gap:var(--space-sm);color:var(--color-lavender);transition:gap var(--transition-fast);font-weight:600;text-decoration:none;display:inline-flex}.blog-card__link:hover{gap:var(--space-md)}.blog-card__link svg{transition:transform var(--transition-fast)}.blog-card__link:hover svg{transform:translate(4px)}