/**
 * BCAI Theme - 核心CSS框架
 * 包含响应式布局、Core Web Vitals优化、基础样式
 */

/* ====================================================
 * 1. CSS变量定义
 * ==================================================== */
:root {
    /* 主色调 */
    --bcai-primary: #2C5282;
    --bcai-primary-dark: #1A365D;
    --bcai-primary-light: #3182CE;
    
    /* 辅助色 */
    --bcai-secondary: #FFD700;
    --bcai-secondary-dark: #E6C200;
    
    /* 中性色 */
    --bcai-text: #333333;
    --bcai-text-light: #666666;
    --bcai-text-lighter: #999999;
    --bcai-bg: #FFFFFF;
    --bcai-bg-light: #F7FAFC;
    --bcai-bg-dark: #1A202C;
    --bcai-border: #E2E8F0;
    
    /* 间距 */
    --bcai-spacing-xs: 4px;
    --bcai-spacing-sm: 8px;
    --bcai-spacing-md: 16px;
    --bcai-spacing-lg: 32px;
    --bcai-spacing-xl: 64px;
    
    /* 字体 */
    --bcai-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --bcai-font-serif: "Georgia", "Times New Roman", serif;
    --bcai-font-mono: "Courier New", monospace;
    
    /* 过渡 */
    --bcai-transition: all 0.3s ease;
    
    /* 阴影 */
    --bcai-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --bcai-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --bcai-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* ====================================================
 * 2. 重置与基础样式
 * ==================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--bcai-font-sans);
    color: var(--bcai-text);
    line-height: 1.6;
    background-color: var(--bcai-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--bcai-primary);
    text-decoration: none;
    transition: var(--bcai-transition);
}

a:hover {
    color: var(--bcai-primary-dark);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    /* CLS优化：确保图片有宽高属性 */
    width: auto;
}

/* 确保所有媒体元素有宽高属性（CLS优化） */
img, svg, video, canvas, iframe {
    display: block;
}

/* 懒加载图片样式 */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* ====================================================
 * 3. 排版
 * ==================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--bcai-spacing-md);
    color: var(--bcai-text);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--bcai-spacing-md);
}

ul, ol {
    margin-bottom: var(--bcai-spacing-md);
    padding-left: var(--bcai-spacing-lg);
}

/* ====================================================
 * 4. 容器与网格系统
 * ==================================================== */
.bcai-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--bcai-spacing-md);
}

.bcai-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -var(--bcai-spacing-md);
}

.bcai-col {
    flex: 1;
    padding: 0 var(--bcai-spacing-md);
}

/* 响应式网格 */
.bcai-grid {
    display: grid;
    gap: var(--bcai-spacing-lg);
}

.bcai-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.bcai-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.bcai-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ====================================================
 * 5. 主内容区域
 * ==================================================== */
.bcai-main {
    min-height: calc(100vh - 200px);
    padding: var(--bcai-spacing-lg) 0;
}

/* ====================================================
 * 6. 博客列表样式
 * ==================================================== */
.bcai-blog-list {
    padding: var(--bcai-spacing-xl) 0;
}

.bcai-page-title {
    text-align: center;
    margin-bottom: var(--bcai-spacing-xl);
}

.bcai-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--bcai-spacing-lg);
    margin-bottom: var(--bcai-spacing-xl);
}

.bcai-post-card {
    background: var(--bcai-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--bcai-shadow-sm);
    transition: var(--bcai-transition);
}

.bcai-post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--bcai-shadow-md);
}

.bcai-post-thumb {
    display: block;
    overflow: hidden;
}

.bcai-post-thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s;
}

.bcai-post-card:hover .bcai-post-thumb img {
    transform: scale(1.05);
}

.bcai-post-meta {
    padding: var(--bcai-spacing-sm) var(--bcai-spacing-md);
    font-size: 0.85rem;
    color: var(--bcai-text-light);
}

.bcai-post-category {
    color: var(--bcai-primary);
    font-weight: 600;
}

.bcai-post-title {
    padding: 0 var(--bcai-spacing-md);
    font-size: 1.25rem;
}

.bcai-post-title a {
    color: var(--bcai-text);
}

.bcai-post-title a:hover {
    color: var(--bcai-primary);
}

.bcai-post-excerpt {
    padding: 0 var(--bcai-spacing-md);
    color: var(--bcai-text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

.bcai-read-more {
    display: inline-block;
    padding: var(--bcai-spacing-md);
    font-weight: 600;
    color: var(--bcai-primary);
}

.bcai-no-posts {
    text-align: center;
    padding: var(--bcai-spacing-xl);
    color: var(--bcai-text-light);
}

/* ====================================================
 * 7. 分页
 * ==================================================== */
.bcai-pagination {
    display: flex;
    justify-content: center;
    gap: var(--bcai-spacing-sm);
    padding: var(--bcai-spacing-lg) 0;
}

.bcai-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--bcai-bg-light);
    color: var(--bcai-text);
    font-weight: 600;
    transition: var(--bcai-transition);
}

.bcai-pagination .page-numbers:hover,
.bcai-pagination .page-numbers.current {
    background: var(--bcai-primary);
    color: white;
    text-decoration: none;
}

/* ====================================================
 * 8. 页面内容样式
 * ==================================================== */
.bcai-page-content {
    padding: var(--bcai-spacing-xl) 0;
}

