/* ============================================
   CONTENT - POSTS
   ============================================ */
.posts-wrapper { display: flex; flex-direction: column; gap: var(--pp-spacing); }
article { background: var(--pp-secondary-bg); border-radius: var(--pp-border-radius); overflow: hidden; transition: transform var(--pp-transition-fast), box-shadow var(--pp-transition-fast); }
article:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); }
.article-content { padding: var(--pp-spacing); }
.article-header { margin-bottom: 1.5em; }
.article-title { font-size: var(--pp-fs-2xl); margin: 0 0 0.5em; }
.article-title a { color: var(--pp-text-primary); }
.article-title a:hover { color: var(--pp-accent); text-decoration: none; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--pp-fs-sm); color: var(--pp-text-muted); }
.article-meta span { display: flex; align-items: center; gap: 0.35em; }
.article-meta a { color: var(--pp-text-muted); }
.article-meta a:hover { color: var(--pp-accent); }
.article-categories, .article-tags { margin-top: 1em; }
.article-categories a, .article-tags a { display: inline-block; padding: 0.25em 0.75em; margin: 0.25em; font-size: var(--pp-fs-xs); background: var(--pp-tertiary-bg); color: var(--pp-text-secondary); border-radius: 2em; transition: background var(--pp-transition-fast), color var(--pp-transition-fast); }
.article-categories a:hover, .article-tags a:hover { background: var(--pp-accent); color: var(--pp-primary-bg); text-decoration: none; }
.article-body { font-size: var(--pp-fs-base); line-height: var(--pp-lh-relaxed); }
.article-body p { margin-bottom: 1.5em; }
.article-more-link { margin-top: 1.5em; }
.article-more-link a { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.5em; background: var(--pp-accent); color: var(--pp-primary-bg); font-weight: 600; border-radius: var(--pp-border-radius); }
.article-more-link a:hover { background: var(--pp-accent-hover); color: var(--pp-primary-bg); text-decoration: none; }
.article-more-link a::after { content: "→"; }
.article-footer { margin-top: 2em; padding-top: 1.5em; border-top: 1px solid var(--pp-border); }

/* ============================================
   SINGLE POST
   ============================================ */
.single-post article { background: transparent; transform: none; box-shadow: none; }
.single-post article:hover { transform: none; box-shadow: none; }
.single-post .article-content { padding: 0; }
.single-post .article-header { text-align: center; margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid var(--pp-border); }
.single-post .article-title { font-size: var(--pp-fs-3xl); }
.single-post .article-meta { justify-content: center; }
.featured-image { margin: 2em 0; border-radius: var(--pp-border-radius); overflow: hidden; }
.featured-image img { width: 100%; }
.post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pp-spacing); margin: var(--pp-spacing) 0; padding: var(--pp-spacing); background: var(--pp-secondary-bg); border-radius: var(--pp-border-radius); }
.post-navigation a { display: block; padding: 1em; color: var(--pp-text-primary); transition: background var(--pp-transition-fast); }
.post-navigation a:hover { background: var(--pp-tertiary-bg); text-decoration: none; }
.post-navigation .nav-previous { text-align: left; }
.post-navigation .nav-next { text-align: right; grid-column: 2; }
.post-navigation span { display: block; font-size: var(--pp-fs-xs); color: var(--pp-accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5em; }
.post-navigation .post-title { font-size: var(--pp-fs-base); font-weight: 600; }

/* ============================================
   PAGINATION
   ============================================ */
.pagination, .posts-pagination, .comments-pagination { margin: var(--pp-spacing) 0; text-align: center; }
.pagination .nav-links, .posts-pagination .nav-links, .comments-pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; }
.pagination .page-numbers, .posts-pagination .page-numbers, .comments-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 1em; background: var(--pp-secondary-bg); color: var(--pp-text-secondary); border-radius: var(--pp-border-radius); transition: background var(--pp-transition-fast), color var(--pp-transition-fast); }
.pagination .page-numbers:hover, .pagination .page-numbers.current, .posts-pagination .page-numbers:hover, .posts-pagination .page-numbers.current { background: var(--pp-accent); color: var(--pp-primary-bg); text-decoration: none; }
.pagination .dots { display: inline-flex; align-items: center; padding: 0 0.5em; color: var(--pp-text-muted); }