/* ===== layout.css - 栅格+容器+响应式断点 ===== */

.container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.container-sm { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.container-lg { max-width: 1024px; margin: 0 auto; padding: 0 16px; }

/* Grid System */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* Flex Grid */
.flex-grid { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.flex-grid > .col { padding: 0 12px; flex: 1; }
.col-2 { flex: 0 0 50%; max-width: 50%; }
.col-3 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-4 { flex: 0 0 25%; max-width: 25%; }

/* Page Layout */
.page-content { padding: 64px 16px; }
.page-section { margin-bottom: 64px; }
.page-section:last-child { margin-bottom: 0; }

/* Section Title */
.section-title {
  font-size: 28px; font-weight: bold; text-align: center;
  color: var(--primary); margin-bottom: 48px;
}
.section-subtitle {
  font-size: 16px; color: var(--text-gray); text-align: center;
  max-width: 800px; margin: -32px auto 48px; line-height: 1.7;
}

/* Card */
.card {
  padding: 24px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--page-bg);
  transition: all 0.3s ease;
}
.card-white { background: var(--white); border: 1px solid var(--border); }
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

/* Button */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 8px; font-weight: 500;
  cursor: pointer; border: none; transition: all 0.3s ease;
}
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
  background: var(--secondary); color: var(--primary); font-weight: 600;
}
.btn-secondary:hover { opacity: 0.9; }

/* Responsive */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .col-4 { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr; }
  .col-2, .col-3, .col-4 { flex: 0 0 100%; max-width: 100%; }
  .section-title { font-size: 24px; }
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}