/* Kole UI Mobile · Layout 样式 — 对齐 .design_library/kole-ui-mobile/spec/移动端规格.md §20
   栅格：一行（row）里放若干列（col）。移动端绝大多数场景是「等分」，所以 columns 是行级开关
   （2 / 3 / 4 等分）；需要不等宽时用列上的 span 类覆盖（span 规则写成两段选择器，
   保证它能压过行级等分规则 —— 两者同源，顺序在后者胜出）。
   --kole-m-layout-gutter 是组件级变量，业务侧可直接覆盖（不必传 gutter）。 */

.kole-m-layout {
  --kole-m-layout-gutter: var(--kole-space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--kole-m-layout-gutter);
  box-sizing: border-box;
  width: 100%;
}

/* 变体 gutter：列间距四档（0 = 无缝，用分割线或底色分栏时才用） */
.kole-m-layout--gutter-0 { --kole-m-layout-gutter: 0px; }
.kole-m-layout--gutter-8 { --kole-m-layout-gutter: var(--kole-space-8); }
.kole-m-layout--gutter-16 { --kole-m-layout-gutter: var(--kole-space-16); }
.kole-m-layout--gutter-24 { --kole-m-layout-gutter: var(--kole-space-24); }

/* 变体 align：交叉轴对齐（列高不同时观察得到差别） */
.kole-m-layout--align-start { align-items: flex-start; }
.kole-m-layout--align-center { align-items: center; }
.kole-m-layout--align-end { align-items: flex-end; }
.kole-m-layout--align-stretch { align-items: stretch; }

/* 变体 columns：行内等分（0 = 不禁用等分，列宽由 span 或内容决定） */
.kole-m-layout--cols-2 > .kole-m-layout__col { flex-basis: calc((100% - var(--kole-m-layout-gutter)) / 2); }
.kole-m-layout--cols-3 > .kole-m-layout__col { flex-basis: calc((100% - 2 * var(--kole-m-layout-gutter)) / 3); }
.kole-m-layout--cols-4 > .kole-m-layout__col { flex-basis: calc((100% - 3 * var(--kole-m-layout-gutter)) / 4); }

/* 变体 wrap=false：不换行，横向滚动（看板式横向列） */
.kole-m-layout.is-nowrap { flex-wrap: nowrap; overflow-x: auto; }

.kole-m-layout__col {
  box-sizing: border-box;
  min-width: 0;
  flex: 0 0 auto;
  flex-basis: 100%;
}

/* 列宽（12 栅格）：两段选择器，确保能覆盖行级等分 */
.kole-m-layout .kole-m-layout__col--12 { flex-basis: 100%; }
.kole-m-layout .kole-m-layout__col--8 { flex-basis: calc((100% - 2 * var(--kole-m-layout-gutter)) / 3); }
.kole-m-layout .kole-m-layout__col--6 { flex-basis: calc((100% - var(--kole-m-layout-gutter)) / 2); }
.kole-m-layout .kole-m-layout__col--4 { flex-basis: calc((100% - 2 * var(--kole-m-layout-gutter)) / 3); }
.kole-m-layout .kole-m-layout__col--3 { flex-basis: calc((100% - 3 * var(--kole-m-layout-gutter)) / 4); }
.kole-m-layout .kole-m-layout__col--2 { flex-basis: calc((100% - 5 * var(--kole-m-layout-gutter)) / 6); }
.kole-m-layout .kole-m-layout__col--auto { flex: 1 1 auto; flex-basis: 0; }

/* 列内容基座：业务把卡片 / 列表放进列里；本类只提供内边距与最小高度示例 */
.kole-m-layout__panel {
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--kole-space-12);
  border-radius: var(--kole-radius-medium);
  background: var(--kole-color-page-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-label);
  line-height: 1.4;
}

/* 整行占满的横条列（如「更多」入口），保持 44px 触控高度 */
.kole-m-layout__col--bar {
  display: flex;
  align-items: center;
  min-height: var(--kole-m-touch-target);
  padding: 0 var(--kole-space-12);
  border-radius: var(--kole-radius-medium);
  background: var(--kole-color-table-header-bg);
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}