/**
 * grid.css — 12 列响应式栅格（叠在 Pico CSS 上使用）
 * 列间距用 flex gap 实现（16px），落在子项盒子外部，
 * 子项可以是自带背景/边框的卡片，不会互相粘连。
 *
 * 用法：
 *   <div class="row">
 *     <div class="col-3">侧栏</div>
 *     <div class="col-9">内容</div>
 *   </div>
 *
 * 规则：
 *   - .row                栅格容器（.grid12 为旧别名，等价）
 *   - .col-1 ~ .col-12   占 12 列中的 N 列（≥768px 生效）
 *   - .col                等分列：N 个 .col 平分一行，可与 col-N 混用
 *   - .col-offset-1 ~ 11 左侧偏移 N 列
 *   - <768px 时所有列默认变为整行（100%）
 *   - 小屏想保持多列，加 .col-sm-N（如 col-sm-6 = 手机上一行两列）
 */

.row,
.grid12 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.row > *,
.grid12 > * {
  box-sizing: border-box;
  width: 100%;
}

/* 12 列宽度（已扣除与相邻列共享的 gap，任意组合都精确铺满一行）
 * 公式：calc(N/12 * 100% - 16px * (12-N)/12) */
.col-1  { width: calc(8.3333%  - 14.6667px); }
.col-2  { width: calc(16.6667% - 13.3333px); }
.col-3  { width: calc(25%      - 12px); }
.col-4  { width: calc(33.3333% - 10.6667px); }
.col-5  { width: calc(41.6667% - 9.3333px); }
.col-6  { width: calc(50%      - 8px); }
.col-7  { width: calc(58.3333% - 6.6667px); }
.col-8  { width: calc(66.6667% - 5.3333px); }
.col-9  { width: calc(75%      - 4px); }
.col-10 { width: calc(83.3333% - 2.6667px); }
.col-11 { width: calc(91.6667% - 1.3333px); }
.col-12 { width: 100%; }

/* 等分列：N 个 .col 平分一行（与内容宽度无关，严格等分）
 * 也可与固定列混用：<div class="col-3">侧栏</div><div class="col">自动占满剩余</div> */
.row > .col,
.grid12 > .col {
  flex: 1 1 0;
  width: auto;
}

/* 偏移 */
.col-offset-1  { margin-left: calc(8.3333%  + 1.3333px); }
.col-offset-2  { margin-left: calc(16.6667% + 2.6667px); }
.col-offset-3  { margin-left: calc(25%      + 4px); }
.col-offset-4  { margin-left: calc(33.3333% + 5.3333px); }
.col-offset-5  { margin-left: calc(41.6667% + 6.6667px); }
.col-offset-6  { margin-left: calc(50%      + 8px); }
.col-offset-7  { margin-left: calc(58.3333% + 9.3333px); }
.col-offset-8  { margin-left: calc(66.6667% + 10.6667px); }
.col-offset-9  { margin-left: calc(75%      + 12px); }
.col-offset-10 { margin-left: calc(83.3333% + 13.3333px); }
.col-offset-11 { margin-left: calc(91.6667% + 14.6667px); }

/* 小屏（<768px）：默认全部堆叠为整行 */
@media (max-width: 767px) {
  .row > [class*='col-'],
  .grid12 > [class*='col-'] { width: 100%; }
  .row > [class*='col-offset-'],
  .grid12 > [class*='col-offset-'] { margin-left: 0; }
  .row > .col,
  .grid12 > .col { flex: 0 0 100%; width: 100%; }

  .col-sm-1  { width: calc(8.3333%  - 14.6667px) !important; }
  .col-sm-2  { width: calc(16.6667% - 13.3333px) !important; }
  .col-sm-3  { width: calc(25%      - 12px) !important; }
  .col-sm-4  { width: calc(33.3333% - 10.6667px) !important; }
  .col-sm-6  { width: calc(50%      - 8px) !important; }
  .col-sm-12 { width: 100% !important; }
}

/* --------------------------------------------
 * 间距工具类（同 ICEUI 命名，5px 递增，0~40）
 * 外边距：m / mt / mb / ml / mr
 * 内边距：p / pt / pb / pl / pr
 * 示例：mt10 = margin-top:10px; pl20 = padding-left:20px
 * -------------------------------------------- */

.m0 { margin: 0; } .p0 { padding: 0; }
.mt0 { margin-top: 0; }    .mb0 { margin-bottom: 0; }
.ml0 { margin-left: 0; }   .mr0 { margin-right: 0; }
.pt0 { padding-top: 0; }   .pb0 { padding-bottom: 0; }
.pl0 { padding-left: 0; }  .pr0 { padding-right: 0; }

.mt5  { margin-top: 5px; }    .mt10 { margin-top: 10px; }   .mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }   .mt25 { margin-top: 25px; }   .mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }   .mt40 { margin-top: 40px; }

.mb5  { margin-bottom: 5px; } .mb10 { margin-bottom: 10px; } .mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; } .mb25 { margin-bottom: 25px; } .mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; } .mb40 { margin-bottom: 40px; }

.ml5  { margin-left: 5px; }   .ml10 { margin-left: 10px; }  .ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }  .ml25 { margin-left: 25px; }  .ml30 { margin-left: 30px; }
.ml35 { margin-left: 35px; }  .ml40 { margin-left: 40px; }

.mr5  { margin-right: 5px; }  .mr10 { margin-right: 10px; } .mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; } .mr25 { margin-right: 25px; } .mr30 { margin-right: 30px; }
.mr35 { margin-right: 35px; } .mr40 { margin-right: 40px; }

.m5  { margin: 5px; }  .m10 { margin: 10px; } .m15 { margin: 15px; }
.m20 { margin: 20px; } .m25 { margin: 25px; } .m30 { margin: 30px; }
.m35 { margin: 35px; } .m40 { margin: 40px; }

.pt5  { padding-top: 5px; }   .pt10 { padding-top: 10px; }  .pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }  .pt25 { padding-top: 25px; }  .pt30 { padding-top: 30px; }
.pt35 { padding-top: 35px; }  .pt40 { padding-top: 40px; }

.pb5  { padding-bottom: 5px; } .pb10 { padding-bottom: 10px; } .pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; } .pb25 { padding-bottom: 25px; } .pb30 { padding-bottom: 30px; }
.pb35 { padding-bottom: 35px; } .pb40 { padding-bottom: 40px; }

.pl5  { padding-left: 5px; }   .pl10 { padding-left: 10px; } .pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }  .pl25 { padding-left: 25px; } .pl30 { padding-left: 30px; }
.pl35 { padding-left: 35px; }  .pl40 { padding-left: 40px; }

.pr5  { padding-right: 5px; }  .pr10 { padding-right: 10px; } .pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; } .pr25 { padding-right: 25px; } .pr30 { padding-right: 30px; }
.pr35 { padding-right: 35px; } .pr40 { padding-right: 40px; }

.p5  { padding: 5px; }  .p10 { padding: 10px; } .p15 { padding: 15px; }
.p20 { padding: 20px; } .p25 { padding: 25px; } .p30 { padding: 30px; }
.p35 { padding: 35px; } .p40 { padding: 40px; }