/* ==========================================================================
   SpaceAI — Blog Styles
   ========================================================================== */
.blog-hero { padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-12); background: var(--color-bg-dark); text-align: center; color: var(--color-white); }
.blog-hero__title { font-size: var(--text-5xl); font-weight: 800; color: var(--color-white); margin-bottom: var(--space-4); }
.blog-hero__subtitle { font-size: var(--text-lg); color: rgba(255,255,255,0.7); }
.blog-grid { padding: var(--space-16) 0; }
.blog-grid__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.blog-card { background: var(--color-bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: all var(--transition-base); }
.blog-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.blog-card__image { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.blog-card:hover .blog-card__image img { transform: scale(1.05); }
.blog-card__body { padding: var(--space-6); }
.blog-card__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-xs); color: var(--color-text-secondary); }
.blog-card__category { background: rgba(59,94,255,0.1); color: var(--color-primary); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-weight: 600; font-size: var(--text-xs); }
.blog-card__title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-3); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__title a:hover { color: var(--color-primary); }
.blog-card__excerpt { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-4); }
.blog-card__author { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.blog-card__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.single-post-header { padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-8); background: var(--color-bg-dark); color: var(--color-white); text-align: center; }
.single-post-header__title { font-size: var(--text-5xl); font-weight: 800; color: var(--color-white); max-width: 800px; margin: 0 auto var(--space-6); }
.single-post-header__meta { display: flex; align-items: center; justify-content: center; gap: var(--space-4); color: rgba(255,255,255,0.6); font-size: var(--text-sm); }
.article-content { max-width: 720px; margin: 0 auto; padding: var(--space-12) var(--container-padding); font-size: var(--text-lg); line-height: 1.8; color: var(--color-text); }
.article-content h2 { font-size: var(--text-3xl); margin: var(--space-10) 0 var(--space-4); }
.article-content h3 { font-size: var(--text-2xl); margin: var(--space-8) 0 var(--space-3); }
.article-content p { margin-bottom: var(--space-6); }
.article-content img { border-radius: var(--radius-lg); margin: var(--space-8) 0; box-shadow: var(--shadow-lg); }
.article-content blockquote { border-left: 4px solid var(--color-primary); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; background: rgba(59,94,255,0.05); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; }
.article-content pre { background: var(--color-bg-dark); color: #e5e7eb; padding: var(--space-6); border-radius: var(--radius-lg); overflow-x: auto; margin: var(--space-6) 0; font-size: var(--text-sm); }
.article-content ul, .article-content ol { padding-left: var(--space-6); margin-bottom: var(--space-6); }
.article-content li { margin-bottom: var(--space-2); list-style: disc; }
.related-posts { padding: var(--space-16) 0; background: var(--color-bg); }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-12) 0; }
.pagination a, .pagination span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; border: 1px solid var(--color-border); }
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .current { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
@media (max-width: 1024px) { .blog-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .blog-grid__list { grid-template-columns: 1fr; } .blog-hero__title { font-size: var(--text-3xl); } .single-post-header__title { font-size: var(--text-3xl); } .article-content { font-size: var(--text-base); } }