/* ============================================================
   blocks.css — 区块级样式（站头 / Hero / 页头 / 页脚 / 各页局部）
   组件级响应式覆盖一律写在定义它的区块之后
   ============================================================ */

/* ================= 站头 ================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0D150E;
  border-bottom: 1px solid rgba(30, 46, 30, .55);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}
.brand:hover { text-decoration: none; }
.brand__mark { flex: 0 0 auto; }
.brand__text {
  color: var(--text);
  font-size: var(--fs-lead);
  font-weight: 700;
  white-space: nowrap;
}

/* 导航靠右：站头是三栏 flex（品牌 / 导航 / 汉堡），justify-content:space-between
   会把导航放在中间。margin-inline-start:auto 把整组导航连同汉堡一起推到右侧，
   品牌独占左边 —— 这也是「顶部菜单在右边」这条要求的实现点。 */
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-inline-start: auto;
}
.site-nav__link {
  color: var(--text-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--text); text-decoration: none; }
.site-nav__link[aria-current="page"] {
  color: var(--brand-ink);
  font-weight: 600;
}

/* 汉堡按钮：手机端的唯一入口，不依赖其它头部元素存在 */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
}
.nav-toggle__open, .nav-toggle__close { display: block; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 49;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: var(--sp-3) var(--gutter) var(--sp-8);
    background: #0D150E;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .45);
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav__link {
    padding: 15px 4px;
    font-size: var(--fs-lead);
    border-bottom: 1px solid var(--line);
  }
  .site-nav__link:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .brand__text { font-size: var(--fs-sm); }
}

/* ================= 首页 Hero =================
   形态：满幅主图 + 题记压在图上（不是图与文案上下分开）
   压字的唯一硬指标是对比度，所以主图上必须有一层自底向上的渐变遮罩：
   底部 .95 保证正文白字读得清，顶部透明保证画面不被糊掉。 */
.hero {
  position: relative;
  background: var(--bg);
}

.hero__media {
  position: relative;
  width: 100%;
  height: 600px;
  background-color: var(--surface-head);
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;   /* 画面主体上移，把下半部留给压字区 */
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(8, 14, 9, .95) 0%,
    rgba(8, 14, 9, .90) 34%,
    rgba(8, 14, 9, .62) 62%,
    rgba(8, 14, 9, .20) 85%,
    rgba(8, 14, 9, 0) 100%);
}

.hero__text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;      /* 设计稿 counterAxisAlignItems: CENTER */
  gap: var(--sp-10);
  padding-block: 0 56px;
  text-align: center;
}

.hero__title {
  color: var(--text-on-img);
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(8, 14, 9, .55);
}
.hero__sub {
  color: var(--text-on-img);
  font-size: 18px;
  line-height: var(--lh-body);
  max-width: var(--w-lead);
  text-shadow: 0 1px 10px rgba(8, 14, 9, .5);
}
.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  flex-wrap: wrap;
  justify-content: center;
}
/* 描边按钮在图上会"糊进画面"，给它一层极淡的底把边界立住 */
.hero__cta .btn--ghost {
  color: var(--text-on-img);
  background: rgba(242, 247, 238, .10);
  box-shadow: inset 0 0 0 1px rgba(242, 247, 238, .45);
}
.hero__cta .btn--ghost:hover { background: rgba(242, 247, 238, .18); }

@media (max-width: 1024px) {
  .hero__media { height: 500px; }
  .hero__text { padding-block: 0 44px; gap: var(--sp-9); }
  .hero__sub { font-size: var(--fs-lead); }
}
@media (max-width: 560px) {
  .hero__media { height: 460px; }
  /* 小屏压字区占比大，遮罩同步加重，否则标题上缘会压在亮部 */
  .hero__media::after {
    background: linear-gradient(to top,
      rgba(8, 14, 9, .96) 0%,
      rgba(8, 14, 9, .93) 48%,
      rgba(8, 14, 9, .70) 74%,
      rgba(8, 14, 9, .28) 92%,
      rgba(8, 14, 9, 0) 100%);
  }
  .hero__text { padding-block: 0 34px; gap: var(--sp-7); }
  .hero__sub { font-size: var(--fs-sm); }
  .hero__cta { width: 100%; flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* ================= 内页页头 ================= */
.page-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-block: 24px 48px;
}
.page-hero__title {
  color: var(--text);
  font-size: var(--fs-title-lg);
  font-weight: 900;
  line-height: 1.18;
}
.page-hero__lead {
  color: var(--text-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

@media (max-width: 560px) {
  .page-hero { padding-block: 18px 32px; gap: var(--sp-6); }
  .page-hero__title { font-size: var(--fs-title-lg); }
  .page-hero__lead { font-size: var(--fs-sm); }
}

/* ================= 面包屑 ================= */
/* 锚点跳转要给 sticky 站头留位，否则标题被压在导航下 */
#main [id] { scroll-margin-block-start: calc(var(--header-h) + 16px); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: 20px 14px;
  font-size: var(--fs-xs);
  flex-wrap: wrap;
}
.breadcrumb__link { color: var(--text-muted); }
.breadcrumb__link:hover { color: var(--text-body); }
.breadcrumb__sep { color: var(--line); }
.breadcrumb__current { color: var(--dot-off); }

@media (max-width: 560px) {
  .breadcrumb { padding-block: 14px 10px; font-size: var(--fs-2xs); }
}

/* ================= 筛选行（列表页搜索） ================= */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
  padding-block-start: var(--sp-9);
  flex-wrap: wrap;
}
.filter-count {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* ================= 详情页信息区 ================= */
.detail-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-16);
  padding-block: 28px 56px;
}
.detail-cover {
  flex: 0 0 auto;
  width: 380px;
  aspect-ratio: 380 / 480;
  border-radius: 20px;
}
.detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
  min-width: 0;
  flex: 1 1 auto;
}
.detail-info__title {
  color: var(--text);
  font-size: 38px;
  font-weight: 900;
  line-height: 1.16;
}
.badge-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.highlights {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.detail-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .detail-hero { gap: var(--sp-13); padding-block: 20px 44px; }
  .detail-cover { width: 300px; }
  .detail-info__title { font-size: 30px; }
}
@media (max-width: 820px) {
  .detail-hero { flex-direction: column; gap: var(--sp-11); padding-block: 12px 34px; }
  .detail-cover { width: 100%; max-width: 420px; aspect-ratio: 16 / 10; }
  .detail-info__title { font-size: var(--fs-title-sm); }
}
@media (max-width: 560px) {
  .detail-cta { flex-direction: column; align-items: stretch; }
  .detail-cta .btn { width: 100%; }
}

