/* ==========================================================================
   布局骨架：双栏网格（左侧主内容 + 右侧 300px 侧边栏）
   只负责结构与栅格，视觉样式统一放在 style.css
   ========================================================================== */
.site {
  position: relative;
  z-index: var(--z-page, 1);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.page {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  padding: 48px 0 32px;
}

/* 无侧边栏页面（文章 / 独立页面 / 404）：单栏铺满，正文自动居中 */
.page.page--single {
  grid-template-columns: 1fr;
}

.main { min-width: 0; }

.sidebar {
  position: sticky;
  top: 40px;
  align-self: start;
  height: fit-content;
}

/* 首页文章卡片：两列网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* ==========================================================================
   移动端：折叠为单列，侧边栏落到文章列表下方
   ========================================================================== */
@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 32px;
  }
  .sidebar { position: static; }
  .card-grid { grid-template-columns: 1fr; }
}