/* =====================================================
   移动端内页优化
   Mobile Inner Pages Optimization
   ===================================================== */

/* =====================================================
   1. 面包屑导航优化
   Breadcrumb Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 面包屑容器 */
    .crumbs, .breadcrumb {
        padding: 15px 15px !important;
        margin: 0 0 20px 0 !important;
        font-size: 12px !important;
        background: #f5f5f5 !important;
    }
    
    /* 面包屑链接 */
    .crumbs a, .breadcrumb a {
        color: #666 !important;
        text-decoration: none !important;
        padding: 5px 8px !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    /* 面包屑分隔符 */
    .crumbs span, .breadcrumb span {
        color: #999 !important;
        padding: 0 5px !important;
    }
    
    /* 当前页 */
    .crumbs .current, .breadcrumb .active {
        color: #0078D7 !important;
        font-weight: 500 !important;
    }
}

@media (max-width: 480px) {
    .crumbs, .breadcrumb {
        padding: 12px 12px !important;
        font-size: 11px !important;
    }
}

/* =====================================================
   2. 页面标题优化
   Page Title Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 页面标题容器 */
    .page-title, .section-title {
        padding: 25px 15px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    
    /* 主标题 */
    .page-title h1, .page-title h2,
    .section-title h1, .section-title h2 {
        font-size: 24px !important;
        line-height: 1.4 !important;
        color: #333 !important;
        margin-bottom: 10px !important;
    }
    
    /* 副标题 */
    .page-title p, .section-title p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #666 !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
    }
}

@media (max-width: 480px) {
    .page-title h1, .page-title h2,
    .section-title h1, .section-title h2 {
        font-size: 20px !important;
    }
    
    .page-title p, .section-title p {
        font-size: 13px !important;
    }
}

/* =====================================================
   3. 内容区域优化
   Content Area Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 内容容器 */
    .content, .page-content, .article-content {
        padding: 15px !important;
        max-width: 100% !important;
    }
    
    /* 内容图片 */
    .content img, .page-content img, .article-content img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        margin: 15px 0 !important;
    }
    
    /* 内容文字 */
    .content p, .page-content p, .article-content p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        color: #333 !important;
        margin-bottom: 15px !important;
        text-align: justify !important;
    }
    
    /* 内容标题 */
    .content h3, .page-content h3, .article-content h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin: 25px 0 15px 0 !important;
        color: #333 !important;
    }
    
    .content h4, .page-content h4, .article-content h4 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin: 20px 0 12px 0 !important;
        color: #333 !important;
    }
    
    /* 列表 */
    .content ul, .page-content ul, .article-content ul,
    .content ol, .page-content ol, .article-content ol {
        padding-left: 20px !important;
        margin-bottom: 15px !important;
    }
    
    .content li, .page-content li, .article-content li {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 8px !important;
        color: #333 !important;
    }
}

@media (max-width: 480px) {
    .content, .page-content, .article-content {
        padding: 12px !important;
    }
    
    .content p, .page-content p, .article-content p {
        font-size: 13px !important;
    }
}

/* =====================================================
   4. 表单优化
   Form Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 表单容器 */
    .form-container, .contact-form, .guestbook-form {
        padding: 20px 15px !important;
        background: #f9f9f9 !important;
        border-radius: 8px !important;
    }
    
    /* 表单组 */
    .form-group {
        margin-bottom: 15px !important;
    }
    
    /* 表单标签 */
    .form-group label {
        display: block !important;
        margin-bottom: 8px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #333 !important;
    }
    
    /* 输入框 */
    .form-control, input[type="text"], input[type="email"], 
    input[type="tel"], input[type="password"], textarea, select {
        width: 100% !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        min-height: 44px !important;
    }
    
    /* 文本域 */
    textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    /* 按钮 */
    .btn, button, input[type="submit"], input[type="button"] {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border: none !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 主按钮 */
    .btn-primary, .btn-submit {
        background: #0078D7 !important;
        color: #fff !important;
    }
}

@media (max-width: 480px) {
    .form-container, .contact-form, .guestbook-form {
        padding: 15px 12px !important;
    }
    
    .form-control, input[type="text"], input[type="email"],
    input[type="tel"], input[type="password"], textarea, select {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* =====================================================
   5. 产品详情页优化
   Product Detail Page Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 产品详情容器 */
    #productView, .product-detail {
        padding: 20px 15px !important;
    }
    
    /* 产品图片 */
    #productView .product-image, .product-detail .product-image {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    #productView .product-image img, .product-detail .product-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }
    
    /* 产品信息 */
    #productView .product-info, .product-detail .product-info {
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* 产品标题 */
    #productView .product-info h1, .product-detail .product-info h1,
    #productView .product-info h2, .product-detail .product-info h2 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        color: #333 !important;
    }
    
    /* 产品描述 */
    #productView .product-info .description, 
    .product-detail .product-info .description {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #666 !important;
        margin-bottom: 15px !important;
    }
    
    /* 产品参数表格 */
    #productView .product-params table, 
    .product-detail .product-params table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 20px !important;
    }
    
    #productView .product-params td, 
    #productView .product-params th,
    .product-detail .product-params td, 
    .product-detail .product-params th {
        padding: 10px !important;
        border: 1px solid #eee !important;
        font-size: 13px !important;
    }
    
    /* 购买按钮 */
    #productView .buy-btn, .product-detail .buy-btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        margin-top: 20px !important;
    }
}

