/* ============================================================
   L5 页面级排版：只管页面的宽度、分栏和留白。
   卡片、按钮等长相在 components.css；颜色在 tokens.css / themes。
   竖屏：一栏从上到下。横屏（≥900px）：左照片 / 信息、右内容，轮次并排成列。
   ============================================================ */

.page {
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--sp-10);
}

.page > :first-child,
.page-aside > :first-child,
.page-main > :first-child {
  margin-top: 0;
}

.rules-home > .rule-group:first-child .section-head {
  margin-top: 0;
}

/* 竖屏：单场页只显示选中的一轮 */
.round:not(.is-active) {
  display: none;
}

/* 规则页：两组规则之间留白 */
.rule-group + .rule-group {
  margin-top: var(--sp-2);
}

/* 成人版现行规则首页：规则不装在大白框卡片里，直接铺在页面底色上，
   靠左侧色条 + 分隔线区分「建设规则」/「对话规则」两块。 */
/* .page.rules-home 是为了盖过 themes/card.css 里 [data-theme="card"] .rule-list 的投影
   （两边选择器权重一样，card.css 加载在后面会赢，这里多算一个类名把它压过去）。 */
.page.rules-home .rule-list {
  border: none;
  border-radius: 0;
  background: none;
  color: var(--bg-ink);
  box-shadow: none;
}

.rules-home .rule-item + .rule-item {
  border-top: 1px solid var(--bg-line);
}

.rules-home .rule-item {
  padding: var(--sp-3) var(--sp-1);
  border-left: 3px solid var(--tone, var(--bg-line));
}

.rules-home .rule-no {
  color: var(--bg-ink-3);
}

.rules-home .rule-text {
  color: var(--bg-ink);
}

.rules-home .carousel {
  margin-top: var(--sp-6);
}

/* 成人版单场页：单栏，统计框 → 提案 / 规则 → 照片 → 上一场 / 下一场 */
.session-note {
  margin: calc(var(--sp-2) * -1) 0 var(--sp-4);
  color: var(--bg-ink-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.session-page .carousel {
  margin-top: var(--sp-6);
}

/* 提案页：票型分组之间留白 */
.vote-group + .vote-group {
  margin-top: var(--sp-4);
}

.vote-group.is-passed .section-title {
  color: var(--bg-accent);
}

/* 现场页 */
.photo-section + .photo-section {
  margin-top: var(--sp-2);
}

/* ---------- 横屏 / 大屏 ---------- */
@media (min-width: 900px) {
  .page {
    padding-bottom: var(--sp-10);
  }

  /* 左右分栏：左边照片和信息（跟着滚动固定），右边内容 */
  .page.split {
    display: grid;
    grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr);
    gap: var(--sp-8);
    align-items: start;
  }

  .page-aside {
    position: sticky;
    top: var(--sp-6);
  }

  .page-main > .rule-group:first-child .section-head {
    margin-top: 0;
  }

  /* 轮次并排：三轮提案各占一列（呼应原来横版的三列） */
  .rounds-tabs {
    display: none;
  }

  .rounds {
    display: grid;
    grid-template-columns: repeat(var(--rounds, 3), minmax(0, 1fr));
    gap: var(--sp-5);
    align-items: start;
  }

  .round:not(.is-active) {
    display: block;
  }

  .round .section-head {
    margin-top: 0;
    padding-bottom: var(--sp-3);
    border-bottom: 2px solid var(--bg-ink);
  }

  .round .p-list {
    grid-template-columns: 1fr;
  }

  /* 没有照片的页面（场次列表、提案、现场）内容用满宽 */
  .vote-group .p-list,
  .page > .p-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* 成人版单场页：信息条（页面底上），吸顶导航之后才是统计卡 / 本场关键决定 */
.session-overview {
  margin-bottom: var(--sp-2);
}

.session-sec {
  margin-bottom: var(--sp-6);
}

.session-sec > .section-head:first-child {
  margin-top: 0;
}

/* 首页：没有大标题，格子直接从顶栏下面开始 */
.home-page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding-top: var(--sp-4);
}

/* 提案页：票型分组下的一行口径说明 */
.vote-note {
  margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
  color: var(--bg-ink-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}