/* ==========================================================================
   EliteDrive Website - Responsive Styles
   响应式样式：移动端、平板端、大屏幕优化
   ========================================================================== */

/* ==========================================================================
   移动端导航菜单 (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* 显示汉堡菜单按钮 */
  .navbar-toggle {
    display: flex;
  }
  
  /* 导航菜单默认隐藏 */
  .navbar-nav {
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow-y: auto; /* 允许垂直滚动 */
    overflow-x: hidden; /* 禁止水平滚动 */
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    /* WebKit 滚动条优化 */
    -webkit-overflow-scrolling: touch;
  }
  
  /* 自定义滚动条样式（WebKit） */
  .navbar-nav::-webkit-scrollbar {
    width: 4px;
  }
  
  .navbar-nav::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .navbar-nav::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
  }
  
  .navbar-nav::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
  }
  
  /* 导航菜单展开状态 */
  .navbar-nav.show {
    max-height: calc(100vh - 65px); /* 最大高度为屏幕高度减去导航栏高度 */
    opacity: 1;
  }
  
  /* 导航链接样式 */
  .navbar-nav li {
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0; /* 防止被压缩 */
  }
  
  .navbar-nav li:last-child {
    border-bottom: none;
  }
  
  .navbar-nav .nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
  }
  
  /* 语言切换器移动端样式 */
  .language-switcher > .nav-link {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* 添加箭头指示器 */
  .language-switcher > .nav-link::after {
    content: '▼';
    font-size: 0.75rem;
    margin-left: var(--spacing-xs);
    transition: transform 0.3s ease;
  }
  
  .language-switcher.active > .nav-link::after {
    transform: rotate(180deg);
  }
  
  /* 语言下拉菜单 */
  .language-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--color-border-light);
    border-radius: 0;
    background: var(--color-bg-secondary);
    padding: 0;
    display: none;
  }
  
  /* 桌面端悬停不生效 */
  .language-switcher:hover .language-dropdown {
    display: none;
  }
  
  /* 移动端点击展开 */
  .language-switcher.active .language-dropdown {
    display: block;
  }
  
  /* 语言选项样式 */
  .language-option {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
  }
  
  .language-option:last-child {
    border-bottom: none;
    /* 添加底部内边距，确保不被遮挡 */
    padding-bottom: calc(var(--spacing-sm) + 8px);
  }
  
  .language-option:hover {
    background: var(--color-bg-tertiary);
  }
  
  /* 排版 */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  
  /* Hero */
  .hero {
    padding: var(--spacing-lg) 0;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.25rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  /* Section */
  .section {
    padding: var(--spacing-lg) 0;
  }
  
  .section-title h2 {
    font-size: 2rem;
  }
  
  /* Buttons */
  .btn-group,
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn {
    width: 100%;
  }
  
  /* Container */
  .container,
  .container-fluid {
    padding: 0 var(--spacing-sm);
  }
  
  /* 内容网格响应式 */
  .product-grid,
  .module-highlights,
  .feature-grid-home {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }
  
  .compatibility-grid {
    grid-template-columns: 1fr;
  }
  
  /* 下载卡片 */
  .download-card {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .download-action {
    width: 100%;
    min-width: auto;
  }
}

/* ==========================================================================
   平板端优化 (≤1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .navbar-nav {
    gap: var(--spacing-sm);
  }
  
  .nav-link {
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   大屏幕优化 (≥1440px)
   ========================================================================== */

@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
  
  .navbar-container {
    max-width: 1400px;
  }
}

/* ==========================================================================
   超小屏幕 (≤480px)
   ========================================================================== */

@media (max-width: 480px) {
  /* 排版 */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  
  .hero-title {
    font-size: 2rem;
  }
  
  /* 内容网格 - 单列 */
  .product-grid,
  .module-highlights,
  .feature-grid-home {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   打印样式
   ========================================================================== */

@media print {
  .navbar,
  .footer,
  .btn,
  .navbar-toggle {
    display: none;
  }
  
  body {
    background: white;
  }
  
  .section,
  .hero {
    page-break-inside: avoid;
  }
}