/* 统一的响应式CSS文件 */
/* 基于移动优先的设计原则 */

/* ========== 通用响应式工具类 ========== */

/* 显示/隐藏控制 */
.hide-on-mobile {
    display: none !important;
}

.show-on-mobile {
    display: block !important;
}

@media (min-width: 768px) {
    .hide-on-mobile {
        display: block !important;
    }

    .show-on-mobile {
        display: none !important;
    }
}

/* 弹性容器 */
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

/* 图片响应式 */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========== 断点系统 ========== */
/* 使用标准的Bootstrap断点系统 */

/* 超小屏幕 (手机) < 576px */
@media (max-width: 575.98px) {
    .xs-text-center { text-align: center !important; }
    .xs-full-width { width: 100% !important; }
    .xs-no-float { float: none !important; }

    /* 通用调整 */
    body {
        font-size: 14px;
    }

    .w1200 {
        width: 100% !important;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .container {
        width: 100% !important;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* 移动端字体调整 */
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }

    /* 按钮调整 */
    .btn, button {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }

    /* 表单调整 */
    input, textarea, select {
        font-size: 14px !important;
        padding: 8px !important;
    }
}

/* 小屏幕 (平板竖屏) ≥ 576px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .sm-text-center { text-align: center !important; }

    .w1200 {
        width: 100% !important;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .container {
        width: 100% !important;
        padding: 0 20px;
        box-sizing: border-box;
    }
}

/* 中等屏幕 (平板横屏) ≥ 768px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .md-text-center { text-align: center !important; }

    .w1200 {
        width: 95% !important;
        max-width: 1200px;
        margin: 0 auto;
    }

    .container {
        width: 95% !important;
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* 大屏幕 (桌面) ≥ 992px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .lg-text-center { text-align: center !important; }

    .w1200 {
        width: 1200px !important;
        margin: 0 auto;
    }

    .container {
        width: 1200px !important;
        margin: 0 auto;
    }
}

/* 超大屏幕 ≥ 1200px */
@media (min-width: 1200px) {
    .xl-text-center { text-align: center !important; }

    .w1200 {
        width: 1200px !important;
        margin: 0 auto;
    }

    .container {
        width: 1200px !important;
        margin: 0 auto;
    }
}

/* ========== 针对现有组件的响应式调整 ========== */

/* 导航栏响应式 */
@media (max-width: 1100px) {
    .header-v1 .top-main .top_r {
        display: none;
    }

    .touch-top {
        display: block !important;
    }
}

@media (max-width: 830px) {
    .header-2020 {
        display: none;
    }
}

/* 轮播图响应式 */
@media (max-width: 768px) {
    .top-swiper .swiper-container {
        height: 400px !important;
    }

    .swiper-slide img {
        object-fit: cover;
    }
}

@media (max-width: 576px) {
    .top-swiper .swiper-container {
        height: 300px !important;
    }
}

/* 网格布局响应式 */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .responsive-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* 卡片组件响应式 */
.card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .card {
        padding: 15px;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .card {
        padding: 10px;
        margin-bottom: 10px;
    }
}

/* 表格响应式 */
.responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.responsive-table table {
    min-width: 600px;
}

/* 页脚响应式 */
@media (max-width: 768px) {
    footer .footer-columns {
        flex-direction: column;
    }

    footer .footer-column {
        width: 100% !important;
        margin-bottom: 20px;
    }
}

/* ========== 移动端优化 ========== */

/* 触摸友好 */
@media (max-width: 768px) {
    /* 增大触摸目标 */
    a, button, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* 增大链接间距 */
    .nav-links li {
        margin: 5px 0;
    }

    /* 优化表单 */
    input, textarea, select {
        font-size: 16px !important; /* 防止iOS缩放 */
    }
}

/* 性能优化 */
@media (max-width: 768px) {
    /* 减少动画 */
    * {
        transition-duration: 0.2s !important;
    }

    /* 隐藏非关键元素 */
    .decorative-only {
        display: none !important;
    }
}

/* ========== 打印样式 ========== */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000 !important;
        background: #fff !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline !important;
    }

    img {
        max-width: 100% !important;
    }
}

/* ========== 首页特定组件响应式优化 ========== */

/* 平板及以下 (≤ 768px) */
@media (max-width: 768px) {
    /* 顶部轮播 */
    .body {
        width: 100% !important;
    }
    
    .top-swiper {
        width: 100%;
    }
    
    /* Section通用样式 */
    .section {
        padding: 40px 0;
    }
    
    .section .container {
        width: 100% !important;
        padding: 0 15px;
    }
    
    /* 标题样式 */
    .section-title {
        margin-bottom: 30px;
    }
    
    /* 卡片网格布局 */
    .item-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    /* 按钮组 */
    .btn-box {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .btn-box button,
    .btn-box .btn {
        width: 100% !important;
        margin: 5px 0 !important;
    }
    
    /* 导航列表 */
    .nav-list {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* 左右布局改为上下布局 */
    .left-nav,
    .right-text,
    .left-new,
    .right-list,
    .left-tab,
    .right-look {
        width: 100% !important;
    }
    
    /* 图片容器 */
    .an-img,
    .top-img {
        width: 100%;
    }
    
    .an-img img {
        width: 100%;
        height: auto;
    }
}

/* 手机屏幕 (≤ 576px) */
@media (max-width: 576px) {
    /* 容器内边距 */
    .section .container {
        padding: 0 10px;
    }
    
    /* Section间距 */
    .section {
        padding: 30px 0;
    }
    
    .section-title {
        margin-bottom: 20px;
    }
    
    /* 标题字体 */
    .section-title h1 {
        font-size: 20px !important;
        line-height: 1.4;
    }
    
    .section-title .fu-tit {
        font-size: 13px;
    }
    
    /* 卡片单列显示 */
    .item-box > * {
        width: 100% !important;
        margin-right: 0 !important;
    }
    
    /* 按钮 */
    button,
    .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    /* 表单元素 */
    input,
    textarea,
    select {
        width: 100% !important;
        font-size: 16px !important;
    }
    
    /* 导航项 */
    .nav-list li {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    /* 文本内容 */
    p {
        font-size: 14px;
        line-height: 1.6;
    }
    
    /* 卡片内容 */
    .card {
        padding: 12px !important;
    }
    
    .card h2 {
        font-size: 16px !important;
    }
    
    .card p,
    .card .desc {
        font-size: 13px !important;
        line-height: 1.6;
    }
    
    /* 列表项 */
    .item {
        margin-bottom: 15px;
    }
    
    /* 图片适配 */
    img {
        max-width: 100%;
        height: auto !important;
    }
    
    /* 背景图适配 */
    [style*="background"] {
        background-size: cover !important;
    }
}

/* 超小屏幕 (≤ 375px) */
@media (max-width: 375px) {
    /* 进一步缩小字体 */
    body {
        font-size: 13px;
    }
    
    .section-title h1 {
        font-size: 18px !important;
    }
    
    .section-title .fu-tit {
        font-size: 12px;
    }
    
    /* 减小内边距 */
    .section .container {
        padding: 0 8px;
    }
    
    .section {
        padding: 25px 0;
    }
    
    /* 按钮 */
    button,
    .btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    
    /* 卡片 */
    .card {
        padding: 10px !important;
    }
    
    .card h2 {
        font-size: 15px !important;
    }
    
    .card p,
    .card .desc {
        font-size: 12px !important;
    }
}