/* skarn-framework — responsive grid (content / narrative pages).
 * ==============================================================
 * Ported 1:1 from the reference design system. Mobile-first 12-column
 * grid, Bootstrap breakpoints (sm 576 / md 768 / lg 992 / xl 1200 /
 * xxl 1400). Default gutter = 2rem (--skf-space-2). Row alignment uses
 * the flex utilities in skf-utilities.css.
 *
 *   <div class="skf-container"><div class="skf-row">
 *     <div class="skf-col-6">…</div><div class="skf-col-6">…</div>
 *   </div></div>
 */

/*
 * Skarn UI — Grid（响应式网格系统）
 *
 * 与 Bootstrap 相同的移动优先策略与断点：
 *   base <576 / sm 576 / md 768 / lg 992 / xl 1200 / xxl 1400
 * 默认 gutter 为 2rem（1rem × 2），与全库 8px 节奏一致。
 * 行内对齐（justify-content / align-items 等）使用 skf-utilities.css 的 flex 工具类。
 */

/* ================= 断点常量（仅供文档参考，CSS 中直接使用媒体查询） =================
 * sm = 576px, md = 768px, lg = 992px, xl = 1200px, xxl = 1400px */

/* ================= 容器 (Container) ================= */
.skf-container,
.skf-container--fluid {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--skf-space-2);
}
@media (min-width: 576px) {
  .skf-container { max-inline-size: 540px; }
  .skf-container--sm { max-inline-size: 540px; }
}
@media (min-width: 768px) {
  .skf-container { max-inline-size: 720px; }
  .skf-container--md { max-inline-size: 720px; }
}
@media (min-width: 992px) {
  .skf-container { max-inline-size: 960px; }
  .skf-container--lg { max-inline-size: 960px; }
}
@media (min-width: 1200px) {
  .skf-container { max-inline-size: 1140px; }
  .skf-container--xl { max-inline-size: 1140px; }
}
@media (min-width: 1400px) {
  .skf-container { max-inline-size: 1320px; }
  .skf-container--xxl { max-inline-size: 1320px; }
}

/* ================= 行 (Row) ================= */
/* 默认 gutter = 2（1rem 左右各一），列宽减以消除行负 margin 造成的溢出 */
.skf-row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(-1 * var(--skf-space-2));
}
.skf-row > * {
  padding-inline: var(--skf-space-2);
}

/* ================= 列 (Col) ================= */
.skf-col {
  flex: 1 0 0%;
  min-inline-size: 0; /* 允许内容收缩，避免溢出 */
  max-inline-size: 100%;
}
.skf-col-auto {
  flex: 0 0 auto;
  inline-size: auto;
}
.skf-col-1  { flex: 0 0 auto; inline-size: 8.333333%; }
.skf-col-2  { flex: 0 0 auto; inline-size: 16.666667%; }
.skf-col-3  { flex: 0 0 auto; inline-size: 25%; }
.skf-col-4  { flex: 0 0 auto; inline-size: 33.333333%; }
.skf-col-5  { flex: 0 0 auto; inline-size: 41.666667%; }
.skf-col-6  { flex: 0 0 auto; inline-size: 50%; }
.skf-col-7  { flex: 0 0 auto; inline-size: 58.333333%; }
.skf-col-8  { flex: 0 0 auto; inline-size: 66.666667%; }
.skf-col-9  { flex: 0 0 auto; inline-size: 75%; }
.skf-col-10 { flex: 0 0 auto; inline-size: 83.333333%; }
.skf-col-11 { flex: 0 0 auto; inline-size: 91.666667%; }
.skf-col-12 { flex: 0 0 auto; inline-size: 100%; }

