/* ========================================
   移动端专用样式
   不影响电脑端效果
   ======================================== */

@media (max-width: 768px) {
    /* 1. 导航栏默认深色背景 */
    #navbar:not(.navbar-scrolled) {
        background: linear-gradient(135deg, rgba(29, 53, 87, 0.98) 0%, rgba(13, 27, 42, 0.99) 100%) !important;
    }

    /* 2. 为所有页面添加顶部内边距，避免被导航栏遮挡 */
    body {
        padding-top: 70px;
    }

    /* 首页轮播图特殊处理 - 向上移动抵消padding-top */
    .carousel {
        margin-top: -100px;
    }

    /* 3. 移动端通用字体大小优化 */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* 4. 优势导航按钮优化 - 横向排列，增加饱和度 */
    .advantage-nav-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    .advantage-nav-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* 移动端优势导航按钮样式 */
    .mobile-advantage-scroll-btn {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .mobile-advantage-scroll-btn:active {
        transform: scale(0.9);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .mobile-advantage-scroll-btn i {
        font-size: 0.875rem;
    }

    /* 5. 优势内容区域优化 */
    .advantage-step-content {
        padding: 1rem 0;
    }

    .advantage-step-content img {
        max-height: 220px;
        object-fit: cover;
    }

    /* 6. 移动端轮播图优化 */
    .carousel {
        height: 100vh;
        background-color: #203550 !important;
    }
    
    /* 隐藏波浪动画背景（仅移动端） */
    .carousel .wave {
        display: none !important;
    }

    .carousel h1 {
        font-size: 2rem;
    }

    .carousel p {
        font-size: 1rem;
    }

    /* 7. 移动端section间距优化 */
    section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* 8. 移动端按钮组 - 横向排列 */
    .mobile-btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .mobile-btn-group .btn-primary,
    .mobile-btn-group .btn-secondary {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 140px;
    }

    /* 9. 移动端网格布局工具类 */
    .mobile-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .mobile-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .mobile-grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    /* 10. 移动端卡片网格 - 增加饱和度 */
    .mobile-card-grid,
    .products-grid,
    .cases-grid,
    .news-grid,
    .certificates-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .mobile-card-grid .card,
    .products-grid .product-card,
    .cases-grid .case-card,
    .news-grid .news-card,
    .certificates-grid .certificate-card {
        margin: 0;
    }

    /* 11. 移动端快速数据展示 */
    .quick-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .quick-stats .stat-item {
        text-align: center;
        padding: 1rem;
    }

    /* 12. 移动端联系信息卡片 */
    .contact-cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .contact-cards-container .contact-card {
        margin: 0;
        padding: 1rem;
    }

    .contact-cards-container .contact-card:last-child {
        grid-column: span 2;
    }

    /* 13. 移动端地图高度 */
    .map-container {
        height: 300px;
    }

    /* 14. 移动端工具类 */
    .mobile-hidden {
        display: none !important;
    }

    .mobile-visible {
        display: block !important;
    }

    .mobile-flex {
        display: flex !important;
    }

    .mobile-flex-wrap {
        flex-wrap: wrap !important;
    }

    .mobile-flex-center {
        justify-content: center !important;
        align-items: center !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    /* 15. 移动端底部布局优化 */
    footer .grid.grid-cols-1 {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .footer-two-columns-wrapper {
        display: flex;
        gap: 1rem;
    }

    .footer-product-categories {
        flex: 1;
    }

    .footer-quick-links {
        flex: 1;
    }

    .footer-product-categories h3,
    .footer-quick-links h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .footer-product-categories li,
    .footer-quick-links li {
        margin-bottom: 0.25rem;
    }

    .footer-product-categories a,
    .footer-quick-links a {
        font-size: 0.875rem;
    }

    /* ==========================================
       16. PC端内页Hero区域优化
       ========================================== */

    .page-hero-section {
        background: linear-gradient(135deg, #1d3557 0%, #0d1b2a 100%) !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        min-height: auto !important;
    }

    .page-hero-section h1 {
        font-size: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }

    .page-hero-section p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    /* ==========================================
       17. 移动端轮播指标卡片 - 横向一行两列
       ========================================== */

    .carousel .grid[class*="grid-cols"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .carousel [class*="bg-gradient-to-br"],
    .carousel [class*="from-gray-800"] {
        padding: 0.625rem !important;
    }

    .carousel [class*="text-4xl"],
    .carousel [class*="text-5xl"] {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }

    .carousel [class*="text-sm"].text-gray-300,
    .carousel [class*="text-xs"].opacity-90 {
        font-size: 0.7rem !important;
    }

    .carousel [class*="flex.items-start"] {
        gap: 0.5rem !important;
        padding: 0.625rem !important;
    }

    .carousel [class*="w-12"][class*="h-12"] {
        width: 2rem !important;
        height: 2rem !important;
    }

    .carousel [class*="fas"][class*="fa-bolt"],
    .carousel [class*="fas"][class*="fa-shield-alt"],
    .carousel [class*="fas"][class*="fa-brain"],
    .carousel [class*="fas"][class*="fa-tools"] {
        font-size: 0.875rem !important;
    }

    .carousel [class*="text-lg"].font-bold {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
    }

    .carousel [class*="text-sm"].text-gray-400 {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }

    .carousel [class*="text-base"].font-bold {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }

    .carousel [class*="text-xs"].text-gray-400 {
        font-size: 0.65rem !important;
    }

    /* 隐藏产品预览卡片（仅电脑端显示） */
    .carousel .hidden.lg\\:block.relative.group,
    .carousel [class*="hidden"][class*="lg:block"] {
        display: none !important;
    }

    /* ==========================================
       18. 移动端通用section间距优化
       ========================================== */

    section:not(.carousel):not(.page-hero-section) {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* ==========================================
       19. 移动端按钮和链接优化
       ========================================== */

    .btn-primary,
    .btn-secondary {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
    }

    .flex.flex-col.sm\\:flex-row.gap-4.pt-4,
    [class*="flex-col"][class*="sm:flex-row"] {
        flex-direction: row !important;
        gap: 0.75rem !important;
    }

    .flex-col.sm\\:flex-row > a,
    .flex-col.sm\\:flex-row > button,
    [class*="flex-col"][class*="sm:flex-row"] > a,
    [class*="flex-col"][class*="sm:flex-row"] > button {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: 0.875rem !important;
        padding: 0.75rem 1rem !important;
    }

    /* ==========================================
       20. 首页各板块移动端2列布局优化
       ========================================== */

    /* 产品展示区 - 移动端2列 */
    #products .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3,
    .product-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .product-card-grid .product-card img.h-64 { height: 10rem !important; }
    .product-card-grid .product-card .p-6 { padding: 0.75rem !important; }
    .product-card-grid .product-card h3 { font-size: 0.9rem !important; margin-bottom: 0.25rem !important; }
    .product-card-grid .product-card p { font-size: 0.75rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* 案例展示区 - 移动端2列 */
    #cases .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3,
    .case-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .case-card-grid .case-card img.h-56 { height: 9rem !important; }
    .case-card-grid .case-card .p-6 { padding: 0.625rem !important; }
    .case-card-grid .case-card h3 { font-size: 0.85rem !important; margin-bottom: 0.25rem !important; }
    .case-card-grid .case-card p.text-sm { font-size: 0.7rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* 服务项目(6个) - 移动端2列 */
    #service .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3,
    .service-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    #service .bg-white.rounded-lg.p-8,
    .service-cards-grid .bg-white.rounded-lg.p-8 {
        padding: 1rem 0.75rem !important;
    }
    #service .w-20.h-20.mx-auto.mb-6,
    .service-cards-grid .w-20.h-20.mx-auto.mb-6 {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 0.5rem !important;
    }
    #service .w-20.h-20 i,
    .service-cards-grid .w-20.h-20 i {
        font-size: 1.25rem !important;
    }
    #service h3.text-xl.font-bold.mb-4,
    .service-cards-grid h3.text-xl.font-bold.mb-4 {
        font-size: 0.9rem !important;
        margin-bottom: 0.35rem !important;
    }
    #service p.text-gray-600,
    .service-cards-grid p.text-gray-600 {
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* 智能监控 - 数据概览卡(4个) → 移动端2列 */
    #dashboard .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4:first-of-type,
    .monitor-data-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .monitor-data-cards .bg-gradient-card.rounded-2xl.shadow-card.p-8 {
        padding: 0.875rem 0.75rem !important;
    }
    .monitor-data-cards .text-4xl.font-bold { font-size: 1.5rem !important; }
    .monitor-data-cards .text-2xl { font-size: 0.95rem !important; }
    .monitor-data-cards .text-sm { font-size: 0.65rem !important; }
    .monitor-data-cards .text-xl { font-size: 0.85rem !important; }
    .monitor-data-cards .mb-6 { margin-bottom: 0.5rem !important; }
    .monitor-data-cards .mb-2 { margin-bottom: 0.25rem !important; }
    .monitor-data-cards .p-3.rounded-full { width: 2rem !important; height: 2rem !important; padding: 0.35rem !important; }
    .monitor-data-cards .p-3 i { font-size: 0.8rem !important; }

    /* 智能监控 - 功能卡(4个) → 移动端2列 */
    #dashboard .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4:last-of-type,
    .monitor-func-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .monitor-func-cards .bg-white.rounded-2xl.shadow-card.p-8 {
        padding: 0.875rem 0.75rem !important;
    }
    .monitor-func-cards .w-20.h-20.mx-auto.mb-6 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .monitor-func-cards .w-20.h-20 i { font-size: 1.125rem !important; }
    .monitor-func-cards h3.text-xl { font-size: 0.85rem !important; margin-bottom: 0.35rem !important; }
    .monitor-func-cards p.text-gray-600 { font-size: 0.7rem !important; line-height: 1.4 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

    /* 智能监控 - 图表区移动端优化 */
    #dashboard .grid.grid-cols-1.lg\\:grid-cols-2 {
        gap: 0.75rem !important;
    }
    #dashboard .h-80 { height: 16rem !important; }
    #dashboard canvas { max-height: 16rem !important; }
    #dashboard h3.text-2xl { font-size: 1rem !important; margin-bottom: 0.5rem !important; }

    /* 联系方式信息 - 移动端紧凑排列 */
    .footer-contact .space-y-6,
    #contact-form .bg-gray-50.rounded-lg.p-8 .space-y-6 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .footer-contact .space-y-6 > div,
    #contact-form .bg-gray-50.rounded-lg.p-8 .space-y-6 > div {
        margin-bottom: 0 !important;
    }
    .footer-contact .space-y-6 > div:last-child,
    #contact-form .bg-gray-50.rounded-lg.p-8 .space-y-6 > div:last-child {
        grid-column: span 2;
    }
    .footer-contact .w-12.h-12,
    #contact-form .w-12.h-12 {
        width: 2.25rem !important;
        height: 2.25rem !important;
        flex-shrink: 0;
    }
    .footer-contact .w-12.h-12 i,
    #contact-form .w-12.h-12 i {
        font-size: 0.8rem !important;
    }
    .footer-contact h4,
    #contact-form h4 {
        font-size: 0.8rem !important;
        margin-bottom: 0.15rem !important;
    }
    .footer-contact p,
    #contact-form p {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }

    /* 联系表单区域移动端优化 */
    #contact-form .grid.grid-cols-1.lg\\:grid-cols-2 {
        gap: 1.5rem !important;
    }
    #contact-form label { font-size: 0.85rem !important; }
    #contact-form input, #contact-form select, #contact-form textarea {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    /* 产品筛选按钮 - 移动端横向滚动或换行 */
    .product-filter-btn {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }

    /* 快速查看弹窗移动端适配 */
    #quickViewModal .max-w-2xl { width: 92% !important; max-width: none !important; }
    #quickViewModal .w-48.h-32 { width: 100% !important; height: 10rem !important; object-fit: cover; }
}
}