/* ========================================
   响应式设计增强
   移动优先 + 断点优化
   ======================================== */

/* ========================================
   断点定义
   ======================================== */
/* 
  xs: < 640px   (手机竖屏)
  sm: 640px+    (手机横屏)
  md: 768px+    (平板竖屏)
  lg: 1024px+   (平板横屏/小笔记本)
  xl: 1280px+   (桌面)
  2xl: 1536px+  (大屏幕)
*/

/* ========================================
   移动端优化 (< 640px)
   ======================================== */
@media (max-width: 639px) {
  /* 字体大小调整 */
  html {
    font-size: 15px;
  }
  
  /* 标题缩放 */
  h1 {
    font-size: var(--text-3xl);
    line-height: 1.3;
  }
  
  h2 {
    font-size: var(--text-2xl);
  }
  
  h3 {
    font-size: var(--text-xl);
  }
  
  /* 容器内边距 */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  /* 按钮全宽 */
  .btn-block-mobile {
    width: 100%;
    justify-content: center;
  }
  
  /* 卡片间距 */
  .card {
    padding: var(--space-4);
  }
  
  /* 栅格系统 */
  .grid-mobile-1 {
    grid-template-columns: 1fr !important;
  }
  
  /* 隐藏移动端不需要的元素 */
  .hide-on-mobile {
    display: none !important;
  }
  
  /* 移动端显示 */
  .show-on-mobile {
    display: block !important;
  }
  
  /* 触摸优化 - 增大点击区域 */
  a,
  button,
  input,
  select,
  textarea {
    min-height: 44px;
  }
  
  /* 表单元素 */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px; /* 防止 iOS 自动缩放 */
  }
}

/* ========================================
   小屏幕 (640px - 767px)
   ======================================== */
@media (min-width: 640px) and (max-width: 767px) {
  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  
  /* 2列布局 */
  .grid-sm-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   平板竖屏 (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  
  /* 2-3列布局 */
  .grid-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-md-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* 平板优化的字体 */
  h1 {
    font-size: var(--text-4xl);
  }
}

/* ========================================
   平板横屏/小笔记本 (1024px - 1279px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container {
    max-width: 1024px;
  }
  
  /* 3-4列布局 */
  .grid-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-lg-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
   桌面 (1280px+)
   ======================================== */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
  
  /* 4-5列布局 */
  .grid-xl-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .grid-xl-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  /* 桌面端隐藏 */
  .hide-on-desktop {
    display: none !important;
  }
}

/* ========================================
   大屏幕 (1536px+)
   ======================================== */
@media (min-width: 1536px) {
  .container {
    max-width: 1440px;
  }
  
  /* 更大的字体 */
  html {
    font-size: 17px;
  }
}

/* ========================================
   横屏检测
   ======================================== */
@media (orientation: landscape) and (max-height: 500px) {
  /* 横屏时减少垂直间距 */
  .banner {
    padding: var(--space-8) 0;
  }
  
  section {
    padding: var(--space-8) 0;
  }
}

/* ========================================
   高分辨率屏幕优化
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* 高清屏幕下的细节优化 */
  .card,
  .btn,
  img {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ========================================
   触摸设备优化
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /* 移除悬停效果，使用点击效果 */
  .card:hover {
    transform: none;
  }
  
  /* 增大触摸目标 */
  a,
  button {
    min-height: 48px;
    min-width: 48px;
  }
  
  /* 移除悬停动画 */
  *:hover {
    transition-duration: 0ms;
  }
}

/* ========================================
   鼠标设备优化
   ======================================== */
@media (hover: hover) and (pointer: fine) {
  /* 精确指针设备的悬停效果 */
  .hover-lift:hover {
    transform: translateY(-2px);
  }
  
  .hover-scale:hover {
    transform: scale(1.02);
  }
}

/* ========================================
   暗色模式响应式调整
   ======================================== */
@media (prefers-color-scheme: dark) {
  /* 暗色模式下的图片优化 */
  img {
    opacity: 0.9;
  }
  
  img:hover {
    opacity: 1;
  }
  
  /* 暗色模式下的阴影调整 */
  .card,
  .btn {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }
}

/* ========================================
   打印响应式
   ======================================== */