/* ================= 偏移 (Offset) ================= */
.skf-offset-1  { margin-inline-start: 8.333333%; }
.skf-offset-2  { margin-inline-start: 16.666667%; }
.skf-offset-3  { margin-inline-start: 25%; }
.skf-offset-4  { margin-inline-start: 33.333333%; }
.skf-offset-5  { margin-inline-start: 41.666667%; }
.skf-offset-6  { margin-inline-start: 50%; }
.skf-offset-7  { margin-inline-start: 58.333333%; }
.skf-offset-8  { margin-inline-start: 66.666667%; }
.skf-offset-9  { margin-inline-start: 75%; }
.skf-offset-10 { margin-inline-start: 83.333333%; }
.skf-offset-11 { margin-inline-start: 91.666667%; }

/* ================= 排序 (Order) ================= */
.skf-order-1 { order: 1; }
.skf-order-2 { order: 2; }
.skf-order-3 { order: 3; }
.skf-order-4 { order: 4; }
.skf-order-5 { order: 5; }
.skf-order--first { order: -1; }
.skf-order--last  { order: 6; }

/* ================= 列数控制 (Row Cols) ================= */
.skf-row-cols-1 > * { flex: 0 0 auto; inline-size: 100%; }
.skf-row-cols-2 > * { flex: 0 0 auto; inline-size: 50%; }
.skf-row-cols-3 > * { flex: 0 0 auto; inline-size: 33.333333%; }
.skf-row-cols-4 > * { flex: 0 0 auto; inline-size: 25%; }
.skf-row-cols-5 > * { flex: 0 0 auto; inline-size: 20%; }
.skf-row-cols-6 > * { flex: 0 0 auto; inline-size: 16.666667%; }

/* ================= 间距 (Gutters) ================= */
/* g-* 修改行负 margin 与子列 padding，步进为 0.5rem（8px 节奏） */
.skf-g-0, .skf-gx-0 { margin-inline: 0; }
.skf-g-0 > *, .skf-gx-0 > * { padding-inline: 0; }
.skf-gy-0 > * { padding-block: 0; }
.skf-g-1, .skf-gx-1 { margin-inline: calc(-1 * var(--skf-space-1) / 2); }
.skf-g-1 > *, .skf-gx-1 > * { padding-inline: calc(var(--skf-space-1) / 2); }
.skf-gy-1 > * { padding-block: calc(var(--skf-space-1) / 2); }
.skf-g-2, .skf-gx-2 { margin-inline: calc(-1 * var(--skf-space-2) / 2); }
.skf-g-2 > *, .skf-gx-2 > * { padding-inline: calc(var(--skf-space-2) / 2); }
.skf-gy-2 > * { padding-block: calc(var(--skf-space-2) / 2); }
.skf-g-3, .skf-gx-3 { margin-inline: calc(-1 * var(--skf-space-3) / 2); }
.skf-g-3 > *, .skf-gx-3 > * { padding-inline: calc(var(--skf-space-3) / 2); }
.skf-gy-3 > * { padding-block: calc(var(--skf-space-3) / 2); }
.skf-g-4, .skf-gx-4 { margin-inline: calc(-1 * var(--skf-space-4) / 2); }
.skf-g-4 > *, .skf-gx-4 > * { padding-inline: calc(var(--skf-space-4) / 2); }
.skf-gy-4 > * { padding-block: calc(var(--skf-space-4) / 2); }
.skf-g-5, .skf-gx-5 { margin-inline: calc(-1 * var(--skf-space-5) / 2); }
.skf-g-5 > *, .skf-gx-5 > * { padding-inline: calc(var(--skf-space-5) / 2); }
.skf-gy-5 > * { padding-block: calc(var(--skf-space-5) / 2); }
.skf-g-6, .skf-gx-6 { margin-inline: calc(-1 * var(--skf-space-6) / 2); }
.skf-g-6 > *, .skf-gx-6 > * { padding-inline: calc(var(--skf-space-6) / 2); }
.skf-gy-6 > * { padding-block: calc(var(--skf-space-6) / 2); }

/* ================= 断点 (Breakpoints) ================= */

