/* ===== 响应式设计样式 ===== */

/* ===== 断点定义 ===== */
/* 
  移动设备: 320px - 767px
  平板设备: 768px - 1023px  
  桌面设备: 1024px+
  大屏设备: 1440px+
*/

/* ===== 超小屏设备 (iPhone SE) - 320px to 374px ===== */
@media (max-width: 374px) {
  .weather-app {
    padding: var(--spacing-md);
  }
  
  .app-header {
    margin-bottom: var(--spacing-lg);
  }
  
  .header-content {
    padding: var(--spacing-sm);
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
  
  .location-info .location-title {
    font-size: var(--font-size-title2);
  }
  
  .time-display {
    font-size: var(--font-size-headline);
  }
  
  .weather-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    padding: 0;
  }
  
  .weather-card {
    min-height: 220px;
    padding: var(--spacing-md);
  }
  
  .weather-icon-container {
    height: 70px;
    margin-bottom: var(--spacing-sm);
  }
  
  .weather-icon {
    width: 45px;
    height: 45px;
  }
  
  .weather-title {
    font-size: var(--font-size-callout);
    margin-bottom: var(--spacing-xs);
  }
  
  .temp-value {
    font-size: 32px;
  }
  
  .temp-unit {
    font-size: var(--font-size-headline);
  }
  
  .weather-description {
    font-size: var(--font-size-footnote);
  }
  
  .weather-details {
    gap: var(--spacing-xs);
  }
  
  .detail-item {
    padding: var(--spacing-xs);
  }
  
  .detail-label {
    font-size: 10px;
  }
  
  .detail-value {
    font-size: var(--font-size-footnote);
  }
  
  .app-footer {
    margin-top: var(--spacing-lg);
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }
  
  .refresh-button {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-footnote);
  }
}

/* ===== 小屏设备 (iPhone) - 375px to 767px ===== */
@media (min-width: 375px) and (max-width: 767px) {
  .weather-app {
    padding: var(--spacing-lg);
  }
  
  .weather-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
  }
  
  .weather-card {
    min-height: 260px;
    padding: var(--spacing-lg);
  }
  
  .weather-icon-container {
    height: 90px;
  }
  
  .weather-icon {
    width: 60px;
    height: 60px;
  }
  
  .temp-value {
    font-size: 40px;
  }
  
  .weather-details {
    gap: var(--spacing-sm);
  }
  
  /* 横屏模式优化 */
  @media (orientation: landscape) {
    .weather-app {
      padding: var(--spacing-md);
    }
    
    .weather-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-sm);
    }
    
    .weather-card {
      min-height: 200px;
      padding: var(--spacing-md);
    }
    
    .weather-icon-container {
      height: 60px;
      margin-bottom: var(--spacing-sm);
    }
    
    .weather-icon {
      width: 40px;
      height: 40px;
    }
    
    .temp-value {
      font-size: 28px;
    }
    
    .weather-title {
      font-size: var(--font-size-callout);
    }
  }
}

/* ===== 中等屏设备 (iPad Mini) - 768px to 1023px ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .weather-app {
    padding: var(--spacing-xl);
  }
  
  .weather-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
  }
  
  .weather-card {
    min-height: 300px;
  }
  
  .weather-icon-container {
    height: 110px;
  }
  
  .weather-icon {
    width: 70px;
    height: 70px;
  }
  
  .temp-value {
    font-size: 44px;
  }
  
  /* iPad Pro 横屏模式 */
  @media (orientation: landscape) {
    .weather-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--spacing-md);
    }
    
    .weather-card {
      min-height: 280px;
    }
    
    .weather-icon-container {
      height: 90px;
    }
    
    .weather-icon {
      width: 60px;
      height: 60px;
    }
    
    .temp-value {
      font-size: 36px;
    }
  }
}

/* ===== 大屏设备 (桌面) - 1024px to 1439px ===== */
@media (min-width: 1024px) and (max-width: 1439px) {
  .weather-app {
    padding: var(--spacing-2xl);
    /* max-width: 1200px; */
    margin: 0 auto;
  }
  
  .weather-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
    padding: var(--spacing-lg);
  }
  
  .weather-card {
    min-height: 340px;
    padding: var(--spacing-xl);
  }
  
  .weather-icon-container {
    height: 130px;
  }
  
  .weather-icon {
    width: 90px;
    height: 90px;
  }
  
  .temp-value {
    font-size: 52px;
  }
  
  .weather-title {
    font-size: var(--font-size-title2);
  }
  
  .weather-description {
    font-size: var(--font-size-headline);
  }
  
  .detail-value {
    font-size: var(--font-size-callout);
  }
}

