/* =====================================================
   移动端首页模块优化
   Mobile Home Page Optimization
   ===================================================== */

/* =====================================================
   1. 产品列表优化
   Product List Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 产品容器 */
    #index_product, .product-section {
        padding: 30px 15px !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    /* 产品标题 */
    #index_product .home-title, .product-section .home-title {
        text-align: center !important;
        padding: 20px 0 !important;
        margin-bottom: 20px !important;
    }
    
    #index_product .home-title b,
    .product-section .home-title b {
        font-size: 24px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        display: block !important;
    }
    
    #index_product .home-title .futitle,
    .product-section .home-title .futitle {
        font-size: 14px !important;
        color: #666 !important;
        line-height: 1.5 !important;
    }
    
    /* 产品列表 */
    #index_product .list, .list_product,
    #product .list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        padding: 0 !important;
    }
    
    /* 产品卡片 */
    #index_product .list .item,
    .list_product .item,
    #product .list .item {
        width: calc(50% - 8px) !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        transition: transform 0.3s ease !important;
    }
    
    #index_product .list .item:active,
    .list_product .item:active,
    #product .list .item:active {
        transform: scale(0.98) !important;
    }
    
    /* 产品图片 */
    #index_product .list .item .image,
    .list_product .item .image,
    #product .list .item .image {
        position: relative !important;
        width: 100% !important;
        padding-bottom: 100% !important;
        overflow: hidden !important;
    }
    
    #index_product .list .item .image img,
    .list_product .item .image img,
    #product .list .item .image img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transition: transform 0.3s ease !important;
    }
    
    /* 产品图片遮罩 */
    #index_product .list .item .mask_layer,
    .list_product .item .mask_layer {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.3) !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    /* 产品分类图标 */
    #index_product .list .item .cate_icon,
    .list_product .item .cate_icon {
        display: none !important;
    }
    
    /* 产品标题 */
    #index_product .list .item:last-child,
    .list_product .item:last-child,
    #product .list .item:last-child {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #333 !important;
        text-align: center !important;
        padding: 12px 8px !important;
        line-height: 1.4 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    /* 单列显示 */
    #index_product .list .item,
    .list_product .item,
    #product .list .item {
        width: 100% !important;
    }
    
    /* 产品图片比例调整 */
    #index_product .list .item .image,
    .list_product .item .image,
    #product .list .item .image {
        padding-bottom: 75% !important;
    }
}

@media (min-width: 601px) and (max-width: 768px) {
    /* 平板显示2列 */
    #index_product .list .item,
    .list_product .item,
    #product .list .item {
        width: calc(50% - 8px) !important;
    }
}

/* =====================================================
   2. 新闻列表优化
   News List Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 新闻容器 */
    #news, #index_news {
        padding: 30px 15px !important;
    }
    
    /* 新闻标题 */
    #news .home-title,
    #index_news .home-title {
        text-align: center !important;
        padding: 20px 0 !important;
        margin-bottom: 20px !important;
    }
    
    #news .home-title b,
    #index_news .home-title b {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }
    
    #news .home-title .futitle,
    #index_news .home-title .futitle {
        font-size: 14px !important;
        color: #666 !important;
    }
    
    /* 新闻列表 */
    #news .list,
    #index_news .list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* 新闻卡片 */
    #news .list .item,
    #index_news .list .item {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 新闻图片 */
    #news .list .item .image,
    #index_news .list .item .image {
        width: 100% !important;
        height: 180px !important;
        overflow: hidden !important;
    }
    
    #news .list .item .image img,
    #index_news .list .item .image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* 新闻内容 */
    #news .list .item .content,
    #index_news .list .item .content {
        padding: 15px !important;
    }
    
    #news .list .item h3,
    #index_news .list .item h3,
    #news .list .item h4,
    #index_news .list .item h4 {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        color: #333 !important;
        font-weight: 600 !important;
        text-align: left !important;
    }
    
    /* 新闻描述 - 优化显示 */
    #news .list .item .description,
    #index_news .list .item .description {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #555 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-align: left !important;
    }
    
    /* 新闻更多按钮 */
    #news .list .item .more,
    #index_news .list .item .more {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* 新闻图片高度调整 */
    #news .list .item .image,
    #index_news .list .item .image {
        height: 150px !important;
    }
}

