.blog-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.blog-grid{display:grid;grid-template-columns:1fr;grid-gap:2rem;gap:2rem;margin-top:2rem}.blog-grid a{text-decoration:none;color:inherit;display:block}@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(--gradient-gray);border:1px solid #eeeeee;border-radius:24px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;transition:all .3s ease}.blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px rgba(154,154,154,.1),0 10px 10px -5px rgba(96,96,96,.04)}.blog-card-image{height:200px;background:linear-gradient(135deg,#eaeaea,#f3f3f3);overflow:hidden;position:relative}.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.blog-card:hover .blog-card-image img{transform:scale(1.05)}.blog-card-content{padding:1.5rem}.blog-card-title{font-size:1.3rem;font-weight:500;margin-bottom:.5rem;color:var(--dark-green);font-family:var(--font-primary)}.blog-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid #e5e7eb}.blog-card-date{font-family:var(--font-secondary);margin:0;font-size:15px;color:var(--gray-text);padding-top:10px}.blog-card-link{background:linear-gradient(135deg,#667eea,#764ba2);color:white;padding:.5rem 1rem;border-radius:6px;text-decoration:none;font-size:.875rem;font-weight:600;transition:all .3s ease;box-shadow:0 2px 4px rgba(0,0,0,.1)}.blog-card-link:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.15);color:white}.error-message{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:1rem;border-radius:8px;margin-bottom:1rem}.no-posts-message{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:#6b7280;font-size:1.125rem}.loading-skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width:640px){.blog-container{padding:1rem .5rem}.blog-card-content{padding:1rem}.blog-card-title{font-size:1.125rem}.blog-card-footer{flex-direction:column;gap:.75rem;align-items:stretch}.blog-card-link{text-align:center}}