.posts-page{min-height:100vh;padding:2rem 0 4rem}.page-header{text-align:center;margin-bottom:3rem;padding:2rem 0}.page-title{font-size:2.5rem;font-weight:700;color:var(--primary);margin:0 0 1rem;line-height:1.2}.page-description{font-size:1.125rem;color:var(--secondary);max-width:600px;margin:0 auto;line-height:1.6}.page-content{margin-bottom:3rem;color:var(--secondary);line-height:1.6}.posts-page .articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0 auto 3rem;max-width:1200px}.posts-page .article-card{background:var(--theme);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%;position:relative;box-shadow:0 4px 12px rgba(0,0,0,5%)}.posts-page .article-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(59,130,246,2%) 0%,rgba(147,51,234,2%) 100%);opacity:0;transition:opacity .3s ease;z-index:1}.posts-page .article-card:hover::before{opacity:1}.posts-page .article-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.15);border-color:rgba(59,130,246,.3)}[data-theme=dark] .posts-page .article-card{box-shadow:0 4px 12px rgba(0,0,0,.2)}[data-theme=dark] .posts-page .article-card:hover{box-shadow:0 20px 40px rgba(0,0,0,.4)}.posts-page .article-image{height:150px;overflow:hidden;position:relative;background:var(--code-bg)}.posts-page .article-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.4,0,.2,1)}.posts-page .article-card:hover .article-image img{transform:scale(1.1)}.posts-page .article-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(59,130,246,.1) 0%,rgba(147,51,234,.1) 100%)}.posts-page .placeholder-content{text-align:center}.posts-page .article-icon{font-size:3rem;opacity:.6}.posts-page .article-content{padding:1.5rem;display:flex;flex-direction:column;flex-grow:1;position:relative;z-index:2}.posts-page .article-title{font-size:1.25rem;font-weight:700;line-height:1.3;margin:0 0 1rem;color:var(--primary);transition:color .2s ease}.posts-page .article-card:hover .article-title{color:#3b82f6}.posts-page .article-meta{display:flex;gap:1rem;font-size:.8rem;color:var(--secondary);flex-wrap:wrap;margin-top:auto}.posts-page .article-date,.posts-page .article-read-time{display:flex;align-items:center;gap:.375rem;font-weight:500}.posts-page .featured-article{border:2px solid rgba(59,130,246,.3);position:relative}.posts-page .featured-article::after{content:'✨ Featured';position:absolute;top:1rem;right:1rem;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;padding:.375rem .875rem;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 4px 12px rgba(59,130,246,.4);z-index:3}.posts-page .featured-article .article-title{background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.375rem}.posts-page .article-card::after{content:'';position:absolute;bottom:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);transition:width .5s ease;border-radius:0 0 16px 16px;z-index:2}.posts-page .article-card:hover::after{width:100%}.page-footer{margin-top:3rem;text-align:center}.pagination{display:inline-flex;gap:.5rem;align-items:center;justify-content:center;flex-wrap:wrap}.page-item{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:.5rem 1rem;border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--primary);font-weight:500;transition:all .2s ease}.page-item:hover{background:var(--primary);color:var(--theme);transform:translateY(-1px)}.page-item.current{background:var(--primary);color:var(--theme);border-color:var(--primary)}.prev,.next{text-decoration:none}@media(max-width:768px){.posts-page .articles-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}.posts-page .article-image{height:130px}.posts-page .article-content{padding:1.25rem}.posts-page .article-title{font-size:1.125rem}.page-title{font-size:2rem}}@media(max-width:480px){.posts-page .articles-grid{grid-template-columns:1fr;gap:1rem}.posts-page .article-image{height:120px}.posts-page .article-content{padding:1rem}.posts-page .article-title{font-size:1rem}.page-title{font-size:1.75rem}.pagination{gap:.25rem}.page-item{min-width:35px;height:35px;font-size:.875rem}}