.blog-page{background-color:var(--content-bg);max-width:960px;color:var(--text-color);font-family:var(--font-default);margin:0 auto;padding:2rem 1rem}.blog-hero{text-align:center;margin-bottom:3rem}.blog-hero h1{color:var(--primary-color);margin-bottom:.5rem;font-size:2.5rem}.blog-hero p{color:var(--subtext-color);font-size:1.1rem}.blog-list{flex-direction:column;gap:1.8rem;display:flex}.blog-post-link{background-color:var(--card-bg);color:inherit;cursor:pointer;border-radius:.75rem;gap:1.25rem;padding:1rem 1.25rem;text-decoration:none;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 4px 12px #0000000f}.blog-post-link:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 8px 20px #0000001a}.blog-post-link:hover .blog-thumbnail{transform:scale(1.05)}.blog-post{align-items:center;gap:1.25rem;width:100%;display:flex}.thumbnail-link{border-radius:6px;flex-shrink:0;width:150px;height:auto;overflow:hidden}.thumbnail-link img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;transition:transform .3s;display:block}.blog-post-content{flex-direction:column;flex-grow:1;justify-content:center;width:100%;display:flex}.blog-title{color:var(--heading-color);margin:0 0 .4rem;font-size:1.4rem;font-weight:700;text-decoration:none}.blog-meta{color:var(--subtext-color);align-items:center;gap:1rem;margin-top:.25rem;font-size:.85rem;display:flex}.blog-meta .meta-item{align-items:center;gap:.4rem;display:flex}.blog-meta .icon{vertical-align:middle;width:1em;height:1em;color:var(--subtext-color);font-size:1rem}.pagination{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:2rem;display:flex}.pagination-btn{background-color:var(--card-bg);border:1.5px solid var(--primary-color);cursor:pointer;color:var(--primary-color);border-radius:6px;padding:.4rem .85rem;font-size:1rem;transition:background-color .3s,color .3s}.pagination-btn:hover:not(:disabled){background-color:var(--primary-color);color:#fff}.pagination-btn:disabled{cursor:not-allowed;opacity:.5}.pagination-btn.active{background-color:var(--primary-color);color:#fff;cursor:default;font-weight:700}.pagination-btn:focus,.blog-post-link:focus{outline:2px solid var(--primary-color);outline-offset:2px}@media screen and (max-width:768px){.blog-post{flex-direction:column;align-items:flex-start}.thumbnail-link{width:100%;height:180px;margin-bottom:.75rem}.thumbnail-link img{-o-object-fit:cover;object-fit:cover;border-radius:6px;width:100%;height:100%}.blog-title{font-size:1.25rem}}