/* =============================
   style.css
   主要布局与网格基础（具体的基础/组件/主题/响应式已拆分到相应文件）
   请按顺序在 HTML 中引入：base.css -> component.css -> style.css -> theme.css -> responsive.css
   ============================= */

/* ====== 主布局 ====== */
.container {
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: flex-start;
  margin: 30px auto;
  max-width: 1400px;  /* 增加最大宽度以适应大屏幕 */
  padding: 0 20px;
}

.left, .right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 两侧内容容器基础样式 */
.left > div, .right > div {
  margin-bottom: 40px;
}

/* 确保左右两侧的标题和内容对齐 */
.left h2, .right h2 {
  min-height: 40px;
  display: flex;
  align-items: center;
  margin-top: 0;
}

/* 标题和网格容器间距一致 */
h2 + .grid {
  margin-top: 16px;
}

/* 标题 */
h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 20px 0 14px;
  border-left: 4px solid #0078d7;
  padding-left: 10px;
  text-align: left;
}

/* 网格布局 - 基础样式 */
.grid {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
  grid-auto-rows: 1fr; /* 自动行高，保持一致 */
}

/* 大屏幕默认布局 - 左右各3列 */
.left .grid, .right .grid {
  grid-template-columns: repeat(3, 1fr);
}

.grid {
  min-height: 200px;
}