/* ===== 超大屏设备 (大桌面) - 1440px+ ===== */
@media (min-width: 1440px) {
  .weather-app {
    /* max-width: 1400px; */
    padding: 48px;
  }
  
  .weather-grid {
    gap: 40px;
    padding: var(--spacing-xl);
  }
  
  .weather-card {
    min-height: 380px;
    padding: 40px;
  }
  
  .weather-icon-container {
    height: 150px;
    margin-bottom: var(--spacing-lg);
  }
  
  .weather-icon {
    width: 100px;
    height: 100px;
  }
  
  .temp-value {
    font-size: 60px;
  }
  
  .temp-unit {
    font-size: var(--font-size-title1);
  }
  
  .weather-title {
    font-size: var(--font-size-title1);
    margin-bottom: var(--spacing-md);
  }
  
  .weather-description {
    font-size: var(--font-size-title3);
  }
  
  .weather-details {
    gap: var(--spacing-lg);
  }
  
  .detail-item {
    padding: var(--spacing-md);
  }
  
  .detail-label {
    font-size: var(--font-size-footnote);
    margin-bottom: var(--spacing-sm);
  }
  
  .detail-value {
    font-size: var(--font-size-headline);
  }
}

/* ===== 触摸设备优化 ===== */
@media (pointer: coarse) {
  .weather-card {
    /* 增大点击区域 */
    min-height: 280px;
  }
  
  .refresh-button {
    min-height: 44px;
    min-width: 88px;
    padding: var(--spacing-md) var(--spacing-lg);
  }
  
  /* 移除悬停效果 */
  .weather-card:hover {
    transform: none;
    box-shadow: var(--shadow-medium);
  }
  
  /* 增强焦点状态 */
  .weather-card:focus,
  .refresh-button:focus {
    outline: 3px solid var(--primary-blue);
    outline-offset: 3px;
  }
}

/* ===== 高精度设备优化 ===== */
@media (pointer: fine) {
  .weather-card {
    transition: all var(--animation-normal) var(--easing-default);
  }
  
  .weather-card:hover {
    transform: translateY(-8px);
  }
}

/* ===== 高密度屏幕优化 ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .weather-card {
    /* 更精细的边框 */
    border-width: 0.5px;
  }
  
  .sun-center,
  .cloud-part,
  .wind-line,
  .rain-drop {
    /* 高分辨率下的锐化 */
    transform: translateZ(0);
    will-change: transform;
  }
}

/* ===== 容器查询 (现代浏览器支持) ===== */
@supports (container-type: inline-size) {
  .weather-grid {
    container-type: inline-size;
  }
  
  @container (max-width: 600px) {
    .weather-card {
      grid-column: span 2;
    }
  }
  
  @container (min-width: 900px) {
    .weather-card {
      grid-column: span 1;
    }
  }
}

/* ===== 打印样式 ===== */
@media print {
  .weather-app {
    background: white !important;
    color: black !important;
    padding: 20px !important;
  }
  
  .weather-card {
    background: white !important;
    border: 2px solid #ccc !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 20px;
  }
  
  .card-background {
    display: none !important;
  }
  
  .weather-icon {
    display: none !important;
  }
  
  .app-footer,
  .refresh-button {
    display: none !important;
  }
  
  .weather-title,
  .temp-value,
  .detail-value {
    color: black !important;
    text-shadow: none !important;
  }
}

/* ===== 深色模式响应式调整 ===== */
@media (prefers-color-scheme: dark) {
  @media (max-width: 767px) {
    .weather-app {
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    }
  }
  
  @media (min-width: 768px) {
    .weather-app {
      background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 100%);
    }
  }
}

/* ===== 减少动画偏好的响应式处理 ===== */
@media (prefers-reduced-motion: reduce) {
  @media (max-width: 767px) {
    .weather-card {
      animation: none !important;
    }
    
    .weather-card:hover {
      transform: scale(1.02);
    }
  }
}

/* ===== 高对比度模式的响应式调整 ===== */
@media (prefers-contrast: high) {
  @media (max-width: 767px) {
    .weather-card {
      border: 3px solid white;
      background: rgba(0, 0, 0, 0.9) !important;
    }
  }
  
  @media (min-width: 768px) {
    .weather-card {
      border: 2px solid white;
      background: rgba(0, 0, 0, 0.8) !important;
    }
  }
}

/* ===== 自定义断点工具类 ===== */
.mobile-only {
  display: block;
}

.tablet-only,
.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  
  .tablet-only {
    display: block;
  }
}

@media (min-width: 1024px) {
  .tablet-only {
    display: none;
  }
  
  .desktop-only {
    display: block;
  }
}

/* ===== 网格响应式工具类 ===== */
.grid-responsive {
  display: grid;
  gap: var(--spacing-md);
}

.grid-responsive.cols-1 { grid-template-columns: 1fr; }
.grid-responsive.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-responsive.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-responsive.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
  .grid-responsive.cols-2,
  .grid-responsive.cols-3,
  .grid-responsive.cols-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .grid-responsive.cols-3,
  .grid-responsive.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-responsive.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}