/* assets/css/sections/page.css — 内页首屏与面包屑：只被 7 个二级页引用（首页不引）。
   首屏的网格背景借 hero.css 的 .hero，这里只负责内容排版——
   .hero-grid 是首页专用的两列栅格，内页套上去标题会被挤在左半边。
   断点写在本文件内而不是 responsive.css：那个文件每页都加载，内页专属的规则放进去
   会白白增加首页的 CSS 体积（layout/rail.css 也是同样的处理）。 */

.page-hero{ position:relative; }
.page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 55%, var(--paper) 96%);
}
.page-hero .wrap{ position:relative; z-index:1; padding-block:56px 68px; }

/* 面包屑：给内页一个回退路径，也让爬虫看清层级 */
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); }
.crumbs a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line-dark); }
.crumbs a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.crumbs span[aria-hidden]{ color:var(--line-dark); }

.page-title{ margin-top:20px; font-size:46px; font-weight:900; line-height:1.25; max-width:20em; }
.page-lead{ margin-top:18px; max-width:38em; font-size:17px; color:var(--muted); }
.page-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:30px; }
.page-meta{ margin-top:22px; font-size:14px; color:var(--muted); }

/* 首屏下的要点条：内页用一行 3–4 个短句快速交代这一页在讲什么 */
.page-facts{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px; margin-top:36px; background:var(--line);
  border:1px solid var(--line);
}
.page-facts > div{ padding:16px 18px; background:var(--surface); }
.page-facts dt{ font-size:13px; color:var(--muted); }
.page-facts dd{ margin:6px 0 0; font-family:var(--serif); font-weight:700; font-size:17px; }

/* 首屏之后紧跟的第一个区块：首屏底部已经留了 68px，与区块顶部的 96px 叠加
   会在没有底色的交界处连成一片（桌面合计约 180px），看着像页面断了；
   这里把它压到 48px 起，只影响首屏后的第一个区块，站内其它区块间距不动。 */
.page-hero + .band{ padding-top:48px; }
@media (max-width:1020px){ .page-hero + .band{ padding-top:40px; } }
@media (max-width:680px){ .page-hero + .band{ padding-top:32px; } }

@media (max-width:1020px){
  .page-hero .wrap{ padding-block:48px 56px; }
  .page-title{ font-size:38px; }
  .page-facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:680px){
  .page-hero .wrap{ padding-block:36px 44px; }
  .page-title{ font-size:29px; }
  .page-facts{ grid-template-columns:1fr; }
}