/* ---- sm ≥ 576px ---- */
@media (min-width: 576px) {
  .skf-col-sm { flex: 1 0 0%; min-inline-size: 0; max-inline-size: 100%; }
  .skf-col-sm-auto { flex: 0 0 auto; inline-size: auto; }
  .skf-col-sm-1  { flex: 0 0 auto; inline-size: 8.333333%; }
  .skf-col-sm-2  { flex: 0 0 auto; inline-size: 16.666667%; }
  .skf-col-sm-3  { flex: 0 0 auto; inline-size: 25%; }
  .skf-col-sm-4  { flex: 0 0 auto; inline-size: 33.333333%; }
  .skf-col-sm-5  { flex: 0 0 auto; inline-size: 41.666667%; }
  .skf-col-sm-6  { flex: 0 0 auto; inline-size: 50%; }
  .skf-col-sm-7  { flex: 0 0 auto; inline-size: 58.333333%; }
  .skf-col-sm-8  { flex: 0 0 auto; inline-size: 66.666667%; }
  .skf-col-sm-9  { flex: 0 0 auto; inline-size: 75%; }
  .skf-col-sm-10 { flex: 0 0 auto; inline-size: 83.333333%; }
  .skf-col-sm-11 { flex: 0 0 auto; inline-size: 91.666667%; }
  .skf-col-sm-12 { flex: 0 0 auto; inline-size: 100%; }
  .skf-offset-sm-1  { margin-inline-start: 8.333333%; }
  .skf-offset-sm-2  { margin-inline-start: 16.666667%; }
  .skf-offset-sm-3  { margin-inline-start: 25%; }
  .skf-offset-sm-4  { margin-inline-start: 33.333333%; }
  .skf-offset-sm-5  { margin-inline-start: 41.666667%; }
  .skf-offset-sm-6  { margin-inline-start: 50%; }
  .skf-offset-sm-7  { margin-inline-start: 58.333333%; }
  .skf-offset-sm-8  { margin-inline-start: 66.666667%; }
  .skf-offset-sm-9  { margin-inline-start: 75%; }
  .skf-offset-sm-10 { margin-inline-start: 83.333333%; }
  .skf-offset-sm-11 { margin-inline-start: 91.666667%; }
  .skf-order-sm-1 { order: 1; }
  .skf-order-sm-2 { order: 2; }
  .skf-order-sm-3 { order: 3; }
  .skf-order-sm-4 { order: 4; }
  .skf-order-sm-5 { order: 5; }
  .skf-order-sm--first { order: -1; }
  .skf-order-sm--last  { order: 6; }
  .skf-row-cols-sm-1 > * { flex: 0 0 auto; inline-size: 100%; }
  .skf-row-cols-sm-2 > * { flex: 0 0 auto; inline-size: 50%; }
  .skf-row-cols-sm-3 > * { flex: 0 0 auto; inline-size: 33.333333%; }
  .skf-row-cols-sm-4 > * { flex: 0 0 auto; inline-size: 25%; }
  .skf-row-cols-sm-5 > * { flex: 0 0 auto; inline-size: 20%; }
  .skf-row-cols-sm-6 > * { flex: 0 0 auto; inline-size: 16.666667%; }
}

