/* ========================================
   响应式设计补充样式
   ======================================== */

/* 通用优化 */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* 头像图片响应式 */
.header-img {
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
}

/* 平板端 (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .header-img {
        max-width: 80px;
        max-height: 80px;
    }
    
    /* 左侧目录在平板上隐藏 */
    .left-toc-container {
        display: none !important;
    }
}

/* 手机端 (< 768px) */
@media screen and (max-width: 768px) {
    .header-img {
        max-width: 60px;
        max-height: 60px;
    }
    
    .header-content {
        flex: 1;
    }
    
    /* 隐藏左侧目录 */
    .left-toc-container {
        display: none !important;
    }
    
    /* 优化按钮组 */
    .progress-wrap,
    .return-to-last-progress-wrap {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* 暗黑模式按钮 */
    .darkmode-toggle {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* 优化文章头部 */
    .post-head {
        padding: 16px 0;
    }
    
    .post-head-wrapper-left,
    .post-head-wrapper-center {
        padding: 12px 0;
    }
    
    /* 文章标题 */
    .post-title-main {
        font-size: 1.6rem !important;
        line-height: 1.4;
    }
    
    /* 文章元信息 */
    .post-head-meta,
    .post-head-meta-left,
    .post-head-meta-center {
        font-size: 0.85rem !important;
        flex-wrap: wrap;
    }
    
    /* 标签云 */
    .tag-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .tag-cloud a {
        font-size: 0.9rem !important;
        padding: 4px 10px !important;
    }
    
    /* 归档列表 */
    .archive-list {
        padding-left: 0;
    }
    
    .archive-list li {
        padding: 8px 0;
    }
    
    /* 分页 */
    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .pagination a,
    .pagination span {
        padding: 6px 12px !important;
        font-size: 0.9rem !important;
    }
}

/* 小屏手机 (< 480px) */
@media screen and (max-width: 480px) {
    .header-img {
        max-width: 50px;
        max-height: 50px;
    }
    
    /* 进一步缩小按钮 */
    .progress-wrap,
    .return-to-last-progress-wrap {
        width: 36px !important;
        height: 36px !important;
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .darkmode-toggle {
        width: 36px !important;
        height: 36px !important;
        left: 15px !important;
        bottom: 15px !important;
    }
    
    /* 文章标题 */
    .post-title-main {
        font-size: 1.4rem !important;
    }
    
    /* 导航菜单换行优化 */
    .nav {
        gap: 8px;
    }
    
    .nav li {
        margin-right: 0 !important;
    }
    
    /* 标签云 */
    .tag-cloud a {
        font-size: 0.85rem !important;
        padding: 3px 8px !important;
    }
    
    /* 表格横向滚动 */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* 代码块优化 */
    pre {
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    code {
        word-break: break-all;
    }
}

/* 横屏优化 */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .paper {
        padding: 2vw !important;
    }
    
    .paper-main,
    .index-main {
        padding: 16px 4vw 0px !important;
    }
    
    .post-title-main {
        font-size: 1.3rem !important;
    }
    
    /* 减小按钮尺寸避免遮挡 */
    .progress-wrap,
    .return-to-last-progress-wrap,
    .darkmode-toggle {
        width: 35px !important;
        height: 35px !important;
    }
}

/* 超小屏设备 (< 360px) */
@media screen and (max-width: 360px) {
    body {
        font-size: 13px;
    }
    
    .paper {
        padding: 0.5vw !important;
    }
    
    .paper-main,
    .index-main {
        padding: 12px 6vw 0px !important;
        border-radius: 0 !important;
    }
    
    .logo {
        font-size: 1.2rem !important;
    }
    
    .index-logo {
        font-size: 1.6rem !important;
    }
    
    .nav li {
        font-size: 0.85rem !important;
    }
    
    .post-title-main {
        font-size: 1.2rem !important;
    }
}

/* 打印样式优化 */
@media print {
    .header-img {
        max-width: 60px !important;
        max-height: 60px !important;
    }
    
    /* 隐藏不需要打印的元素 */
    .progress-wrap,
    .return-to-last-progress-wrap,
    .darkmode-toggle,
    .left-toc-container,
    .nav {
        display: none !important;
    }
    
    .paper,
    .paper-main {
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}