/* ═══════════════════════════════════════════════════════
   曜石紫金 · 紫微星河 2.0 — Responsive Grid System
   命理智算系统服务器版 UI V2.0 | UI-001B

   §15.2 断点阶梯（设计顺序 360→3840）：
     576px   大屏手机/横屏（<576 手机）
     768px   平板（576-767 大屏手机/横屏）
     1024px  常规桌面（768-1023 平板）
     1440px  大屏桌面/2K（1024-1439 常规桌面）
     2560px  4K/超宽屏（1440-2559 大屏桌面）
   断点只控制布局，不得造成移动端缺失核心内容。
   ═══════════════════════════════════════════════════════ */

@import './design-tokens.css';

/* ── Container ────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.container-narrow { max-width: var(--content-max-width); }
.container-full   { max-width: none; }

/* ── Grid ─────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
}

/* Tablet 768+ */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(var(--grid-columns-tablet), 1fr);
  }
}

/* 大屏手机/横屏 576+（§15.2 补齐） */
@media (min-width: 576px) {
  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }
}

/* Desktop 1024+（§15.2：常规桌面起点 1024，原 1200 归一） */
@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .grid {
    grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
    gap: var(--space-6);
  }
}

/* Wide 1440+ */
@media (min-width: 1440px) {
  .grid {
    gap: var(--space-8);
  }
}

/* ── Grid Column Spans ────────────────────────── */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (min-width: 768px) {
  .col-md-2  { grid-column: span 2; }
  .col-md-3  { grid-column: span 3; }
  .col-md-4  { grid-column: span 4; }
  .col-md-6  { grid-column: span 6; }
  .col-md-8  { grid-column: span 8; }
}

@media (min-width: 1024px) {
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-8  { grid-column: span 8; }
}

/* ── Flex Utilities ───────────────────────────── */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ── Layout Patterns ──────────────────────────── */
/* Sidebar + Main (Workspace / CMS / Admin) */
.layout-sidebar {
  display: flex;
  min-height: 100vh;
}
.layout-sidebar > nav {
  width: var(--sidebar-width);
  flex-shrink: 0;
}
.layout-sidebar > main {
  flex: 1;
  min-width: 0;
  padding: var(--space-6);
}

@media (max-width: 767px) {
  .layout-sidebar > nav { display: none; }
  .layout-sidebar > main { padding: var(--space-4); }
}

@media (min-width: 1024px) {
  .layout-sidebar > nav { width: var(--sidebar-width); }
}

/* ── Section Spacing ──────────────────────────── */
.section { padding: var(--space-12) 0; }
.section-sm { padding: var(--space-6) 0; }
.section-lg { padding: var(--space-16) 0; }

@media (min-width: 768px) {
  .section { padding: var(--space-16) 0; }
  .section-lg { padding: var(--space-24) 0; }
}

/* ── Visibility ───────────────────────────────── */
.hide-mobile  { display: none; }
.hide-tablet  { display: none; }
.hide-desktop { display: block; }

@media (min-width: 768px) {
  .hide-mobile  { display: initial; }
  .hide-tablet  { display: none; }
}
@media (min-width: 1024px) {
  .hide-tablet  { display: initial; }
  .hide-desktop { display: none; }
}

/* 4K/超宽屏 2560+（§15.2 补齐） */
@media (min-width: 2560px) {
  .grid { gap: var(--space-10, 40px); }
  .section { padding: 96px 0; }
  .section-lg { padding: 128px 0; }
}

/* 真 4K 3840+（V1.0 §14 验收宽度 3840） */
@media (min-width: 3840px) {
  .container { max-width: 1600px; }
  .grid { gap: var(--space-12, 48px); }
  .section { padding: 120px 0; }
  .section-lg { padding: 160px 0; }
}

/* ── Bottom Bar Spacing (mobile workspace) ────── */
.has-bottom-bar {
  padding-bottom: calc(var(--space-4) + var(--bottom-bar-height));
}