@media print {
  /* 移除所有背景 */
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  /* 隐藏导航和交互元素 */
  nav,
  .header,
  .footer,
  .mobile-menu,
  .back-to-top,
  button,
  .btn {
    display: none !important;
  }
  
  /* 优化打印布局 */
  .container {
    max-width: 100%;
    padding: 0;
  }
  
  /* 避免分页断裂 */
  .card,
  .company-item,
  .news-card {
    page-break-inside: avoid;
  }
  
  /* 显示链接地址 */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  /* 移除不必要的链接地址 */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
}

/* ========================================
   可访问性 - 大字体模式
   ======================================== */
@media (prefers-contrast: high) {
  /* 高对比度模式 */
  :root {
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
    --color-border-light: #000000;
  }
  
  .btn,
  .card {
    border: 2px solid currentColor;
  }
}

/* ========================================
   网络状态优化
   ======================================== */
@media (prefers-reduced-data: reduce) {
  /* 减少数据使用 */
  img {
    content: attr(alt);
  }
  
  video {
    display: none;
  }
  
  /* 移除背景图 */
  * {
    background-image: none !important;
  }
}

/* ========================================
   工具类 - 响应式显示/隐藏
   ======================================== */

/* 小屏幕隐藏 */
@media (max-width: 639px) {
  .hidden-xs {
    display: none !important;
  }
}

/* 中等屏幕隐藏 */
@media (min-width: 640px) and (max-width: 1023px) {
  .hidden-md {
    display: none !important;
  }
}

/* 大屏幕隐藏 */
@media (min-width: 1024px) {
  .hidden-lg {
    display: none !important;
  }
}

/* 仅小屏幕显示 */
.visible-xs {
  display: none !important;
}

@media (max-width: 639px) {
  .visible-xs {
    display: block !important;
  }
}

/* 仅中等屏幕显示 */
.visible-md {
  display: none !important;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .visible-md {
    display: block !important;
  }
}

/* 仅大屏幕显示 */
.visible-lg {
  display: none !important;
}

@media (min-width: 1024px) {
  .visible-lg {
    display: block !important;
  }
}

/* ========================================
   响应式间距工具
   ======================================== */
