// 移动端响应式适配样式 - LESS版本
@import './variables.less';

// ===== 移动端断点变量 =====
// 使用全局变量文件中的断点

// ===== 移动端断点 =====
@media (max-width: @mobile-breakpoint) {
  // 头部导航移动端适配
  .header {
    padding: 10px 0;
    
    .content {
      padding: 0 15px;
    }
  }
  
  // 桌面端导航隐藏
  .desktop {
    display: none !important;
  }
  
  // 移动端导航显示
  .mobile {
    display: flex !important;
  }
  
  // 移动端导航样式
  .mobile-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .logoCell {
    .logo {
      height: 40px;
      width: auto;
    }
  }
  
  .mobileIconsCell {
    cursor: pointer;
    
    img {
      width: 24px;
      height: 24px;
    }
  }
  
  // 移动端菜单样式
  .headerMobileMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: none;
    overflow-y: auto;
    
    &.active {
      display: block;
    }
    
    .menuContent {
      padding: 80px 20px 20px;
      color: #0f172a;
      
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      
      li {
        margin: 12px 0;
        border-bottom: none;
        padding-bottom: 0;
      }
      
      a {
        color: #334155;
        text-decoration: none;
        font-size: 18px;
        display: block;
        padding: 10px 0;
      }
      
      .hasSubmenu {
        color: #1d4ed8;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .subMenu {
        margin-left: 20px;
        margin-top: 6px;
        
        li {
          margin: 2px 0;
          padding-bottom: 0;
          
          a {
            font-size: 16px;
            color: #475569;
          }
        }
      }
    }
    
    .closeMenu {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      padding: 10px;
      
      &:hover {
        color: #3498db;
      }
    }
    
    .goBack {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #e2e8f0;
      text-align: center;
      
      a {
        color: #334155;
        text-decoration: none;
        font-size: 16px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        
        &:hover {
          color: #1d4ed8;
        }
        
        img {
          width: 16px;
          height: 16px;
          filter: none;
        }
      }
    }
  }
  
  // 移动端横幅适配
  .banner {
    height: 60vh;
    min-height: 400px;
    
    .banner-content {
      padding: 40px 20px;
      text-align: center;
      
      .banner-title {
        font-size: 2.5rem;
        line-height: 1.2;
        margin-bottom: 20px;
      }
      
      .banner-subtitle {
        font-size: 1.2rem;
        line-height: 1.4;
        margin-bottom: 30px;
      }
      
      .banner-button {
        padding: 12px 24px;
        font-size: 16px;
      }
    }
  }
  
  // 移动端内容区域适配
  .pageWidth {
    padding: 0 15px;
  }
  
  .section {
    padding: 40px 0;
    
    .section-title {
      font-size: 2rem;
      line-height: 1.3;
      margin-bottom: 20px;
    }
    
    .section-subtitle {
      font-size: 1.1rem;
      line-height: 1.5;
      margin-bottom: 30px;
    }
  }
  
  // 移动端网格布局适配
  .grid,
  .advantages-grid,
  .areas-grid,
  .services-grid,
  .team-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  // 移动端卡片适配
  .card,
  .advantage-card,
  .area-card,
  .service-card,
  .team-card,
  .contact-card {
    padding: 20px;
    margin-bottom: 20px;
    
    .card-title {
      font-size: 1.3rem;
      margin-bottom: 15px;
    }
    
    .card-content {
      font-size: 1rem;
      line-height: 1.6;
    }
  }
  
  // 移动端按钮适配
  .btn,
  .button {
    padding: 12px 24px;
    font-size: 16px;
    
    &.btn-large {
      padding: 15px 30px;
      font-size: 18px;
    }
    
    &.btn-small {
      padding: 8px 16px;
      font-size: 14px;
    }
  }
  
  // 移动端表单适配
  .form-group {
    margin-bottom: 20px;
    
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
    }
    
    input,
    textarea,
    select {
      width: 100%;
      padding: 12px;
      font-size: 16px; // 防止iOS缩放
      border: 1px solid #ddd;
      border-radius: 4px;
      
      &:focus {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
      }
    }
    
    textarea {
      min-height: 100px;
      resize: vertical;
    }
  }
  
  // 移动端图片适配
  img {
    max-width: 100%;
    height: auto;
  }
  
  // 移动端图标适配
  .icon {
    width: 24px;
    height: 24px;
    
    &.icon-large {
      width: 32px;
      height: 32px;
    }
    
    &.icon-small {
      width: 16px;
      height: 16px;
    }
  }
  
  // 移动端间距适配
  .mt-mobile { margin-top: 20px !important; }
  .mb-mobile { margin-bottom: 20px !important; }
  .ml-mobile { margin-left: 15px !important; }
  .mr-mobile { margin-right: 15px !important; }
  
  .pt-mobile { padding-top: 20px !important; }
  .pb-mobile { padding-bottom: 20px !important; }
  .pl-mobile { padding-left: 15px !important; }
  .pr-mobile { padding-right: 15px !important; }
  
  // 移动端隐藏元素
  .hide-mobile {
    display: none !important;
  }
  
  // 移动端显示元素
  .show-mobile {
    display: block !important;
  }
  
  // 移动端文本对齐
  .text-center-mobile {
    text-align: center !important;
  }
  
  .text-left-mobile {
    text-align: left !important;
  }
  
  .text-right-mobile {
    text-align: right !important;
  }
}

