/* ============================================
   响应式样式 - 适配移动端和Web端
   ============================================ */

/* 移动端优先（默认样式已在 common.css 和 main.css 中定义） */

/* 首页 index：大屏内容柱宽居中，避免过宽难读（与 public/h5web/index.html 中 .home_page_shell 一致） */
.home_page_shell {
    max-width: min(100%, 480px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .home_page_shell .home_container {
        max-width: 480px !important;
    }

    .home_page_shell .header-box {
        max-width: 100% !important;
        width: 100% !important;
        left: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home_page_shell .tabBar_box {
        max-width: 480px !important;
    }

    .home_page_shell .title-box {
        max-width: 100% !important;
    }

    .home_page_shell .book-box-3 {
        max-width: 100% !important;
    }

    /* Popular/Featured 横向滑动：与首页一致，两本等分内容区宽度 */
    .list_item_box--shelf .book-item {
        flex: 0 0 calc((100% - 10px) / 2) !important;
        width: calc((100% - 10px) / 2) !important;
        max-width: none !important;
    }
}

/* 平板和桌面端适配 */
@media screen and (min-width: 768px) {
    /* 调整根字体大小，桌面端使用固定大小 */
    html {
        font-size: 16px !important;
    }
    
    /* 移除 body 和 html 的最大宽度限制，但设置合理的最大宽度 */
    body, html {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* 页面内容容器 */
    .page-container,
    .home_container,
    .library_container,
    .reader_container,
    .topup-container,
    .svip-container,
    .personal_center,
    .category-container,
    .search-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    /* 头部样式调整 */
    .header-box {
        max-width: 1200px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    
    /* 底部标签栏 - 桌面端居中显示 */
    .tabBar_box {
        max-width: 1200px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    
    /* 书籍列表 - 桌面端显示更多列（首页横向 shelf 除外） */
    .list_item_box {
        padding: 0 24px;
    }
    
    .list_item_box:not(.list_item_box--shelf) .book-item {
        flex: 0 0 calc((100% - 4 * 12px) / 5); /* 桌面端显示5列 */
    }
    
    /* 标题区域 */
    .title-box {
        padding: 0 24px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* 书籍卡片列表 - 桌面端调整 */
    .book-box-3 {
        padding: 0 24px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 首页 New Releases 与 Popular 同宽，勿被 24px 拉散 */
    .home_page_shell .book-box-3--nr {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }
    
    /* 卡片样式 - 桌面端增加内边距 */
    .card {
        margin: 16px 24px;
        padding: 20px;
    }
    
    /* 按钮样式 - 桌面端增加悬停效果 */
    .btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }
    
    .btn:active {
        transform: translateY(0);
    }
    
    /* 输入框 - 桌面端增加最大宽度 */
    .input {
        max-width: 500px;
    }
}

/* 大屏幕桌面端（> 1024px） */
@media screen and (min-width: 1024px) {
    /* 进一步调整布局（首页横向 shelf 除外） */
    .list_item_box:not(.list_item_box--shelf) .book-item {
        flex: 0 0 calc((100% - 5 * 12px) / 6); /* 大屏幕显示6列 */
    }
    
    /* 增加内容区域的内边距 */
    .page-container,
    .home_container,
    .library_container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* 超大屏幕（> 1440px） */
@media screen and (min-width: 1440px) {
    /* 首页柱宽仍保持 480px（由 .home_page_shell 与 !important 规则覆盖） */
    /* 限制最大宽度，保持内容可读性 */
    .page-container,
    .home_container,
    .library_container,
    .reader_container,
    .topup-container,
    .svip-container,
    .personal_center,
    .category-container,
    .search-container {
        max-width: 1400px;
    }
    
    .header-box,
    .tabBar_box {
        max-width: 1400px;
    }
}

/* 阅读器页面特殊处理 - 桌面端保持单列布局 */
@media screen and (min-width: 768px) {
    /* 确保 body 和 html 背景色铺满，消除白条 */
    body.reader-body,
    html.reader-html {
        background-color: var(--bg-color, #F6F6F6) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
    }
    
    /* 确保阅读器容器居中但背景铺满 */
    .reader_container {
        max-width: 800px; /* 阅读器在桌面端保持较窄的宽度，便于阅读 */
        margin: 0 auto;
        width: 100%;
    }
    
    .reader_content {
        max-width: 800px;
        margin: 0 auto;
        padding-left: 40px;
        padding-right: 40px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* 修复头部布局 - 确保标题和按钮正确显示 */
    .reader_header {
        max-width: 800px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }
    
    /* 确保左侧标题区域正确显示 */
    .reader_header_left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: visible !important;
        max-width: none !important;
    }
    
    /* 确保标题文字可见 */
    .reader_header_left p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: auto !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* 确保返回按钮不压缩 */
    .reader_header_left img {
        flex-shrink: 0 !important;
        width: 24px !important;
        height: 24px !important;
    }
    
    /* 确保右侧按钮正确显示在最右边 */
    .reader_header_right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        margin-left: auto !important;
        width: auto !important;
        min-width: 24px !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .reader_header_right img {
        flex-shrink: 0 !important;
        width: 24px !important;
        height: 24px !important;
        display: block !important;
    }
    
    /* 确保底部菜单和卡片也居中 */
    .menu_bottom {
        max-width: 800px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
    }
    
    /* 确保底部菜单遮罩层铺满 */
    .menu_bottom_overlay {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* 确保解锁卡片也居中 */
    .unlock_card {
        max-width: 800px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    /* 移动端触摸设备保持原有样式 */
    .btn:active {
        transform: scale(0.98);
    }
}

/* 鼠标设备优化 */
@media (hover: hover) and (pointer: fine) {
    /* 桌面端鼠标悬停效果 */
    .book-item:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }
    
    .tabBar_item:hover {
        opacity: 0.8;
    }
    
    .btn:hover {
        box-shadow: 0 4px 12px rgba(106, 13, 173, 0.3);
    }
}

/* 滚动条样式 - 桌面端显示滚动条 */
@media screen and (min-width: 768px) {
    ::-webkit-scrollbar {
        display: block;
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: #F6F6F6;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: rgba(106, 13, 173, 0.3);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(106, 13, 173, 0.5);
    }
}