/* ===== PAGE STYLES ===== */
.page-header { position: relative; padding: 10rem 0 6rem; text-align: center; margin-top: 40px; }
.page-header-content { max-width: 48rem; margin: 0 auto; }
.page-title { font-size: 2.5rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .page-title { font-size: 3rem; } }
@media (min-width: 1024px) { .page-title { font-size: 3.5rem; } }
.page-subtitle { font-size: 1.125rem; color: var(--color-muted-foreground); }
.page-header-wave, .post-header-wave, .archive-header-wave { position: absolute; bottom: 0; left: 0; right: 0; }
.page-header-wave svg, .post-header-wave svg, .archive-header-wave svg { width: 100%; height: auto; display: block; }
.page-body { padding: 4rem 0; }
.page-body-content { max-width: 48rem; margin: 0 auto; }
.page-body-content h2 { font-size: 1.875rem; margin: 2rem 0 1rem; color: var(--color-foreground); }
.page-body-content h3 { font-size: 1.5rem; margin: 1.5rem 0 0.75rem; }
.page-body-content p { margin-bottom: 1.5rem; line-height: 1.8; }
.page-body-content ul, .page-body-content ol { margin: 1.5rem 0; padding-left: 1.5rem; }
.page-body-content li { margin-bottom: 0.5rem; list-style: disc; }
.page-body-content ol li { list-style: decimal; }
.page-body-content img { border-radius: var(--radius-lg); margin: 2rem 0; }
.page-body-content blockquote { border-left: 4px solid var(--color-primary); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; color: var(--color-muted-foreground); }

/* ===== SINGLE POST ===== */
.post-header { position: relative; padding: 10rem 0 6rem; text-align: center; margin-top: 40px; }
.post-header-content { max-width: 48rem; margin: 0 auto; }
.post-meta { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.post-category { padding: 0.25rem 0.75rem; background: rgba(79, 195, 247, 0.1); color: var(--color-primary); border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 600; }
.post-date { color: var(--color-muted-foreground); font-size: 0.875rem; }
.post-title { font-size: 2rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .post-title { font-size: 2.5rem; } }
@media (min-width: 1024px) { .post-title { font-size: 3rem; } }
.post-excerpt { font-size: 1.125rem; color: var(--color-muted-foreground); }
.post-body { padding: 4rem 0; }
.post-body-wrapper { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .post-body-wrapper { grid-template-columns: 1fr 320px; } }
.post-body-content { max-width: none; }
.post-featured-image { margin-bottom: 2rem; border-radius: var(--radius-2xl); overflow: hidden; }
.post-featured-image img { width: 100%; height: auto; }
.post-body-content h2 { font-size: 1.875rem; margin: 2rem 0 1rem; }
.post-body-content h3 { font-size: 1.5rem; margin: 1.5rem 0 0.75rem; }
.post-body-content p { margin-bottom: 1.5rem; line-height: 1.8; }
.post-body-content ul, .post-body-content ol { margin: 1.5rem 0; padding-left: 1.5rem; }
.post-body-content li { margin-bottom: 0.5rem; list-style: disc; }
.post-body-content ol li { list-style: decimal; }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.tags-label { font-weight: 600; margin-right: 0.5rem; }
.post-tags a { padding: 0.25rem 0.75rem; background: var(--color-muted); border-radius: var(--radius-full); font-size: 0.875rem; transition: background 0.2s; }
.post-tags a:hover { background: rgba(79, 195, 247, 0.1); color: var(--color-primary); }
.post-navigation { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.post-navigation a { color: var(--color-primary); font-weight: 600; transition: color 0.2s; }
.post-navigation a:hover { color: var(--color-primary-dark); }
.post-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-card { background: var(--color-muted); border-radius: var(--radius-xl); padding: 1.5rem; }
.sidebar-card h3 { font-size: 1.125rem; margin-bottom: 0.75rem; }
.sidebar-card p { font-size: 0.875rem; color: var(--color-muted-foreground); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.sidebar-card p svg { width: 16px; height: 16px; color: var(--color-primary); }
.sidebar-card .btn { width: 100%; }

/* ===== ARCHIVE ===== */
.archive-header { position: relative; padding: 10rem 0 6rem; text-align: center; margin-top: 40px; }
.archive-header-content { max-width: 48rem; margin: 0 auto; }
.archive-title { font-size: 2.5rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .archive-title { font-size: 3rem; } }
.archive-description { font-size: 1.125rem; color: var(--color-muted-foreground); }
.archive-posts { padding: 4rem 0; }
.posts-grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: flex; flex-direction: column; overflow: hidden; }
.post-card-image { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.post-card:hover .post-card-image img { transform: scale(1.05); }
.post-card-content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.post-card-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.post-card-meta .category { font-size: 0.75rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; }
.post-card-meta .date { font-size: 0.75rem; color: var(--color-muted-foreground); }
.post-card-title { font-size: 1.25rem; margin-bottom: 0.5rem; line-height: 1.3; }
.post-card-title a { transition: color 0.2s; }
.post-card-title a:hover { color: var(--color-primary); }
.post-card-excerpt { font-size: 0.875rem; color: var(--color-muted-foreground); margin-bottom: 1rem; flex: 1; }
.post-card-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--color-primary); }
.post-card-link svg { width: 16px; height: 16px; transition: transform 0.2s; }
.post-card:hover .post-card-link svg { transform: translateX(4px); }
.archive-pagination { margin-top: 3rem; display: flex; justify-content: center; }
.archive-pagination .nav-links { display: flex; align-items: center; gap: 0.5rem; }
.archive-pagination a, .archive-pagination span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.75rem; border-radius: var(--radius-md); font-weight: 500; transition: all 0.2s; }
.archive-pagination a { background: var(--color-muted); }
.archive-pagination a:hover { background: rgba(79, 195, 247, 0.1); color: var(--color-primary); }
.archive-pagination .current { background: var(--color-primary); color: white; }
.no-posts { text-align: center; padding: 4rem 0; color: var(--color-muted-foreground); }