/* Minimal & Modern Bento Grid System (极简有活力主题版) */

:root {
  --bento-gap: 16px;
  --bento-container-max: 1160px;
}

/* Container: 居中+响应宽度 */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bento-gap);
  padding-right: var(--bento-gap);
  max-width: 100%;
  box-sizing: border-box;
  background: var(--color-bg);
}

/* Grid Row: flex布局 */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--bento-gap));
  margin-right: calc(-1 * var(--bento-gap));
  box-sizing: border-box;
}

/* Grid Col: 基础结构 */
.row > [class*="col-"] {
  box-sizing: border-box;
  min-height: 1px;
  padding-left: var(--bento-gap);
  padding-right: var(--bento-gap);
  background: transparent;
  border-radius: var(--radius-main);
}

/* 移动端 */
.col-mb-1  { flex: 0 0 8.333%; max-width: 8.333%; }
.col-mb-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-mb-3  { flex: 0 0 25%; max-width: 25%; }
.col-mb-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-mb-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-mb-6  { flex: 0 0 50%; max-width: 50%; }
.col-mb-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-mb-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-mb-9  { flex: 0 0 75%; max-width: 75%; }
.col-mb-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-mb-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-mb-12 { flex: 0 0 100%; max-width: 100%; }

/* Tablet */
@media (min-width: 768px) {
  .container { max-width: 728px; }
  .col-tb-1  { flex: 0 0 8.333%; max-width: 8.333%; }
  .col-tb-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-tb-3  { flex: 0 0 25%; max-width: 25%; }
  .col-tb-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-tb-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-tb-6  { flex: 0 0 50%; max-width: 50%; }
  .col-tb-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-tb-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-tb-9  { flex: 0 0 75%; max-width: 75%; }
  .col-tb-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-tb-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-tb-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Desktop */
@media (min-width: 992px) {
  .container { max-width: 952px; }
  .col-1  { flex: 0 0 8.333%; max-width: 8.333%; }
  .col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-3  { flex: 0 0 25%; max-width: 25%; }
  .col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-6  { flex: 0 0 50%; max-width: 50%; }
  .col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-9  { flex: 0 0 75%; max-width: 75%; }
  .col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
  .container { max-width: var(--bento-container-max); }
  .col-wd-1  { flex: 0 0 8.333%; max-width: 8.333%; }
  .col-wd-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-wd-3  { flex: 0 0 25%; max-width: 25%; }
  .col-wd-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-wd-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-wd-6  { flex: 0 0 50%; max-width: 50%; }
  .col-wd-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-wd-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-wd-9  { flex: 0 0 75%; max-width: 75%; }
  .col-wd-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-wd-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-wd-12 { flex: 0 0 100%; max-width: 100%; }
}

/* 偏移类（常用极简） */
[class*="col-"][class*="offset-"] {
  margin-left: var(--bento-gap);
}

/* 隐藏类（极简版） */
@media (max-width: 767px) {
  .kit-hidden-mb { display: none !important; }
}
@media (max-width: 991px) {
  .kit-hidden-tb { display: none !important; }
}
@media (max-width: 1199px) {
  .kit-hidden { display: none !important; }
}

/* 极简高亮 */
.highlight {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-main);
  padding: 2px 6px;
  font-weight: 600;
}

/* 清除浮动（flex不用，但为兼容老结构保留） */
.clearfix::before, .clearfix::after,
.row::before, .row::after {
  content: "";
  display: table;
}
.clearfix::after, .row::after {
  clear: both;
}

/* 兼容性: 禁止低版本IE下的float布局 */
@media (max-width: 767px) {
  .row > [class*="col-"] { float: none !important; }
}