/**
 * 蓝寻 Design System V2.0 - 基础工具类
 * 仅保留项目常用布局与响应式能力，不构建通用原子化框架。
 */

/* 页面容器 */
.lx-page-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--lx-page-max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--lx-page-padding);
  padding-left: var(--lx-page-padding);
}

/* Flex 布局 */
.lx-flex { display: flex; }
.lx-inline-flex { display: inline-flex; }
.lx-flex-wrap { flex-wrap: wrap; }
.lx-flex-column { flex-direction: column; }
.lx-flex-1 { min-width: 0; flex: 1; }
.lx-items-start { align-items: flex-start; }
.lx-items-center { align-items: center; }
.lx-items-end { align-items: flex-end; }
.lx-justify-start { justify-content: flex-start; }
.lx-justify-between { justify-content: space-between; }
.lx-justify-center { justify-content: center; }
.lx-justify-end { justify-content: flex-end; }

/* Grid 布局 */
.lx-grid { display: grid; }
.lx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lx-grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* 常用间距 */
.lx-gap-4 { gap: var(--lx-space-4); }
.lx-gap-8 { gap: var(--lx-space-8); }
.lx-gap-12 { gap: var(--lx-space-12); }
.lx-gap-16 { gap: var(--lx-space-16); }
.lx-gap-20 { gap: var(--lx-space-20); }
.lx-gap-24 { gap: var(--lx-space-24); }
.lx-gap-32 { gap: var(--lx-space-32); }

.lx-mt-8 { margin-top: var(--lx-space-8); }
.lx-mt-16 { margin-top: var(--lx-space-16); }
.lx-mt-24 { margin-top: var(--lx-space-24); }
.lx-mb-8 { margin-bottom: var(--lx-space-8); }
.lx-mb-16 { margin-bottom: var(--lx-space-16); }
.lx-mb-24 { margin-bottom: var(--lx-space-24); }
.lx-p-8 { padding: var(--lx-space-8); }
.lx-p-16 { padding: var(--lx-space-16); }
.lx-p-24 { padding: var(--lx-space-24); }

/* 文本和可见性 */
.lx-text-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-text-center { text-align: center; }
.lx-text-right { text-align: right; }
.lx-hidden { display: none !important; }

.lx-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 居中与滚动 */
.lx-center {
  display: grid;
  place-items: center;
}

.lx-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lx-scroll-y {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 响应式显示隐藏 */
.lx-mobile-only { display: none !important; }

@media (max-width: 1023px) {
  .lx-hide-tablet { display: none !important; }
  .lx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .lx-desktop-only { display: none !important; }
  .lx-mobile-only { display: initial !important; }
  .lx-grid--2,
  .lx-grid--3,
  .lx-grid--4 { grid-template-columns: minmax(0, 1fr); }
}