/* =====================================================
   3. 公司简介优化
   About Section Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 简介容器 */
    #index_about, .about-section {
        padding: 30px 15px !important;
    }
    
    /* 简介标题 */
    #index_about .home-title,
    .about-section .home-title {
        text-align: center !important;
        padding: 20px 0 !important;
        margin-bottom: 20px !important;
    }
    
    #index_about .home-title b,
    .about-section .home-title b {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }
    
    /* 简介内容 */
    #index_about .box,
    .about-section .box {
        padding: 0 !important;
    }
    
    /* 简介列表 */
    #index_about .list,
    .about-section .list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* 简介项目 */
    #index_about .list .item,
    .about-section .list .item {
        width: 100% !important;
        padding: 20px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        text-align: center !important;
    }
    
    /* 简介图片 */
    #index_about .list .item img,
    .about-section .list .item img {
        width: 80px !important;
        height: 80px !important;
        object-fit: contain !important;
        margin: 0 auto 15px !important;
    }
    
    /* 简介文字 */
    #index_about .list .item p,
    .about-section .list .item p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #333 !important;
    }
    
    /* 简介图片组 */
    #index_about .images,
    .about-section .images {
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 20px !important;
    }
    
    #index_about .images img,
    .about-section .images img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
    }
}

/* =====================================================
   4. 其他模块优化
   Other Sections Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 通用模块容器 */
    .section, [id^="index_"] {
        padding: 30px 15px !important;
    }
    
    /* 通用标题 */
    .section .home-title,
    [id^="index_"] .home-title {
        text-align: center !important;
        padding: 20px 0 !important;
        margin-bottom: 20px !important;
    }
    
    .section .home-title b,
    [id^="index_"] .home-title b {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }
    
    .section .home-title .futitle,
    [id^="index_"] .home-title .futitle {
        font-size: 14px !important;
        color: #666 !important;
        line-height: 1.5 !important;
    }
    
    /* 通用列表 */
    .section .list,
    [id^="index_"] .list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* 通用项目 */
    .section .list .item,
    [id^="index_"] .list .item {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        background: #fff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 通用图片 */
    .section .list .item img,
    [id^="index_"] .list .item img {
        width: 100% !important;
        height: auto !important;
        border-radius: 4px !important;
    }
}

/* =====================================================
   5. 触摸优化
   Touch Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 移除点击高亮 */
    #index_product a, .list_product a,
    #news a, #index_news a,
    #index_about a {
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* 增大触摸区域 */
    #index_product .list .item,
    .list_product .item,
    #product .list .item,
    #news .list .item,
    #index_news .list .item {
        min-height: 44px !important;
    }
    
    /* 触摸反馈 */
    #index_product .list .item:active,
    .list_product .item:active,
    #product .list .item:active,
    #news .list .item:active,
    #index_news .list .item:active {
        opacity: 0.8 !important;
    }
}

/* =====================================================
   6. 响应式间距
   Responsive Spacing
   ===================================================== */

@media (max-width: 768px) {
    /* 减小模块间距 */
    .section, [id^="index_"] {
        margin-bottom: 20px !important;
    }
    
    /* 减小内边距 */
    .box, .container-fluid {
        padding: 15px 10px !important;
    }
    
    /* 减小外边距 */
    .list .item {
        margin-bottom: 15px !important;
    }
}

@media (max-width: 480px) {
    /* 进一步减小间距 */
    .section, [id^="index_"] {
        padding: 20px 12px !important;
        margin-bottom: 15px !important;
    }
}

/* =====================================================
   7. 文字省略优化
   Text Truncation Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 标题省略 */
    #index_product .list .item:last-child,
    .list_product .item:last-child,
    #product .list .item:last-child {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* 多行省略 */
    .description, .intro {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

/* =====================================================
   8. 图片优化
   Image Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 所有图片自适应 */
    img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    
    /* 背景图片优化 */
    .section, [id^="index_"] {
        background-size: cover !important;
        background-position: center !important;
    }
}

/* =====================================================
   9. 加载优化
   Loading Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 延迟加载占位 */
    img[loading="lazy"] {
        background-color: #f5f5f5 !important;
        min-height: 200px !important;
    }
    
    /* 图片加载动画 */
    img {
        transition: opacity 0.3s ease !important;
    }
}