@media (max-width: 639px) {
  .p-responsive {
    padding: var(--space-4);
  }
  
  .py-responsive {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  
  .px-responsive {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .p-responsive {
    padding: var(--space-6);
  }
  
  .py-responsive {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  
  .px-responsive {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .p-responsive {
    padding: var(--space-8);
  }
  
  .py-responsive {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  
  .px-responsive {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* ========================================
   响应式文本对齐
   ======================================== */
@media (max-width: 767px) {
  .text-center-mobile {
    text-align: center !important;
  }
  
  .text-left-mobile {
    text-align: left !important;
  }
}

@media (min-width: 768px) {
  .text-center-desktop {
    text-align: center !important;
  }
  
  .text-left-desktop {
    text-align: left !important;
  }
}

/* ========================================
   响应式 Flex 方向
   ======================================== */
@media (max-width: 767px) {
  .flex-col-mobile {
    flex-direction: column !important;
  }
}

@media (min-width: 768px) {
  .flex-row-desktop {
    flex-direction: row !important;
  }
}

/* ========================================
   安全区域适配 (iOS)
   ======================================== */
@supports (padding: max(0px)) {
  .safe-area-inset {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
  
  .safe-area-inset-bottom {
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
}

/* ========================================
   性能优化 - 减少重绘
   ======================================== */
@media (max-width: 767px) {
  /* 移动端禁用复杂动画 */
  .complex-animation {
    animation: none !important;
    transition: opacity var(--transition-base) ease !important;
  }
  
  /* 移动端简化阴影 */
  .card,
  .btn {
    box-shadow: var(--shadow-sm) !important;
  }
}

/* ========================================
   移动端特定组件优化
   ======================================== */

/* 首页轮播图移动端优化 */
@media (max-width: 767px) {
  .slider-3d-container {
    border-radius: var(--radius-lg);
  }
  
  .slider-3d-prev,
  .slider-3d-next {
    width: 36px;
    height: 36px;
    font-size: var(--text-base);
  }
  
  .slider-3d-indicators {
    bottom: var(--space-2);
  }
  
  .slider-3d-indicators .slider-3d-dot,
  .slider-3d-indicators span {
    width: 8px;
    height: 8px;
  }
  
  .slider-3d-indicators .slider-3d-dot.active,
  .slider-3d-indicators span.active {
    width: 24px;
  }
}

/* 企业卡片移动端优化 */
@media (max-width: 639px) {
  .company-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .company-card {
    border-radius: var(--radius-lg);
  }
  
  .company-img {
    aspect-ratio: 16 / 9;
  }
  
  .company-info {
    padding: var(--space-4);
  }
  
  .company-info h3 {
    font-size: var(--text-base);
  }
  
  .company-detail {
    font-size: var(--text-xs);
  }
  
  .company-tags {
    gap: var(--space-1);
  }
  
  .tag {
    font-size: 10px;
    padding: var(--space-1) var(--space-2);
  }
}

/* 企业分类列表移动端优化 */
@media (max-width: 639px) {
  .company-list {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .company-item {
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }
  
  .item-img {
    width: 80px;
    height: 80px;
  }
  
  .item-info h3 {
    font-size: var(--text-sm);
  }
  
  .item-info p {
    font-size: 11px;
  }
  
  .item-actions {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .btn-view,
  .btn-website {
    width: 100%;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .company-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 新闻卡片移动端优化 */
@media (max-width: 639px) {
  .news-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .news-card {
    border-radius: var(--radius-lg);
  }
  
  .news-info {
    padding: var(--space-4);
  }
  
  .news-info h3 {
    font-size: var(--text-base);
  }
  
  .news-desc {
    font-size: var(--text-xs);
  }
  
  .news-meta {
    font-size: 10px;
  }
}

/* Tab 按钮移动端优化 */
@media (max-width: 639px) {
  .tab-buttons {
    gap: var(--space-2);
    padding: var(--space-2);
  }
  
  .tab-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    min-height: 40px;
    border-radius: var(--radius-md);
  }
  
  .news-tabs .news-tab-buttons {
    gap: var(--space-2);
  }
  
  .news-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    min-height: 36px;
  }
}

/* 新闻列表页移动端优化 */
@media (max-width: 639px) {
  .news-item {
    flex-direction: column;
    padding: var(--space-3);
    gap: var(--space-3);
  }
  
  .news-item .news-img {
    width: 100%;
    height: 180px;
  }
  
  .news-date {
    top: var(--space-2);
    left: var(--space-2);
    padding: var(--space-1) var(--space-2);
  }
  
  .news-date .day {
    font-size: var(--text-xl);
  }
  
  .news-item .news-info h3 {
    font-size: var(--text-base);
  }
  
  .news-meta {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  
  .news-meta .read-more {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: var(--space-2);
  }
}

/* 侧边栏移动端优化 */
@media (max-width: 1023px) {
  .sidebar,
  .news-sidebar {
    margin-top: var(--space-6);
  }
  
  .sidebar-card {
    padding: var(--space-4);
  }
  
  .sidebar-title {
    font-size: var(--text-base);
  }
  
  .hot-news-item {
    padding: var(--space-2);
  }
  
  .hot-news-item a {
    font-size: var(--text-xs);
  }
  
  .sidebar-company-item {
    padding: var(--space-2);
  }
  
  .sidebar-company-item .company-img {
    width: 50px;
    height: 50px;
  }
  
  .sidebar-company-item .company-info h4 {
    font-size: var(--text-xs);
  }
  
  .sidebar-company-item .company-info p {
    font-size: 10px;
  }
}

/* 新闻详情页移动端优化 */
@media (max-width: 639px) {
  .article-title {
    font-size: var(--text-xl);
  }
  
  .article-meta {
    gap: var(--space-2);
    font-size: var(--text-xs);
  }
  
  .article-content {
    font-size: var(--text-sm);
    line-height: 1.7;
  }
  
  .article-content h2 {
    font-size: var(--text-xl);
  }
  
  .article-content h3 {
    font-size: var(--text-lg);
  }
  
  .article-content h4 {
    font-size: var(--text-base);
  }
  
  .article-share {
    gap: var(--space-2);
  }
  
  .share-btn {
    width: 36px;
    height: 36px;
    font-size: var(--text-base);
  }
  
  .article-nav {
    gap: var(--space-3);
  }

  .article-nav .nav-item {
    padding: var(--space-4);
  }
  
  .related-news-slide {
    padding: 0;
  }
  
  .related-news-card .news-info {
    padding: var(--space-3);
  }
  
  .related-news-card .news-info h4 {
    font-size: var(--text-sm);
  }
}

/* 企业详情页移动端优化 */
@media (max-width: 767px) {
  .company-header {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-6);
    gap: var(--space-4);
  }
  
  .company-logo {
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }
  
  .company-basic h1 {
    font-size: var(--text-xl);
  }
  
  .company-meta {
    justify-content: center;
    gap: var(--space-2);
  }
  
  .company-contact {
    width: 100%;
    padding: var(--space-4);
  }
  
  .contact-btn {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    min-height: 40px;
  }
  
  .company-details {
    grid-template-columns: 1fr;
    padding: var(--space-4);
    gap: var(--space-3);
  }
  
  .detail-item {
    padding: var(--space-2);
  }
  
  .detail-item .label {
    font-size: var(--text-xs);
    min-width: 70px;
  }
  
  .detail-item .value {
    font-size: var(--text-sm);
  }
  
  .tab-btn {
    min-width: 100px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
  
  .tab-contents {
    padding: var(--space-4);
  }
  
  .photo-grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  
  .related-section {
    padding: var(--space-4);
  }
  
  .related-section h2 {
    font-size: var(--text-xl);
  }
  
  .related-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  
  .related-item {
    padding: var(--space-3);
  }
  
  .related-img {
    width: 60px;
    height: 60px;
  }
  
  .related-info h3 {
    font-size: var(--text-sm);
  }
  
  .related-info p {
    font-size: var(--text-xs);
  }
}

/* 筛选器移动端优化 */
@media (max-width: 767px) {
  .filter-box {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }
  
  .filter-title {
    font-size: var(--text-base);
  }
  
  .filter-select {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
  }
}

/* 分页移动端优化 */
@media (max-width: 639px) {
  .pagination {
    gap: var(--space-1);
  }
  
  .pagination a,
  .pagination span {
    min-width: 36px;
    min-height: 36px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
  }
}

/* 面包屑移动端优化 */
@media (max-width: 639px) {
  .breadcrumb {
    font-size: var(--text-xs);
    gap: var(--space-1);
    padding: var(--space-3) 0;
  }
  
  .breadcrumb a,
  .breadcrumb span {
    padding: var(--space-1);
  }
}

/* 搜索框移动端优化 */
@media (max-width: 639px) {
  .searchbox {
    max-width: 100%;
    flex-direction: column;
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .searchbox .key {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  .searchbox .submit {
    width: 100%;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
  }

  .hotcity {
    gap: var(--space-2);
    font-size: var(--text-xs);
  }

  .hotcity a {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* 横幅广告移动端优化 */
@media (max-width: 639px) {
  .ad-banner,
  .page-banner,
  .category-banner {
    border-radius: var(--radius-lg);
  }
}

/* 触摸设备滚动优化 */
@media (hover: none) and (pointer: coarse) {
  /* 平滑滚动 */
  * {
    -webkit-overflow-scrolling: touch;
  }
  
  /* 移除所有 transform 动画以提升性能 */
  .company-card:hover,
  .news-card:hover,
  .company-item:hover,
  .news-item:hover,
  .related-item:hover,
  .nav-item:hover {
    transform: none;
  }
  
  /* 保留边框颜色变化 */
  .company-card:active,
  .news-card:active,
  .company-item:active {
    border-color: var(--color-primary);
  }
}

/* 小屏幕横屏优化 */
@media (max-width: 767px) and (orientation: landscape) {
  .banner {
    padding: var(--space-6) 0;
  }
  
  .banner h1 {
    font-size: var(--text-2xl);
  }
  
  .banner-desc {
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
  }
  
  .slider-3d-container {
    aspect-ratio: 21 / 9;
  }
  
  .news-item .news-img {
    height: 140px;
  }
}

/* 超小屏幕优化 (< 375px) */
@media (max-width: 374px) {
  html {
    font-size: 14px;
  }
  
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  
  .company-card,
  .news-card,
  .company-item {
    padding: var(--space-3);
  }
  
  .tab-btn {
    min-width: 80px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
  
  .photo-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }
}