/* ---- md ≥ 768px ---- */
@media (min-width: 768px) {
  .skf-col-md { flex: 1 0 0%; min-inline-size: 0; max-inline-size: 100%; }
  .skf-col-md-auto { flex: 0 0 auto; inline-size: auto; }
  .skf-col-md-1  { flex: 0 0 auto; inline-size: 8.333333%; }
  .skf-col-md-2  { flex: 0 0 auto; inline-size: 16.666667%; }
  .skf-col-md-3  { flex: 0 0 auto; inline-size: 25%; }
  .skf-col-md-4  { flex: 0 0 auto; inline-size: 33.333333%; }
  .skf-col-md-5  { flex: 0 0 auto; inline-size: 41.666667%; }
  .skf-col-md-6  { flex: 0 0 auto; inline-size: 50%; }
  .skf-col-md-7  { flex: 0 0 auto; inline-size: 58.333333%; }
  .skf-col-md-8  { flex: 0 0 auto; inline-size: 66.666667%; }
  .skf-col-md-9  { flex: 0 0 auto; inline-size: 75%; }
  .skf-col-md-10 { flex: 0 0 auto; inline-size: 83.333333%; }
  .skf-col-md-11 { flex: 0 0 auto; inline-size: 91.666667%; }
  .skf-col-md-12 { flex: 0 0 auto; inline-size: 100%; }
  .skf-offset-md-1  { margin-inline-start: 8.333333%; }
  .skf-offset-md-2  { margin-inline-start: 16.666667%; }
  .skf-offset-md-3  { margin-inline-start: 25%; }
  .skf-offset-md-4  { margin-inline-start: 33.333333%; }
  .skf-offset-md-5  { margin-inline-start: 41.666667%; }
  .skf-offset-md-6  { margin-inline-start: 50%; }
  .skf-offset-md-7  { margin-inline-start: 58.333333%; }
  .skf-offset-md-8  { margin-inline-start: 66.666667%; }
  .skf-offset-md-9  { margin-inline-start: 75%; }
  .skf-offset-md-10 { margin-inline-start: 83.333333%; }
  .skf-offset-md-11 { margin-inline-start: 91.666667%; }
  .skf-order-md-1 { order: 1; }
  .skf-order-md-2 { order: 2; }
  .skf-order-md-3 { order: 3; }
  .skf-order-md-4 { order: 4; }
  .skf-order-md-5 { order: 5; }
  .skf-order-md--first { order: -1; }
  .skf-order-md--last  { order: 6; }
  .skf-row-cols-md-1 > * { flex: 0 0 auto; inline-size: 100%; }
  .skf-row-cols-md-2 > * { flex: 0 0 auto; inline-size: 50%; }
  .skf-row-cols-md-3 > * { flex: 0 0 auto; inline-size: 33.333333%; }
  .skf-row-cols-md-4 > * { flex: 0 0 auto; inline-size: 25%; }
  .skf-row-cols-md-5 > * { flex: 0 0 auto; inline-size: 20%; }
  .skf-row-cols-md-6 > * { flex: 0 0 auto; inline-size: 16.666667%; }
}

/* ---- lg ≥ 992px ---- */
@media (min-width: 992px) {
  .skf-col-lg { flex: 1 0 0%; min-inline-size: 0; max-inline-size: 100%; }
  .skf-col-lg-auto { flex: 0 0 auto; inline-size: auto; }
  .skf-col-lg-1  { flex: 0 0 auto; inline-size: 8.333333%; }
  .skf-col-lg-2  { flex: 0 0 auto; inline-size: 16.666667%; }
  .skf-col-lg-3  { flex: 0 0 auto; inline-size: 25%; }
  .skf-col-lg-4  { flex: 0 0 auto; inline-size: 33.333333%; }
  .skf-col-lg-5  { flex: 0 0 auto; inline-size: 41.666667%; }
  .skf-col-lg-6  { flex: 0 0 auto; inline-size: 50%; }
  .skf-col-lg-7  { flex: 0 0 auto; inline-size: 58.333333%; }
  .skf-col-lg-8  { flex: 0 0 auto; inline-size: 66.666667%; }
  .skf-col-lg-9  { flex: 0 0 auto; inline-size: 75%; }
  .skf-col-lg-10 { flex: 0 0 auto; inline-size: 83.333333%; }
  .skf-col-lg-11 { flex: 0 0 auto; inline-size: 91.666667%; }
  .skf-col-lg-12 { flex: 0 0 auto; inline-size: 100%; }
  .skf-offset-lg-1  { margin-inline-start: 8.333333%; }
  .skf-offset-lg-2  { margin-inline-start: 16.666667%; }
  .skf-offset-lg-3  { margin-inline-start: 25%; }
  .skf-offset-lg-4  { margin-inline-start: 33.333333%; }
  .skf-offset-lg-5  { margin-inline-start: 41.666667%; }
  .skf-offset-lg-6  { margin-inline-start: 50%; }
  .skf-offset-lg-7  { margin-inline-start: 58.333333%; }
  .skf-offset-lg-8  { margin-inline-start: 66.666667%; }
  .skf-offset-lg-9  { margin-inline-start: 75%; }
  .skf-offset-lg-10 { margin-inline-start: 83.333333%; }
  .skf-offset-lg-11 { margin-inline-start: 91.666667%; }
  .skf-order-lg-1 { order: 1; }
  .skf-order-lg-2 { order: 2; }
  .skf-order-lg-3 { order: 3; }
  .skf-order-lg-4 { order: 4; }
  .skf-order-lg-5 { order: 5; }
  .skf-order-lg--first { order: -1; }
  .skf-order-lg--last  { order: 6; }
  .skf-row-cols-lg-1 > * { flex: 0 0 auto; inline-size: 100%; }
  .skf-row-cols-lg-2 > * { flex: 0 0 auto; inline-size: 50%; }
  .skf-row-cols-lg-3 > * { flex: 0 0 auto; inline-size: 33.333333%; }
  .skf-row-cols-lg-4 > * { flex: 0 0 auto; inline-size: 25%; }
  .skf-row-cols-lg-5 > * { flex: 0 0 auto; inline-size: 20%; }
  .skf-row-cols-lg-6 > * { flex: 0 0 auto; inline-size: 16.666667%; }
}

