/* grid-only.css
   Minimal Bootstrap-like grid:
   - .row
   - .col (flexible)
   - .col-auto
   - .col-1 ... .col-12
   - responsive: .col-md-*, .col-lg-*
   No other Bootstrap styles included.
*/

/* --- Config --- */
:root{
  --grid-columns: 12;
  --gutter: 1.5rem;        /* total gutter between cols (left+right) */
  --gutter-half: calc(var(--gutter) / 2);
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
}

/* --- Row --- */
.row{
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter-half) * -1);
  margin-right: calc(var(--gutter-half) * -1);
  box-sizing: border-box;
  width: 100%;
  /* 移除 text-align: center; 以避免影响列布局 */
}

/* Make direct children get the gutter padding */
.row > [class*="col-"],
.row > .col,
.row > .col-auto,
.row > [class^="col"]{
  padding-left: var(--gutter-half);
  padding-right: var(--gutter-half);
  box-sizing: border-box;
}

/* --- Basic column behaviors --- */
/* flexible column that fills remaining space */
.col{
  flex: 1 0 0%;
  min-width: 0; /* prevents overflow of long content */
}

/* auto-width column (size by content) */
.col-auto{
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

/* Generate .col-1 .. .col-12 */
.row > .col-1  { flex: 0 0 auto; width: calc(100% * 1 / var(--grid-columns)); max-width: calc(100% * 1 / var(--grid-columns)); }
.row > .col-2  { flex: 0 0 auto; width: calc(100% * 2 / var(--grid-columns)); max-width: calc(100% * 2 / var(--grid-columns)); }
.row > .col-3  { flex: 0 0 auto; width: calc(100% * 3 / var(--grid-columns)); max-width: calc(100% * 3 / var(--grid-columns)); }
.row > .col-4  { flex: 0 0 auto; width: calc(100% * 4 / var(--grid-columns)); max-width: calc(100% * 4 / var(--grid-columns)); }
.row > .col-5  { flex: 0 0 auto; width: calc(100% * 5 / var(--grid-columns)); max-width: calc(100% * 5 / var(--grid-columns)); }
.row > .col-6  { flex: 0 0 auto; width: calc(100% * 6 / var(--grid-columns)); max-width: calc(100% * 6 / var(--grid-columns)); }
.row > .col-7  { flex: 0 0 auto; width: calc(100% * 7 / var(--grid-columns)); max-width: calc(100% * 7 / var(--grid-columns)); }
.row > .col-8  { flex: 0 0 auto; width: calc(100% * 8 / var(--grid-columns)); max-width: calc(100% * 8 / var(--grid-columns)); }
.row > .col-9  { flex: 0 0 auto; width: calc(100% * 9 / var(--grid-columns)); max-width: calc(100% * 9 / var(--grid-columns)); }
.row > .col-10 { flex: 0 0 auto; width: calc(100% * 10 / var(--grid-columns)); max-width: calc(100% * 10 / var(--grid-columns)); }
.row > .col-11 { flex: 0 0 auto; width: calc(100% * 11 / var(--grid-columns)); max-width: calc(100% * 11 / var(--grid-columns)); }
.row > .col-12 { flex: 0 0 auto; width: calc(100% * 12 / var(--grid-columns)); max-width: calc(100% * 12 / var(--grid-columns)); }

/* full-width fallback (useful if someone writes only .col without .row) */
.col-12 { width: 100%; max-width: 100%; }

/* --- Responsive: md (>=768px) --- */
@media (min-width: var(--breakpoint-md)){
  .col-md { flex: 1 0 0%; min-width: 0; }        /* flexible at md+ */
  .col-md-auto { flex: 0 0 auto; width: auto; }

  .col-md-1  { flex: 0 0 auto; width: calc(100% * 1 / var(--grid-columns)); max-width: calc(100% * 1 / var(--grid-columns)); }
  .col-md-2  { flex: 0 0 auto; width: calc(100% * 2 / var(--grid-columns)); max-width: calc(100% * 2 / var(--grid-columns)); }
  .col-md-3  { flex: 0 0 auto; width: calc(100% * 3 / var(--grid-columns)); max-width: calc(100% * 3 / var(--grid-columns)); }
  .col-md-4  { flex: 0 0 auto; width: calc(100% * 4 / var(--grid-columns)); max-width: calc(100% * 4 / var(--grid-columns)); }
  .col-md-5  { flex: 0 0 auto; width: calc(100% * 5 / var(--grid-columns)); max-width: calc(100% * 5 / var(--grid-columns)); }
  .col-md-6  { flex: 0 0 auto; width: calc(100% * 6 / var(--grid-columns)); max-width: calc(100% * 6 / var(--grid-columns)); }
  .col-md-7  { flex: 0 0 auto; width: calc(100% * 7 / var(--grid-columns)); max-width: calc(100% * 7 / var(--grid-columns)); }
  .col-md-8  { flex: 0 0 auto; width: calc(100% * 8 / var(--grid-columns)); max-width: calc(100% * 8 / var(--grid-columns)); }
  .col-md-9  { flex: 0 0 auto; width: calc(100% * 9 / var(--grid-columns)); max-width: calc(100% * 9 / var(--grid-columns)); }
  .col-md-10 { flex: 0 0 auto; width: calc(100% * 10 / var(--grid-columns)); max-width: calc(100% * 10 / var(--grid-columns)); }
  .col-md-11 { flex: 0 0 auto; width: calc(100% * 11 / var(--grid-columns)); max-width: calc(100% * 11 / var(--grid-columns)); }
  .col-md-12 { flex: 0 0 auto; width: calc(100% * 12 / var(--grid-columns)); max-width: calc(100% * 12 / var(--grid-columns)); }
}

/* --- Responsive: lg (>=992px) --- */
@media (min-width: var(--breakpoint-lg)){
  .col-lg { flex: 1 0 0%; min-width: 0; }        /* flexible at lg+ */
  .col-lg-auto { flex: 0 0 auto; width: auto; }

  .col-lg-1  { flex: 0 0 auto; width: calc(100% * 1 / var(--grid-columns)); max-width: calc(100% * 1 / var(--grid-columns)); }
  .col-lg-2  { flex: 0 0 auto; width: calc(100% * 2 / var(--grid-columns)); max-width: calc(100% * 2 / var(--grid-columns)); }
  .col-lg-3  { flex: 0 0 auto; width: calc(100% * 3 / var(--grid-columns)); max-width: calc(100% * 3 / var(--grid-columns)); }
  .col-lg-4  { flex: 0 0 auto; width: calc(100% * 4 / var(--grid-columns)); max-width: calc(100% * 4 / var(--grid-columns)); }
  .col-lg-5  { flex: 0 0 auto; width: calc(100% * 5 / var(--grid-columns)); max-width: calc(100% * 5 / var(--grid-columns)); }
  .col-lg-6  { flex: 0 0 auto; width: calc(100% * 6 / var(--grid-columns)); max-width: calc(100% * 6 / var(--grid-columns)); }
  .col-lg-7  { flex: 0 0 auto; width: calc(100% * 7 / var(--grid-columns)); max-width: calc(100% * 7 / var(--grid-columns)); }
  .col-lg-8  { flex: 0 0 auto; width: calc(100% * 8 / var(--grid-columns)); max-width: calc(100% * 8 / var(--grid-columns)); }
  .col-lg-9  { flex: 0 0 auto; width: calc(100% * 9 / var(--grid-columns)); max-width: calc(100% * 9 / var(--grid-columns)); }
  .col-lg-10 { flex: 0 0 auto; width: calc(100% * 10 / var(--grid-columns)); max-width: calc(100% * 10 / var(--grid-columns)); }
  .col-lg-11 { flex: 0 0 auto; width: calc(100% * 11 / var(--grid-columns)); max-width: calc(100% * 11 / var(--grid-columns)); }
  .col-lg-12 { flex: 0 0 auto; width: calc(100% * 12 / var(--grid-columns)); max-width: calc(100% * 12 / var(--grid-columns)); }
}

/* --- Utility: clear floats fallback & box-sizing --- */
*,
*::before,
*::after { box-sizing: border-box; }

/* Optional: .no-gutters to remove gutter spacing on a row */
.row.no-gutters{
  margin-left: 0;
  margin-right: 0;
}
.row.no-gutters > [class*="col-"],
.row.no-gutters > .col,
.row.no-gutters > .col-auto{
  padding-left: 0;
  padding-right: 0;
}