@charset "UTF-8";

/* ===== layout.css - 栅格+容器+响应式断点（全局加载） ===== */

/* Grid System */
.row {
  margin: 0 -15px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.col {
  float: left;
  padding: 0 15px;
  min-height: 1px;
}

.col-1 { width: 8.33333%; }
.col-2 { width: 16.66667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333%; }
.col-5 { width: 41.66667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333%; }
.col-8 { width: 66.66667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333%; }
.col-11 { width: 91.66667%; }
.col-12 { width: 100%; }

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-full {
  width: 100%;
  padding: 0 20px;
}

/* Section spacing */
.section {
  padding: 80px 0;
}

.section-sm {
  padding: 50px 0;
}

.section-lg {
  padding: 100px 0;
}

/* ===== Responsive Breakpoints ===== */

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
  .container {
    max-width: 960px;
  }
  .col-md-1 { width: 8.33333%; }
  .col-md-2 { width: 16.66667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.33333%; }
  .col-md-6 { width: 50%; }
  .col-md-8 { width: 66.66667%; }
  .col-md-12 { width: 100%; }
}

/* Mobile (<= 768px) */
@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 0 15px;
  }
  .col-sm-1 { width: 8.33333%; }
  .col-sm-2 { width: 16.66667%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.33333%; }
  .col-sm-6 { width: 50%; }
  .col-sm-12 { width: 100%; }
  .section {
    padding: 50px 0;
  }
  .section-lg {
    padding: 60px 0;
  }
}

/* Small Mobile (<= 480px) */
@media (max-width: 480px) {
  .col-xs-12 { width: 100%; }
  .col-xs-6 { width: 50%; }
}

/* Flex grid fallback for IE */
.flex-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.flex-grid > .col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* Card grid */
.card-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.card-grid .card-item {
  width: 25%;
  padding: 0 15px;
  margin-bottom: 30px;
}

@media (max-width: 1024px) {
  .card-grid .card-item {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .card-grid .card-item {
    width: 100%;
  }
}