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

/* ===== 栅格系统 ===== */
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
}

.col-1 { width: 8.333333%; padding-left: 15px; padding-right: 15px; }
.col-2 { width: 16.666667%; padding-left: 15px; padding-right: 15px; }
.col-3 { width: 25%; padding-left: 15px; padding-right: 15px; }
.col-4 { width: 33.333333%; padding-left: 15px; padding-right: 15px; }
.col-5 { width: 41.666667%; padding-left: 15px; padding-right: 15px; }
.col-6 { width: 50%; padding-left: 15px; padding-right: 15px; }
.col-7 { width: 58.333333%; padding-left: 15px; padding-right: 15px; }
.col-8 { width: 66.666667%; padding-left: 15px; padding-right: 15px; }
.col-9 { width: 75%; padding-left: 15px; padding-right: 15px; }
.col-10 { width: 83.333333%; padding-left: 15px; padding-right: 15px; }
.col-11 { width: 91.666667%; padding-left: 15px; padding-right: 15px; }
.col-12 { width: 100%; padding-left: 15px; padding-right: 15px; }

/* 清除flex的col使用float */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  float: left;
  min-height: 1px;
}

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

/* ===== 响应式断点 ===== */
/* PC大屏 (>=1200px) */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

/* 平板横屏 (>=992px and <1200px) */
@media (max-width: 1199px) {
  .container {
    max-width: 960px;
  }
}

/* 平板竖屏 (>=768px and <992px) */
@media (max-width: 991px) {
  .container {
    max-width: 720px;
  }
  .col-md-6 { width: 50%; }
  .col-md-12 { width: 100%; }
  .col-md-4 { width: 33.333333%; }
  .col-md-3 { width: 25%; }
}

/* 手机横屏 (>=576px and <768px) */
@media (max-width: 767px) {
  .container {
    max-width: 540px;
    padding: 0 15px;
  }
  .col-sm-6 { width: 50%; }
  .col-sm-12 { width: 100%; }
}

/* 手机竖屏 (<576px) */
@media (max-width: 575px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
  .col-xs-12 { width: 100%; }
  .col-xs-6 { width: 50%; }
}

/* ===== 通用模块间距 ===== */
.section {
  padding: 60px 0;
}

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

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

/* ===== 卡片样式 ===== */
.card {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(47, 27, 61, 0.08);
  transition: var(--transition);
}

.card:hover {
  box-shadow: 0 4px 20px rgba(47, 27, 61, 0.15);
}

/* ===== 内页通用布局 ===== */
.page-container {
  padding: 40px 0 60px;
}

.page-content {
  background: #fff;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(47, 27, 61, 0.06);
}

.page-sidebar {
  background: #fff;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 12px rgba(47, 27, 61, 0.06);
}

.sidebar-title {
  font-size: 18px;
  color: var(--primary);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--secondary);
  margin-bottom: 20px;
}

.sidebar-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-list li a {
  color: var(--text-dark);
  font-size: 14px;
}

.sidebar-list li a:hover {
  color: var(--secondary);
}

/* ===== 分页样式 ===== */
.pagination {
  text-align: center;
  padding: 30px 0;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-dark);
  font-size: 13px;
  transition: var(--transition);
}

.pagination a:hover {
  background-color: var(--secondary);
  color: var(--dark-bg);
  border-color: var(--secondary);
}

.pagination .current {
  background-color: var(--primary);
  color: var(--text-white);
  border-color: var(--primary);
}

/* ===== 标签样式 ===== */
.tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: rgba(0, 217, 192, 0.1);
  color: var(--secondary);
  border-radius: 20px;
  font-size: 12px;
  margin-right: 8px;
  margin-bottom: 8px;
  transition: var(--transition);
}

.tag:hover {
  background-color: var(--secondary);
  color: var(--dark-bg);
}