/* 说明：原来这里有一组 .dl-head / .dl-head__title / .dl-head__sub，
   服务于详情页首屏的「可下载客户端」模块。该模块已整块删除
   （平台与形态改由页面下方的「安装包文件名」附录承担），规则一并清掉。 */


/* ================= 页内导航（详情页锚点） =================
   详情页有 6~7 个区块、总高近 4000px，sticky 一行锚点让读者能直接跳。
   挂在站头下方（--header-h），横向可滚动而不换行——换行会占掉两行高度。
   它是 sticky 叠层的第二层，所以：高度写死成 --anchors-h（下面的 scroll-margin
   才算得准），紧跟其后的第一个区块还要让位（见文件末尾 .anchors + .section--flush）。 */
.anchors {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.anchors__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  overflow-x: auto;
  scrollbar-width: none;
  min-height: var(--anchors-h);
}
.anchors__inner::-webkit-scrollbar { display: none; }
.anchors__link {
  flex: 0 0 auto;
  padding: var(--sp-4) 0;
  color: var(--text-body);
  font-size: var(--fs-xs);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.anchors__link:hover { color: var(--text); text-decoration: none; }
.anchors__link[aria-current="true"] {
  color: var(--brand-ink);
  border-bottom-color: var(--brand-mark);
  font-weight: 600;
}
@media (max-width: 560px) {
  .anchors__link { padding: var(--sp-3) 0; }
}

/* 锚点跳转要让开「站头 + 锚点条」两层 sticky。基线 #main [id] 只算了站头，
   详情页点「版本介绍」时标题正好落在锚点条底下（实测被压 29px）——「模块重叠」的第二种形态。
   .anchors 与各 section 同级兄弟，用 ~ 命中它后面的所有锚点目标；目标区块自带 56px 上内边距
   撑开正文，这里只把「区块盒顶」放到条子下沿，再留 8px 防亚像素缝。
   ⚠️ 必须带 #main：基线那条是 (1,1,0)，只写 .anchors ~ [id] 会被它压住、静默失效。 */
#main .anchors ~ [id] {
  scroll-margin-block-start: calc(var(--header-h) + var(--anchors-h) + 1px + var(--sp-3));
}

/* 锚点条紧贴的下一块不能再 flush（0 上间距），否则标题像贴在条子上。
   基线 .section--flush 只有 0,1,0 的特异性，这里 0,2,0 稳压。 */
.anchors + .section--flush { padding-block-start: var(--sp-16); }

/* ================= 页脚 ================= */
.site-footer {
  background: var(--bg-footer);
  padding-block: 56px 36px;
  margin-block-start: var(--section-gap);
}
.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
}
.footer-brand { max-width: 360px; }
.footer-brand__desc {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  margin-block-start: var(--sp-6);
}
.footer-links {
  display: flex;
  gap: 72px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.footer-col__title {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.footer-col__link {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.footer-col__link:hover { color: var(--text-body); }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
  margin-block-start: var(--sp-14);
  padding-block-start: var(--sp-9);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.site-footer__legal {
  color: var(--text-muted);
  font-size: var(--fs-2xs);
}

@media (max-width: 1024px) {
  .site-footer__top { flex-direction: column; gap: var(--sp-13); }
  .footer-links { gap: var(--sp-16); flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .site-footer { padding-block: 40px 28px; }
  .footer-links { gap: var(--sp-11) var(--sp-14); }
}