// ===== 平板端适配 =====
@media (min-width: @mobile-breakpoint + 1) and (max-width: @tablet-breakpoint) {
  .pageWidth {
    padding: 0 30px;
  }
  
  .grid,
  .advantages-grid,
  .areas-grid,
  .services-grid,
  .team-grid,
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  
  .section {
    padding: 50px 0;
  }
  
  .banner {
    height: 70vh;
    
    .banner-content {
      padding: 60px 40px;
      
      .banner-title {
        font-size: 3rem;
      }
      
      .banner-subtitle {
        font-size: 1.4rem;
      }
    }
  }
}

// ===== 小屏幕移动端适配 =====
@media (max-width: @small-mobile) {
  .pageWidth {
    padding: 0 10px;
  }
  
  .banner {
    .banner-content {
      padding: 30px 15px;
      
      .banner-title {
        font-size: 2rem;
      }
      
      .banner-subtitle {
        font-size: 1rem;
      }
    }
  }
  
  .section {
    padding: 30px 0;
    
    .section-title {
      font-size: 1.8rem;
    }
    
    .section-subtitle {
      font-size: 1rem;
    }
  }
  
  .card,
  .advantage-card,
  .area-card,
  .service-card,
  .team-card,
  .contact-card {
    padding: 15px;
    
    .card-title {
      font-size: 1.2rem;
    }
  }
  
  .btn,
  .button {
    padding: 10px 20px;
    font-size: 15px;
  }
}

// ===== 超小屏幕移动端适配 =====
@media (max-width: @xs-mobile) {
  .pageWidth {
    padding: 0 8px;
  }
  
  .banner {
    .banner-content {
      padding: 25px 10px;
      
      .banner-title {
        font-size: 1.8rem;
      }
      
      .banner-subtitle {
        font-size: 0.9rem;
      }
    }
  }
  
  .section {
    padding: 25px 0;
    
    .section-title {
      font-size: 1.6rem;
    }
    
    .section-subtitle {
      font-size: 0.9rem;
    }
  }
  
  .card,
  .advantage-card,
  .area-card,
  .service-card,
  .team-card,
  .contact-card {
    padding: 12px;
    
    .card-title {
      font-size: 1.1rem;
    }
  }
  
  .btn,
  .button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

// ===== 触摸设备优化 =====
@media (hover: none) and (pointer: coarse) {
  // 触摸设备禁用悬停效果
  .hover-lift:hover,
  .hover-scale:hover,
  .hover-glow:hover,
  .hover-rotate:hover,
  .hover-bounce:hover {
    transform: none;
    box-shadow: none;
  }
  
  // 触摸设备增加触摸反馈
  .btn,
  .button,
  .card,
  .advantage-card,
  .area-card,
  .service-card,
  .team-card,
  .contact-card {
    -webkit-tap-highlight-color: rgba(52, 152, 219, 0.3);
    
    &:active {
      transform: scale(0.98);
      transition: transform 0.1s ease;
    }
  }
  
  // 触摸设备：仅一级菜单链接保持 44px；子菜单单独收紧，避免子项也被撑高
  .headerMobileMenu .menuContent {
    > ul > li > a {
      padding: 15px 0;
      display: flex;
      align-items: center;
    }

    .subMenu li a {
      padding: 6px 0;
      min-height: auto;
      display: block;
    }
  }
}

// ===== 高分辨率屏幕适配 =====
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  .icon {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

// ===== 横屏模式适配 =====
@media (orientation: landscape) and (max-height: 500px) {
  .headerMobileMenu {
    .menuContent {
      padding: 60px 20px 20px;
    }
    
    .closeMenu {
      top: 15px;
      right: 15px;
    }
  }
  
  .banner {
    height: 100vh;
    
    .banner-content {
      padding: 30px 20px;
      
      .banner-title {
        font-size: 2rem;
        margin-bottom: 15px;
      }
      
      .banner-subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
      }
    }
  }
}

// ===== 打印样式 =====
@media print {
  .headerMobileMenu,
  .mobile-nav,
  .floating-particles,
  .scroll-progress-bar {
    display: none !important;
  }
  
  .pageWidth {
    padding: 0 !important;
  }
  
  .section {
    padding: 20px 0 !important;
    page-break-inside: avoid;
  }
  
  .card,
  .advantage-card,
  .area-card,
  .service-card,
  .team-card,
  .contact-card {
    page-break-inside: avoid;
    margin-bottom: 15px !important;
  }
}