/* =============================================
   布局样式 - layout.css
   功能：栅格系统、容器、响应式断点
   ============================================= */

/* 栅格系统 */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 0 15px;
}

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

/* 页面section通用 */
.section {
  padding: var(--section-pad);
}

.section-dark {
  background-color: var(--dark-bg);
  color: var(--text-white);
}

.section-light {
  background-color: var(--page-bg);
}

.section-white {
  background-color: var(--card-bg);
}

/* 内容区域 */
.content-area {
  padding: 40px 0;
}

.content-area h2 {
  font-size: 28px;
  margin: 30px 0 20px;
  color: var(--primary);
}

.content-area h3 {
  font-size: 20px;
  margin: 24px 0 16px;
  color: var(--text-dark);
}

.content-area p {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-dark);
}

.content-area ul {
  margin-bottom: 16px;
  padding-left: 20px;
  list-style: disc;
}

.content-area ul li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.8;
}

.content-area ol {
  margin-bottom: 16px;
  padding-left: 20px;
  list-style: decimal;
}

.content-area ol li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.8;
}

/* 响应式断点 - PC端（默认） */
@media screen and (min-width: 1024px) {
  .container {
    max-width: var(--container-max);
  }
}

/* 平板端 */
@media screen and (max-width: 1023px) {
  .col-md-1 { width: 8.333333%; }
  .col-md-2 { width: 16.666667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.333333%; }
  .col-md-5 { width: 41.666667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.333333%; }
  .col-md-8 { width: 66.666667%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.333333%; }
  .col-md-11 { width: 91.666667%; }
  .col-md-12 { width: 100%; }
  
  .section {
    padding: 40px 0;
  }
}

/* 手机端 */
@media screen and (max-width: 767px) {
  .col-sm-1 { width: 8.333333%; }
  .col-sm-2 { width: 16.666667%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.333333%; }
  .col-sm-5 { width: 41.666667%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.333333%; }
  .col-sm-8 { width: 66.666667%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.333333%; }
  .col-sm-11 { width: 91.666667%; }
  .col-sm-12 { width: 100%; }
  
  .container {
    padding: 0 15px;
  }
  
  .section {
    padding: 30px 0;
  }
  
  .content-area h2 {
    font-size: 22px;
  }
  
  .content-area h3 {
    font-size: 18px;
  }
  
  .row {
    margin: 0 -8px;
  }
  
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding: 0 8px;
  }
}

/* 小屏手机 */
@media screen and (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .container {
    padding: 0 12px;
  }
}