/* =============================================
   移动端布局优化 - 遵循 WCAG 2.1 Reflow 标准
   确保内容在 320 CSS pixels 宽度下不溢出
   ============================================= */

/* 全局防止溢出 - 最重要 */
html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    /* 防止长单词/URL 导致溢出 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* 所有元素使用 border-box */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 图片和媒体元素自适应 */
img, video, iframe, embed, object, canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 表格溢出处理 */
table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 代码块溢出处理 */
pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 长 URL 和文本处理 */
a, span, p, li, td, th {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* =============================================
   首页动态内容溢出修复 - 强制约束（仅移动端）
   ============================================= */
@media (max-width: 768px) {
    .main-wrapper {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        box-sizing: border-box;
    }
}

/* PC端保持原有布局 */
@media (min-width: 769px) {
    .main-wrapper {
        overflow: visible;
    }
}

.content-section {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* 防止所有子元素溢出 */
.content-section > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* =============================================
   移动端通用修复 - 防止元素溢出
   ============================================= */
@media (max-width: 768px) {
    /* 全局强制约束 */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* 首页图书网格 - 强制单列，防止溢出 */
    .book-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 12px;
        width: 100%;
        max-width: 100%;
    }
    
    .book-grid-item {
        display: flex;
        gap: 12px;
        padding: 12px;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .book-grid-item .cover {
        width: 60px;
        min-width: 60px;
        height: 80px;
        flex-shrink: 0;
    }
    
    .book-grid-item .info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    
    .book-grid-item .title,
    .book-grid-item .author,
    .book-grid-item .meta {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 经典完本 */
    .complete-books {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 12px;
        width: 100%;
        max-width: 100%;
    }
    
    .complete-book-item {
        display: flex;
        gap: 12px;
        padding: 12px;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .complete-book-item .cover {
        width: 55px;
        min-width: 55px;
        height: 73px;
        flex-shrink: 0;
    }
    
    .complete-book-item .info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    
    /* 最新上传列表 */
    .new-books-container {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    
    .new-books-page {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .new-book-item {
        display: flex;
        gap: 12px;
        padding: 12px;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .new-book-item .cover {
        width: 55px;
        min-width: 55px;
        height: 73px;
        flex-shrink: 0;
    }
    
    .new-book-item .info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    
    /* 特色图书 */
    .featured-book {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        padding-bottom: 16px;
        box-sizing: border-box;
    }
    
    .featured-book .cover {
        width: 80px;
        height: 107px;
    }
    
    .featured-book .info {
        min-width: 0;
        overflow: hidden;
    }
    
    .featured-book .title,
    .featured-book .author {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 横向滚动图书 */
    .book-scroll-container {
        width: calc(100% + 24px);
        margin: 0 -12px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .book-scroll-list {
        display: flex;
        gap: 12px;
        width: max-content;
    }
    
    .book-scroll-item {
        width: 80px;
        flex-shrink: 0;
    }
    
    .book-scroll-item .cover {
        width: 80px;
        height: 107px;
    }
    
    .book-scroll-item .title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 内容区块 */
    .content-section {
        width: 100%;
        max-width: 100%;
        padding: 14px;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    /* 主容器 */
    .main-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        box-sizing: border-box;
    }
    
    /* =============================================
       图书详情页移动端优化
       ============================================= */
    .book-header {
        display: grid;
        grid-template-columns: 100px 1fr !important;
        gap: 12px;
        padding: 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    .book-cover-large {
        width: 100px !important;
        height: 140px !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .book-header-info {
        min-width: 0;
        overflow: hidden;
    }
    
    .book-header-info h1 {
        font-size: 1rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .book-header-info .author,
    .book-header-info .category {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 操作按钮 - 只显示图标，横向排列 */
    .book-actions {
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin-top: 12px;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    .book-actions .btn {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }
    
    .book-actions .btn svg {
        width: 20px;
        height: 20px;
    }
    
    .book-actions .btn-read {
        flex: 1.5;
    }
    
    /* 章节列表 */
    .chapter-list {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    
    .chapter-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 卡片去边框 */
    .book-rating-section,
    .book-intro,
    .book-chapters {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

/* =============================================
   320px 最小宽度适配 (WCAG Reflow 标准)
   ============================================= */
@media (max-width: 360px) {
    html {
        font-size: 12px;
    }
    
    body {
        padding: 0;
        margin: 0;
    }
    
    /* 主容器 */
    .main-wrapper,
    .page-container {
        padding: 8px;
        width: 100%;
        max-width: 100vw;
    }
    
    /* 轮播图 */
    .carousel {
        aspect-ratio: 4/3;
    }
    
    .carousel-item .carousel-content {
        padding: 10px;
    }
    
    .carousel-item h3 {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }
    
    .carousel-item p {
        display: none;
    }
    
    .carousel-item .btn-read {
        padding: 4px 10px;
        font-size: 0.7rem;
    }
    
    .carousel-control {
        width: 24px;
        height: 24px;
    }
    
    .carousel-control svg {
        width: 12px;
        height: 12px;
    }
    
    /* 内容区块 */
    .content-section {
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    
    .section-header {
        margin-bottom: 10px;
    }
    
    .section-title {
        font-size: 0.9rem;
    }
    
    /* 特色图书 */
    .featured-book {
        grid-template-columns: 70px 1fr;
        gap: 8px;
    }
    
    .featured-book .cover {
        width: 70px;
        height: 94px;
    }
    
    .featured-book .title {
        font-size: 0.85rem;
    }
    
    .featured-book .author {
        font-size: 0.7rem;
    }
    
    .featured-book .tags {
        display: none;
    }
    
    .featured-book .desc {
        font-size: 0.7rem;
        -webkit-line-clamp: 2;
    }
    
    /* 横向滚动 */
    .book-scroll-container {
        margin: 0 -10px;
        padding: 0 10px;
    }
    
    .book-scroll-item {
        width: 65px;
    }
    
    .book-scroll-item .cover {
        width: 65px;
        height: 87px;
    }
    
    .book-scroll-item .title {
        font-size: 0.65rem;
    }
    
    /* 图书网格 */
    .book-grid {
        gap: 8px;
    }
    
    .book-grid-item {
        padding: 8px;
        gap: 8px;
    }
    
    .book-grid-item .cover {
        width: 45px;
        height: 60px;
    }
    
    .book-grid-item .title {
        font-size: 0.8rem;
    }
    
    .book-grid-item .author,
    .book-grid-item .desc {
        font-size: 0.7rem;
    }
    
    .book-grid-item .meta {
        font-size: 0.65rem;
    }
    
    /* 新书列表 */
    .new-books-container,
    .complete-books {
        gap: 8px;
    }
    
    .new-book-item,
    .complete-book-item {
        padding: 8px;
        gap: 8px;
    }
    
    .new-book-item .cover,
    .complete-book-item .cover {
        width: 45px;
        height: 60px;
    }
    
    .new-book-item .title,
    .complete-book-item .title {
        font-size: 0.8rem;
    }
    
    .new-book-item .desc,
    .complete-book-item .desc {
        font-size: 0.65rem;
        -webkit-line-clamp: 2;
    }
    
    /* 侧边栏 */
    .sidebar-card {
        border-radius: 10px;
    }
    
    .sidebar-card-header {
        padding: 10px;
    }
    
    .sidebar-card-header h3 {
        font-size: 0.85rem;
    }
    
    .category-grid {
        padding: 10px;
        gap: 6px;
    }
    
    .category-item {
        padding: 6px 8px;
        gap: 6px;
    }
    
    .category-icon {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }
    
    .category-name {
        font-size: 0.7rem;
    }
    
    .sidebar-rank-list {
        padding: 8px 10px;
    }
    
    .sidebar-rank-list li {
        padding: 6px 0;
        gap: 6px;
    }
    
    .sidebar-rank-list .rank-num {
        width: 16px;
        height: 16px;
        font-size: 0.65rem;
    }
    
    .sidebar-rank-list .book-title {
        font-size: 0.75rem;
    }
    
    /* 公告 */
    .announcement-list {
        padding: 10px;
    }
    
    .announcement-item {
        padding: 8px 0;
    }
    
    .announcement-title {
        font-size: 0.75rem;
    }
    
    .announcement-date {
        font-size: 0.65rem;
    }
}

/* =============================================
   375px 宽度适配 (iPhone SE, iPhone 6/7/8)
   ============================================= */
@media (max-width: 375px) and (min-width: 361px) {
    .main-wrapper {
        padding: 10px;
    }
    
    .carousel {
        aspect-ratio: 16/10;
    }
    
    .featured-book {
        grid-template-columns: 80px 1fr;
    }
    
    .featured-book .cover {
        width: 80px;
        height: 107px;
    }
    
    .book-scroll-item {
        width: 75px;
    }
    
    .book-scroll-item .cover {
        width: 75px;
        height: 100px;
    }
    
    .book-grid-item .cover {
        width: 50px;
        height: 67px;
    }
}

/* =============================================
   414px 宽度适配 (iPhone Plus, Android)
   ============================================= */
@media (max-width: 414px) and (min-width: 376px) {
    .main-wrapper {
        padding: 12px;
    }
    
    .carousel {
        aspect-ratio: 16/9;
    }
    
    .featured-book {
        grid-template-columns: 90px 1fr;
    }
    
    .featured-book .cover {
        width: 90px;
        height: 120px;
    }
    
    .book-scroll-item {
        width: 80px;
    }
    
    .book-scroll-item .cover {
        width: 80px;
        height: 107px;
    }
}

/* =============================================
   安全区域适配 (iPhone X+ 刘海屏)
   ============================================= */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    /* 底部导航适配 */
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* 页面底部留白 */
    .page-container {
        padding-bottom: calc(var(--navbar-height-mobile, 60px) + env(safe-area-inset-bottom));
    }
}

/* =============================================
   横屏模式优化
   ============================================= */
@media (max-height: 500px) and (orientation: landscape) {
    /* 横屏时减少垂直空间占用 */
    .carousel {
        aspect-ratio: 21/6;
    }
    
    .carousel-item .carousel-content {
        padding: 10px 20px;
    }
    
    .carousel-item h3 {
        font-size: 0.9rem;
    }
    
    .carousel-item p {
        display: none;
    }
    
    /* 减少间距 */
    .content-section {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .section-header {
        margin-bottom: 8px;
    }
}

/* =============================================
   触摸优化
   ============================================= */
@media (pointer: coarse) {
    /* 增大触摸目标 */
    .btn,
    .carousel-control,
    .category-item,
    .book-scroll-item,
    .book-grid-item {
        min-height: 44px;
    }
    
    /* 禁用 hover 效果（触摸设备上不需要） */
    .book-scroll-item:hover,
    .book-grid-item:hover,
    .category-item:hover {
        transform: none;
    }
    
    /* 横向滚动优化 */
    .book-scroll-container {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    
    .book-scroll-item {
        scroll-snap-align: start;
    }
}

/* =============================================
   打印优化
   ============================================= */
@media print {
    .carousel,
    .carousel-control,
    .carousel-indicators,
    .mobile-bottom-nav,
    .navbar {
        display: none !important;
    }
    
    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .main-wrapper {
        max-width: 100%;
        padding: 0;
    }
}

/* =============================================
   深色模式移动端适配
   ============================================= */
@media (max-width: 768px) {
    [data-theme="dark"] .content-section {
        background: #1a1a2e;
    }
    
    [data-theme="dark"] .book-grid-item {
        background: #252538;
    }
    
    [data-theme="dark"] .featured-book {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
}