.bcai-page-article {
    max-width: 800px;
    margin: 0 auto;
}

.bcai-page-header {
    text-align: center;
    margin-bottom: var(--bcai-spacing-xl);
}

.bcai-page-body {
    line-height: 1.8;
}

.bcai-page-body img {
    border-radius: 8px;
    margin: var(--bcai-spacing-lg) 0;
}

/* ====================================================
 * 9. 单篇文章样式
 * ==================================================== */
.bcai-single-post {
    padding: var(--bcai-spacing-xl) 0;
}

.bcai-post-article {
    max-width: 800px;
    margin: 0 auto;
}

.bcai-post-header {
    margin-bottom: var(--bcai-spacing-xl);
    text-align: center;
}

.bcai-post-meta-top {
    display: flex;
    justify-content: center;
    gap: var(--bcai-spacing-md);
    font-size: 0.9rem;
    color: var(--bcai-text-light);
    margin-bottom: var(--bcai-spacing-md);
}

.bcai-post-featured-image {
    margin-bottom: var(--bcai-spacing-lg);
    border-radius: 8px;
    overflow: hidden;
}

.bcai-post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.bcai-post-body {
    line-height: 1.8;
    font-size: 1.1rem;
}

.bcai-post-body p {
    margin-bottom: var(--bcai-spacing-lg);
}

.bcai-post-body h2,
.bcai-post-body h3,
.bcai-post-body h4 {
    margin-top: var(--bcai-spacing-xl);
}

.bcai-post-body img {
    border-radius: 8px;
    box-shadow: var(--bcai-shadow-md);
    margin: var(--bcai-spacing-lg) 0;
}

.bcai-post-body blockquote {
    border-left: 4px solid var(--bcai-primary);
    padding: var(--bcai-spacing-md) var(--bcai-spacing-lg);
    background: var(--bcai-bg-light);
    margin: var(--bcai-spacing-lg) 0;
    border-radius: 0 8px 8px 0;
}

.bcai-post-body pre {
    background: var(--bcai-bg-dark);
    color: white;
    padding: var(--bcai-spacing-lg);
    border-radius: 8px;
    overflow-x: auto;
    margin: var(--bcai-spacing-lg) 0;
}

.bcai-post-footer {
    margin-top: var(--bcai-spacing-xl);
    padding-top: var(--bcai-spacing-lg);
    border-top: 1px solid var(--bcai-border);
}

.bcai-post-tags {
    margin-bottom: var(--bcai-spacing-lg);
}

/* 阅读进度条 */
.bcai-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 9999;
}

.bcai-reading-progress .bcai-progress-bar {
    height: 100%;
    background: var(--bcai-primary);
    width: 0%;
    transition: width 0.1s;
}

/* ====================================================
 * 10. 响应式断点
 * ==================================================== */

/* 移动设备：< 768px */
@media (max-width: 767px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    .bcai-container {
        padding: 0 var(--bcai-spacing-md);
    }
    
    .bcai-grid-2,
    .bcai-grid-3,
    .bcai-grid-4 {
        grid-template-columns: 1fr;
    }
    
    .bcai-post-grid {
        grid-template-columns: 1fr;
    }
    
    .bcai-post-meta-top {
        flex-direction: column;
        gap: var(--bcai-spacing-xs);
    }
}

/* 平板：768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .bcai-grid-3,
    .bcai-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 桌面：> 1024px */
@media (min-width: 1025px) {
    /* 桌面端样式 */
}

/* ====================================================
 * 11. Core Web Vitals 优化
 * ==================================================== */

/* LCP优化：关键CSS内联（在head中） */
/* FID优化：避免长任务 */
/* CLS优化：所有媒体元素设置宽高属性（已在基础样式中处理） */

/* 图片懒加载 */
.bcai-lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.bcai-lazy.loaded {
    opacity: 1;
}

/* 骨架屏（加载占位） */
.bcai-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: bcai-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes bcai-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ====================================================
 * 12. 工具类
 * ==================================================== */
.bcai-text-center { text-align: center; }
.bcai-text-left { text-align: left; }
.bcai-text-right { text-align: right; }

.bcai-mt-sm { margin-top: var(--bcai-spacing-sm); }
.bcai-mt-md { margin-top: var(--bcai-spacing-md); }
.bcai-mt-lg { margin-top: var(--bcai-spacing-lg); }
.bcai-mt-xl { margin-top: var(--bcai-spacing-xl); }

.bcai-mb-sm { margin-bottom: var(--bcai-spacing-sm); }
.bcai-mb-md { margin-bottom: var(--bcai-spacing-md); }
.bcai-mb-lg { margin-bottom: var(--bcai-spacing-lg); }
.bcai-mb-xl { margin-bottom: var(--bcai-spacing-xl); }

.bcai-pt-sm { padding-top: var(--bcai-spacing-sm); }
.bcai-pt-md { padding-top: var(--bcai-spacing-md); }
.bcai-pt-lg { padding-top: var(--bcai-spacing-lg); }
.bcai-pt-xl { padding-top: var(--bcai-spacing-xl); }

.bcai-pb-sm { padding-bottom: var(--bcai-spacing-sm); }
.bcai-pb-md { padding-bottom: var(--bcai-spacing-md); }
.bcai-pb-lg { padding-bottom: var(--bcai-spacing-lg); }
.bcai-pb-xl { padding-bottom: var(--bcai-spacing-xl); }