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

/* === Grid System === */
.row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -15px; }
.col { padding: 0 15px; }
.col-1 { width: 8.333333%; }
.col-2 { width: 16.666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333333%; }
.col-5 { width: 41.666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333%; }
.col-8 { width: 66.666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.333333%; }
.col-12 { width: 100%; }

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

/* === Section Padding === */
.section { padding: 60px 0; }
.section-lg { padding: 80px 0; }
.section-sm { padding: 40px 0; }

/* === Responsive Breakpoints === */
/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
  .container { max-width: 960px; }
  .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-6 { width: 50%; }
  .col-md-12 { width: 100%; }
  .hide-md { display: none !important; }
}

/* Mobile (< 768px) */
@media screen and (max-width: 768px) {
  .container { max-width: 100%; padding: 0 15px; }
  .row { margin: 0 -10px; }
  .col { padding: 0 10px; }
  .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-6 { width: 50%; }
  .col-sm-12 { width: 100%; }
  .hide-sm { display: none !important; }
  .section { padding: 40px 0; }
  .section-lg { padding: 50px 0; }
  .section-title { font-size: 22px; }
}

/* Small Mobile (< 480px) */
@media screen and (max-width: 480px) {
  .col-xs-12 { width: 100%; }
  .col-xs-6 { width: 50%; }
  .hide-xs { display: none !important; }
  .section { padding: 30px 0; }
  .container { padding: 0 12px; }
}