body{position:relative;background-color:var(--clr-bg);overflow-x:hidden}.blog-background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#070a13;z-index:-2}.light-mode .blog-background{background-color:#f1f5f9}.blog-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.blog-header{margin-bottom:3rem;text-align:center}.blog-title{font-size:2.5rem;margin-bottom:1rem;color:var(--clr-primary)}.blog-description{font-size:1.1rem;color:var(--clr-slate400);max-width:700px;margin:0 auto;line-height:1.6}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem}.blog-card{display:flex;flex-direction:column;background-color:#ffffff08;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px #0000001a;transition:transform .3s ease,box-shadow .3s ease;height:100%}.light-mode .blog-card{background-color:#ffffff4d}.blog-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000001a}.blog-card__image-container{position:relative;width:100%;padding-top:56.25%;overflow:hidden}.blog-card__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.blog-card:hover .blog-card__image{transform:scale(1.05)}.blog-card__content{padding:1.5rem;display:flex;flex-direction:column;flex-grow:1}.blog-card__date{font-size:.875rem;color:var(--clr-slate400);margin-bottom:.5rem}.blog-card__title{font-size:1.25rem;color:var(--clr-primary);margin-bottom:1rem;font-weight:600;line-height:1.4}.blog-card__excerpt{color:var(--clr-slate600);margin-bottom:1.5rem;line-height:1.6;flex-grow:1}.blog-card__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.blog-tag{background-color:#d4af3726;color:var(--clr-gold);padding:.25rem .75rem;border-radius:50px;font-size:.75rem;font-weight:500}.blog-card__btn{display:inline-block;padding:.5rem 1rem;background-color:var(--clr-primary);color:#fff;border-radius:4px;font-weight:500;text-decoration:none;transition:background-color .3s ease;text-align:center;border:none;cursor:pointer}.blog-card__btn:hover{background-color:var(--clr-secondary)}.blog-pagination{display:flex;justify-content:center;margin-top:3rem;gap:.5rem}.blog-pagination__btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;font-weight:500;cursor:pointer;transition:all .2s ease}.light-mode .blog-pagination__btn{background-color:#0000000d;border-color:#0000001a}.blog-pagination__btn.active{background-color:var(--clr-primary);color:#fff;border-color:var(--clr-primary)}.blog-pagination__btn:hover:not(.active):not(:disabled){background-color:#fff3}.light-mode .blog-pagination__btn:hover:not(.active):not(:disabled){background-color:#0000001a}.blog-pagination__btn:disabled{opacity:.5;cursor:not-allowed}.loading{text-align:center;padding:3rem 0;color:var(--clr-slate400);font-size:1.1rem}.loading i{margin-right:.5rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading i{animation-name:spin-loading}@keyframes spin-loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.no-posts{text-align:center;padding:3rem 0;color:var(--clr-slate400)}.blog-filters{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;justify-content:center}.blog-filter__btn{padding:.5rem 1rem;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;font-weight:500;cursor:pointer;transition:all .2s ease;color:var(--clr-white, #ffffff)}.light-mode .blog-filter__btn{background-color:#0000000d;border-color:#0000001a;color:var(--clr-slate800, #1e293b)}.blog-filter__btn.active{background-color:var(--clr-primary);color:#fff;border-color:var(--clr-primary)}.blog-filter__btn:hover:not(.active){background-color:#fff3}.light-mode .blog-filter__btn:hover:not(.active){background-color:#0000001a}@media (max-width: 768px){.blog-title{font-size:2rem}.blog-grid{grid-template-columns:1fr}}@media (max-width: 480px){.blog-filters{flex-direction:column;align-items:center}.blog-filter__btn{width:100%;text-align:center}}