/* ---- xl ≥ 1200px ---- */
@media (min-width: 1200px) {
  .skf-col-xl { flex: 1 0 0%; min-inline-size: 0; max-inline-size: 100%; }
  .skf-col-xl-auto { flex: 0 0 auto; inline-size: auto; }
  .skf-col-xl-1  { flex: 0 0 auto; inline-size: 8.333333%; }
  .skf-col-xl-2  { flex: 0 0 auto; inline-size: 16.666667%; }
  .skf-col-xl-3  { flex: 0 0 auto; inline-size: 25%; }
  .skf-col-xl-4  { flex: 0 0 auto; inline-size: 33.333333%; }
  .skf-col-xl-5  { flex: 0 0 auto; inline-size: 41.666667%; }
  .skf-col-xl-6  { flex: 0 0 auto; inline-size: 50%; }
  .skf-col-xl-7  { flex: 0 0 auto; inline-size: 58.333333%; }
  .skf-col-xl-8  { flex: 0 0 auto; inline-size: 66.666667%; }
  .skf-col-xl-9  { flex: 0 0 auto; inline-size: 75%; }
  .skf-col-xl-10 { flex: 0 0 auto; inline-size: 83.333333%; }
  .skf-col-xl-11 { flex: 0 0 auto; inline-size: 91.666667%; }
  .skf-col-xl-12 { flex: 0 0 auto; inline-size: 100%; }
  .skf-offset-xl-1  { margin-inline-start: 8.333333%; }
  .skf-offset-xl-2  { margin-inline-start: 16.666667%; }
  .skf-offset-xl-3  { margin-inline-start: 25%; }
  .skf-offset-xl-4  { margin-inline-start: 33.333333%; }
  .skf-offset-xl-5  { margin-inline-start: 41.666667%; }
  .skf-offset-xl-6  { margin-inline-start: 50%; }
  .skf-offset-xl-7  { margin-inline-start: 58.333333%; }
  .skf-offset-xl-8  { margin-inline-start: 66.666667%; }
  .skf-offset-xl-9  { margin-inline-start: 75%; }
  .skf-offset-xl-10 { margin-inline-start: 83.333333%; }
  .skf-offset-xl-11 { margin-inline-start: 91.666667%; }
  .skf-order-xl-1 { order: 1; }
  .skf-order-xl-2 { order: 2; }
  .skf-order-xl-3 { order: 3; }
  .skf-order-xl-4 { order: 4; }
  .skf-order-xl-5 { order: 5; }
  .skf-order-xl--first { order: -1; }
  .skf-order-xl--last  { order: 6; }
  .skf-row-cols-xl-1 > * { flex: 0 0 auto; inline-size: 100%; }
  .skf-row-cols-xl-2 > * { flex: 0 0 auto; inline-size: 50%; }
  .skf-row-cols-xl-3 > * { flex: 0 0 auto; inline-size: 33.333333%; }
  .skf-row-cols-xl-4 > * { flex: 0 0 auto; inline-size: 25%; }
  .skf-row-cols-xl-5 > * { flex: 0 0 auto; inline-size: 20%; }
  .skf-row-cols-xl-6 > * { flex: 0 0 auto; inline-size: 16.666667%; }
}

