/* ============================================
   响应式容器与栅格系统
   依赖：全局断点变量 (--breakpoint_*)
   ============================================ */

/* ----- 容器：根据断点自动设置最大宽度 ----- */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing_base);
  padding-right: var(--spacing_base);
}

/* 响应式容器宽度（使用媒体查询，基于全局断点变量需编译为实际px，此处直接写rem值） */
@media (min-width: 36rem) { /* 576px */
  .container {
    max-width: var(--container_max_width_sm);
  }
}
@media (min-width: 48rem) { /* 768px */
  .container {
    max-width: var(--container_max_width_md);
  }
}
@media (min-width: 62rem) { /* 992px */
  .container {
    max-width: var(--container_max_width_lg);
  }
}
@media (min-width: 75rem) { /* 1200px */
  .container {
    max-width: var(--container_max_width_xl);
  }
}
@media (min-width: 87.5rem) { /* 1400px */
  .container {
    max-width: var(--container_max_width_xxl);
  }
}

/* 可选：容器流体（始终100%宽度） */
.container-fluid {
  max-width: 100%;
}

/* ----- 栅格行与列（基础） ----- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--spacing_sm));
  margin-right: calc(-1 * var(--spacing_sm));
}

.col {
  flex: 1 0 0%;
  padding-left: var(--spacing_sm);
  padding-right: var(--spacing_sm);
}

/* ----- 固定列宽系统（1-12） ----- */
.col-1, .row-12>* { flex: 0 0 8.333333%; max-width: 8.333333%; }
.row-8>* { flex: 0 0 12.5%; max-width: 12.5%; }
.col-2, .row-6>* { flex: 0 0 16.666667%; max-width: 16.666667%; }
.row-5>* { flex: 0 0 20%; max-width: 20%; }
.col-3, .row-4>* { flex: 0 0 25%; max-width: 25%; }
.col-4, .row-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6, .row-2>* { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12, .row-1>* { flex: 0 0 100%; max-width: 100%; }

/* 列间距（与.row的负margin配合，已经在.col中定义padding） */

/* ----- 响应式前缀（sm, md, lg, xl, xxl） ----- */
/* 示例：.col-sm-6 表示在 sm 断点及以上占 6 列 */
@media (min-width: 36rem) {
  .col-sm-1, .row-sm-12>* { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .row-sm-8>* { flex: 0 0 12.5%; max-width: 12.5%; }
  .col-sm-2, .row-sm-6>* { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .row-sm-5>* { flex: 0 0 20%; max-width: 20%; }
  .col-sm-3, .row-sm-4>* { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4, .row-sm-3>* { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6, .row-sm-2>* { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12, .row-sm-1>* { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 48rem) {
  .col-md-1, .row-md-12>* { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .row-md-8>* { flex: 0 0 12.5%; max-width: 12.5%; }
  .col-md-2, .row-md-6>* { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .row-md-5>* { flex: 0 0 20%; max-width: 20%; }
  .col-md-3, .row-md-4>* { flex: 0 0 25%; max-width: 25%; }
  .col-md-4, .row-md-3>* { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6, .row-md-2>* { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12, .row-md-1>* { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 62rem) {
  .col-lg-1, .row-lg-12>* { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .row-lg-8>* { flex: 0 0 12.5%; max-width: 12.5%; }
  .col-lg-2, .row-lg-6>* { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .row-lg-5>* { flex: 0 0 20%; max-width: 20%; }
  .col-lg-3, .row-lg-4>* { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4, .row-lg-3>* { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-6, .row-lg-2>* { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12, .row-lg-1>* { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 75rem) {
  .col-xl-1, .row-xl-12>* { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .row-xl-8>* { flex: 0 0 12.5%; max-width: 12.5%; }
  .col-xl-2, .row-xl-6>* { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .row-xl-5>* { flex: 0 0 20%; max-width: 20%; }
  .col-xl-3, .row-xl-4>* { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4, .row-xl-3>* { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xl-6, .row-xl-2>* { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-xl-12, .row-xl-1>* { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 87.5rem) {
  .col-xxl-1, .row-xxl-12>* { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .row-xxl-8>* { flex: 0 0 12.5%; max-width: 12.5%; }
  .col-xxl-2, .row-xxl-6>* { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .row-xxl-5>* { flex: 0 0 20%; max-width: 20%; }
  .col-xxl-3, .row-xxl-4>* { flex: 0 0 25%; max-width: 25%; }
  .col-xxl-4, .row-xxl-3>* { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xxl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xxl-6, .row-xxl-2>* { flex: 0 0 50%; max-width: 50%; }
  .col-xxl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xxl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-xxl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-xxl-12, .row-xxl-1>* { flex: 0 0 100%; max-width: 100%; }
}