/* 
 * 媒体查询断点管理
 * 统一管理所有响应式断点，避免重复定义
 */

/* 断点定义 */
:root {
  /* 移动端断点 */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  --breakpoint-xxxl: 1600px;
  --breakpoint-4k: 1800px;
  
  /* 容器最大宽度 */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
  --container-wide: 1400px;
  --container-extra-wide: 1600px;
  --container-4k: 1800px;
}

/* 通用媒体查询类 */
@media (max-width: 480px) {
  .hide-xs { display: none !important; }
  .show-xs { display: block !important; }
}

@media (min-width: 481px) and (max-width: 576px) {
  .hide-sm { display: none !important; }
  .show-sm { display: block !important; }
}

@media (min-width: 577px) and (max-width: 768px) {
  .hide-md { display: none !important; }
  .show-md { display: block !important; }
}

@media (min-width: 769px) and (max-width: 992px) {
  .hide-lg { display: none !important; }
  .show-lg { display: block !important; }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .hide-xl { display: none !important; }
  .show-xl { display: block !important; }
}

@media (min-width: 1201px) {
  .hide-xxl { display: none !important; }
  .show-xxl { display: block !important; }
}

/* 移动端优先的断点 */
@media (max-width: 576px) {
  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }
}

@media (min-width: 577px) {
  .mobile-only { display: none !important; }
  .desktop-only { display: block !important; }
}

/* 平板断点 */
@media (min-width: 577px) and (max-width: 992px) {
  .tablet-only { display: block !important; }
  .mobile-only, .desktop-only { display: none !important; }
}

@media (max-width: 576px), (min-width: 993px) {
  .tablet-only { display: none !important; }
}

/* 大屏幕断点 */
@media (min-width: 1401px) {
  .large-screen-only { display: block !important; }
  .small-screen-only { display: none !important; }
}

@media (max-width: 1400px) {
  .large-screen-only { display: none !important; }
  .small-screen-only { display: block !important; }
}