/* ---- xxl ≥ 1400px ---- */
@media (min-width: 1400px) {
  .skf-col-xxl { flex: 1 0 0%; min-inline-size: 0; max-inline-size: 100%; }
  .skf-col-xxl-auto { flex: 0 0 auto; inline-size: auto; }
  .skf-col-xxl-1  { flex: 0 0 auto; inline-size: 8.333333%; }
  .skf-col-xxl-2  { flex: 0 0 auto; inline-size: 16.666667%; }
  .skf-col-xxl-3  { flex: 0 0 auto; inline-size: 25%; }
  .skf-col-xxl-4  { flex: 0 0 auto; inline-size: 33.333333%; }
  .skf-col-xxl-5  { flex: 0 0 auto; inline-size: 41.666667%; }
  .skf-col-xxl-6  { flex: 0 0 auto; inline-size: 50%; }
  .skf-col-xxl-7  { flex: 0 0 auto; inline-size: 58.333333%; }
  .skf-col-xxl-8  { flex: 0 0 auto; inline-size: 66.666667%; }
  .skf-col-xxl-9  { flex: 0 0 auto; inline-size: 75%; }
  .skf-col-xxl-10 { flex: 0 0 auto; inline-size: 83.333333%; }
  .skf-col-xxl-11 { flex: 0 0 auto; inline-size: 91.666667%; }
  .skf-col-xxl-12 { flex: 0 0 auto; inline-size: 100%; }
  .skf-offset-xxl-1  { margin-inline-start: 8.333333%; }
  .skf-offset-xxl-2  { margin-inline-start: 16.666667%; }
  .skf-offset-xxl-3  { margin-inline-start: 25%; }
  .skf-offset-xxl-4  { margin-inline-start: 33.333333%; }
  .skf-offset-xxl-5  { margin-inline-start: 41.666667%; }
  .skf-offset-xxl-6  { margin-inline-start: 50%; }
  .skf-offset-xxl-7  { margin-inline-start: 58.333333%; }
  .skf-offset-xxl-8  { margin-inline-start: 66.666667%; }
  .skf-offset-xxl-9  { margin-inline-start: 75%; }
  .skf-offset-xxl-10 { margin-inline-start: 83.333333%; }
  .skf-offset-xxl-11 { margin-inline-start: 91.666667%; }
  .skf-order-xxl-1 { order: 1; }
  .skf-order-xxl-2 { order: 2; }
  .skf-order-xxl-3 { order: 3; }
  .skf-order-xxl-4 { order: 4; }
  .skf-order-xxl-5 { order: 5; }
  .skf-order-xxl--first { order: -1; }
  .skf-order-xxl--last  { order: 6; }
  .skf-row-cols-xxl-1 > * { flex: 0 0 auto; inline-size: 100%; }
  .skf-row-cols-xxl-2 > * { flex: 0 0 auto; inline-size: 50%; }
  .skf-row-cols-xxl-3 > * { flex: 0 0 auto; inline-size: 33.333333%; }
  .skf-row-cols-xxl-4 > * { flex: 0 0 auto; inline-size: 25%; }
  .skf-row-cols-xxl-5 > * { flex: 0 0 auto; inline-size: 20%; }
  .skf-row-cols-xxl-6 > * { flex: 0 0 auto; inline-size: 16.666667%; }
}