/* layout.css - 网格 + 响应式布局 */
/* Header/Footer/Nav 样式由 header.css / footer.css 负责，此处仅保留网格系统与主区布局 */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* 12列网格系统 */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid-12 { grid-template-columns: repeat(12, 1fr); }
.grid-6  { grid-template-columns: repeat(6, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-2  { grid-template-columns: repeat(2, 1fr); }

/* 站点主区 */
.site-main {
  min-height: calc(100vh - 200px);
  padding-block: var(--space-7);
}

/* 响应式断点 */
@media (max-width: 767px) {
  .grid-12, .grid-6, .grid-4, .grid-3, .grid-2 {
    grid-template-columns: 1fr;
  }
}