/* =====================================================
   6. 新闻详情页优化
   News Detail Page Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 新闻详情容器 */
    #article, .news-detail {
        padding: 20px 15px !important;
    }
    
    /* 新闻标题 */
    #article .article-title, .news-detail .article-title {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
        color: #333 !important;
    }
    
    /* 新闻元信息 */
    #article .article-meta, .news-detail .article-meta {
        font-size: 12px !important;
        color: #999 !important;
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;
        border-bottom: 1px solid #eee !important;
    }
    
    /* 新闻图片 */
    #article .article-image, .news-detail .article-image {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    #article .article-image img, .news-detail .article-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }
    
    /* 新闻内容 */
    #article .article-content, .news-detail .article-content {
        font-size: 14px !important;
        line-height: 1.8 !important;
        color: #333 !important;
    }
    
    #article .article-content p, .news-detail .article-content p {
        margin-bottom: 15px !important;
        text-align: justify !important;
    }
    
    #article .article-content img, .news-detail .article-content img {
        max-width: 100% !important;
        height: auto !important;
        margin: 15px 0 !important;
    }
}

/* =====================================================
   7. 关于我们页面优化
   About Page Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 关于页面容器 */
    #about, .about-page {
        padding: 20px 15px !important;
    }
    
    /* 公司介绍 */
    #about .company-intro, .about-page .company-intro {
        margin-bottom: 30px !important;
    }
    
    #about .company-intro h2, .about-page .company-intro h2 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
    }
    
    #about .company-intro p, .about-page .company-intro p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        color: #333 !important;
        margin-bottom: 12px !important;
    }
    
    /* 公司图片 */
    #about .company-images, .about-page .company-images {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-bottom: 30px !important;
    }
    
    #about .company-images img, .about-page .company-images img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
    }
    
    /* 公司优势 */
    #about .company-advantages, .about-page .company-advantages {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-bottom: 30px !important;
    }
    
    #about .company-advantages .item, 
    .about-page .company-advantages .item {
        padding: 20px !important;
        background: #f9f9f9 !important;
        border-radius: 8px !important;
        text-align: center !important;
    }
    
    #about .company-advantages .item img,
    .about-page .company-advantages .item img {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 10px !important;
    }
    
    #about .company-advantages .item h4,
    .about-page .company-advantages .item h4 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    #about .company-advantages .item p,
    .about-page .company-advantages .item p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #666 !important;
    }
}

/* =====================================================
   8. 联系我们页面优化
   Contact Page Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 联系页面容器 */
    #contact, .contact-page {
        padding: 20px 15px !important;
    }
    
    /* 联系信息 */
    #contact .contact-info, .contact-page .contact-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-bottom: 30px !important;
    }
    
    #contact .contact-info .item, .contact-page .contact-info .item {
        padding: 15px !important;
        background: #f9f9f9 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    #contact .contact-info .item img, 
    .contact-page .contact-info .item img {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    #contact .contact-info .item .text, 
    .contact-page .contact-info .item .text {
        flex: 1 !important;
    }
    
    #contact .contact-info .item .text h4, 
    .contact-page .contact-info .item .text h4 {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }
    
    #contact .contact-info .item .text p, 
    .contact-page .contact-info .item .text p {
        font-size: 13px !important;
        color: #666 !important;
        line-height: 1.5 !important;
    }
    
    /* 地图 */
    #contact .map-container, .contact-page .map-container {
        width: 100% !important;
        height: 300px !important;
        margin-bottom: 30px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    #contact .map-container iframe, 
    .contact-page .map-container iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }
}

/* =====================================================
   9. 留言板页面优化
   Guestbook Page Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 留言板容器 */
    #guestbook, .guestbook-page {
        padding: 20px 15px !important;
    }
    
    /* 留言列表 */
    #guestbook .message-list, .guestbook-page .message-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-bottom: 30px !important;
    }
    
    #guestbook .message-list .item, 
    .guestbook-page .message-list .item {
        padding: 15px !important;
        background: #f9f9f9 !important;
        border-radius: 8px !important;
    }
    
    #guestbook .message-list .item .name, 
    .guestbook-page .message-list .item .name {
        font-size: 15px !important;
        font-weight: 500 !important;
        margin-bottom: 8px !important;
        color: #333 !important;
    }
    
    #guestbook .message-list .item .content, 
    .guestbook-page .message-list .item .content {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #666 !important;
    }
    
    #guestbook .message-list .item .date, 
    .guestbook-page .message-list .item .date {
        font-size: 12px !important;
        color: #999 !important;
        margin-top: 10px !important;
    }
}

/* =====================================================
   10. 通用优化
   General Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 容器 */
    .container, .container-fluid, .box {
        padding: 15px 10px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* 间距 */
    [class*="margin-"] {
        margin: 10px 5px !important;
    }
    
    [class*="padding-"] {
        padding: 15px 10px !important;
    }
    
    /* 按钮 */
    .btn, button {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
    }
    
    /* 表格 */
    table {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 12px !important;
    }
    
    table td, table th {
        padding: 8px 5px !important;
    }
    
    /* 禁用动画 */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}