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

/* ===== Grid System ===== */
.row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.col { flex: 1; padding: 0 10px; }
.col-1 { flex: 0 0 8.333%; padding: 0 10px; }
.col-2 { flex: 0 0 16.666%; padding: 0 10px; }
.col-3 { flex: 0 0 25%; padding: 0 10px; }
.col-4 { flex: 0 0 33.333%; padding: 0 10px; }
.col-5 { flex: 0 0 41.666%; padding: 0 10px; }
.col-6 { flex: 0 0 50%; padding: 0 10px; }
.col-7 { flex: 0 0 58.333%; padding: 0 10px; }
.col-8 { flex: 0 0 66.666%; padding: 0 10px; }
.col-9 { flex: 0 0 75%; padding: 0 10px; }
.col-10 { flex: 0 0 83.333%; padding: 0 10px; }
.col-12 { flex: 0 0 100%; padding: 0 10px; }

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

/* ===== Card Component ===== */
.card {
  background: var(--white);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease-out;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* ===== Grid Layout (2-4 columns) ===== */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* ===== Responsive Breakpoints ===== */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .col-md-3 { flex: 0 0 25%; padding: 0 10px; }
  .col-md-4 { flex: 0 0 33.333%; padding: 0 10px; }
  .col-md-6 { flex: 0 0 50%; padding: 0 10px; }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .col-lg-3 { flex: 0 0 25%; padding: 0 10px; }
  .col-lg-4 { flex: 0 0 33.333%; padding: 0 10px; }
  .col-lg-6 { flex: 0 0 50%; padding: 0 10px; }
}

@media (max-width: 767px) {
  .section { padding: 40px 0; }
  .row { margin: 0 -5px; }
  .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-12 { padding: 0 5px; }
}