/* ============================================================================
 * adapt.css —— 全部「Web 必须偏离小程序」的地方，只集中在这一个文件
 *
 * pages/*.css 是机械转换出来的 1:1 还原，不允许手改；
 * 凡是为浏览器环境做的妥协，逐条登记在这里，方便对照核对。
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * 1. 自定义导航栏：fixed → sticky
 *    小程序里 <navbar> 是 fixed + 一个等高占位块。Web 的页面滚动容器是 #page-home，
 *    用 sticky 得到完全相同的效果（常驻顶部、不遮内容），且桌面端不会被拉成整屏宽。
 *    占位块随之取消，否则会多出一段空白。
 * -------------------------------------------------------------------------*/
#page-home .nav-fixed,
#page-catalog .nav-fixed,
#page-video .nav-fixed {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 200;
}
.nav-holder { display: none; }

/* ---------------------------------------------------------------------------
 * 2. 固定在视口上的元素：桌面端要跟页面同宽同位置
 *    原样式是 left/right:0 + bottom:0（手机满宽），桌面端会横跨整个窗口。
 *    加 width + margin auto 居中对齐，行为与手机上一致。
 * -------------------------------------------------------------------------*/
.tabbar,
.toc,
.toc-mask {
  left: 0;
  right: 0;
  width: min(100vw, 480px);
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * 3. 视频：小程序 <video> 自带播放控件；Web 用原生 controls
 *    object-fit="contain" 保持不裁切
 * -------------------------------------------------------------------------*/
.vplayer {
  object-fit: contain;
  background: #111111;
}

/* ---------------------------------------------------------------------------
 * 4. hover-class="card-hover" → :active
 *    小程序按下时加 .card-hover（opacity .86），Web 用 :active 等价替代。
 *    只挂在原本就有 hover-class 的元素上（data-hover），列表卡片不加，保持原样。
 * -------------------------------------------------------------------------*/
[data-hover]:active { opacity: .86; }

/* ---------------------------------------------------------------------------
 * 5. placeholder-class="ph" → ::placeholder
 * -------------------------------------------------------------------------*/
input::placeholder {
  color: #A8A8A2;
  font-size: .26rem;
}
input::-webkit-input-placeholder {
  color: #A8A8A2;
  font-size: .26rem;
}

/* ---------------------------------------------------------------------------
 * 6. 桌面端可点区域给出手型光标（纯 Web 增益，不影响视觉）
 * -------------------------------------------------------------------------*/
[data-tap],
.tab,
.cat {
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * 7. 断行规则：中文可以任意处断行，英文不行
 *    原 wxss 用 word-break: break-all 是为了让中文在窄栏里排得满，
 *    换成英文后会把单词拦腰截断（Stainless → "Stain less"、Foam Aluminum → "Alu minum"）。
 *    改为按词断行；个别超长单词用 overflow-wrap 兜底，不撑破容器。
 * -------------------------------------------------------------------------*/
#page-catalog .cat-name,
#page-catalog .cname,
#page-video .vtitle,
#page-reader .toc-h-t,
#page-reader .toc-h-c,
#page-brand .nav-title {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* 阅读器标题 = 完整 PDF 文件名，最长 83 字符，单行只放得下 24 个 → 直接两行。
   导航栏是固定 0.88rem，两行 0.22rem × 1.2 = 0.53rem，装得下，不撑高也不压住页面内容。
   短名字仍只占一行并由 flex 垂直居中；品牌页（#page-brand）不受影响，保持 0.32rem。 */
#page-reader .nav-title {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  font-size: 0.22rem;
  line-height: 1.2;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  padding: 0 0.08rem;
}

/* 侧栏从 1.96rem 放宽到 2.06rem：实测「Architectural」在旧宽度下需要 85.6px，
   而可用宽只有 73.1px，必然被拦腰断成 "Architectu / ral"。
   加宽 0.1rem + 收窄右侧内边距 + 数字标记字号调小后可用宽约 89px，够排下最长单词。
   卡片宽度是 calc((100% - 0.18rem) / 2) 自适应的，只会窄 0.05rem（约 3px），仍是两列。 */
#page-catalog .side { width: 2.06rem; }
#page-catalog .cat { padding-right: 0.2rem; }
#page-catalog .cat-name { font-size: 0.2rem; line-height: 1.32; }
#page-catalog .cat.on .cat-name { font-size: 0.21rem; }
#page-catalog .cat-count { font-size: 0.17rem; }

/* 卡片宽度由固定 2.48rem 改为按主区均分：
   主区够宽时算出来仍是 2.48rem（与原版一致），
   只有一个字的差别时才自适应，避免某类目第二列被挤掉 */
#page-catalog .card {
  width: calc((100% - 0.18rem) / 2);
}
/* .cover 的百分比是相对 .card 的，所以这里写 100%（跟卡片同宽），不能再用 calc */
#page-catalog .cover { width: 100%; }
#page-catalog .card { margin: 0 0.18rem 0.18rem 0; }
#page-catalog .card:nth-child(2n) { margin-right: 0; }
/* 封面图原本写死 2.48rem × 2.9rem，卡片自适应后要跟着容器走，否则右侧露白 */
#page-catalog .cover-img { width: 100%; height: 100%; object-fit: cover; }

/* 卡片标题：现在显示的是真实 PDF 文件名（中位 37 字符、最长 83），
   原版两行必然截断，而截断后就没法跟源目录逐本对名字了 → 放宽到三行。
   height 从固定 1rem 改为按行数自适应，卡片改成竖向 flex，
   让 .cname 的深色底条自动填满同一行里最高的那张卡，下边缘仍然齐平。 */
#page-catalog .card { display: flex; flex-direction: column; }
#page-catalog .card > .cover { flex: none; }
#page-catalog .cname {
  line-height: 1.36;
  letter-spacing: -0.002rem;
  height: auto;
  min-height: 1rem;
  flex: 1;
  -webkit-line-clamp: 3;
}

/* ---------------------------------------------------------------------------
 * 8. 阅读器「目录」按钮：两个汉字 → "Contents"
 *    原样式是 0.92rem 的固定圆形，只够放两个字；英文单词放不下会被裁掉。
 *    改成同高胶囊（圆角仍取半高，视觉上还是圆的），宽度随文字走。
 * -------------------------------------------------------------------------*/
#page-reader .toc-btn,
#page-brand .toc-btn {
  width: auto;
  padding: 0 0.26rem;
  border-radius: 0.46rem;
}
#page-reader .toc-btn-txt,
#page-brand .toc-btn-txt {
  font-size: 0.2rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 9. 图册数量后缀：原为「6 份」，现在是「6 catalogs」，需要留出宽度
 * -------------------------------------------------------------------------*/
#page-catalog .mh-count { white-space: nowrap; }


/* ---------------------------------------------------------------------------
 * 10. 生态链圆环节点：中文换英文后一行放不下两行字
 *     原版「中文名 + 英文小字」两行，中文只有 3 个字；换成英文全名后
 *     两行各占 1.72rem 宽，直接压到隔壁节点上。这里只保留主标题一行，
 *     字号与宽度同步收一点，并在图标上垂直居中。
 * -------------------------------------------------------------------------*/
#page-home .nd-en { display: none; }
#page-home .node .nd-cn {
  width: 1.46rem;
  font-size: 0.2rem;
  line-height: 1.26;
  bottom: -0.19rem;
}
#page-home .node.left .nd-cn { right: 0.34rem; }
#page-home .node.right .nd-cn { left: 0.34rem; }

/* ---------------------------------------------------------------------------
 * 11. 图片加载前的占位底色
 *    小程序里 <image> 在下载中会保留布局盒子；Web 的 <img> 没有尺寸时高度塌陷，
 *    阅读器靠 .pg 的预设高度撑住，这里再给一个浅底色避免闪白。
 * -------------------------------------------------------------------------*/
.pg-img,
.cover-img,
.toc-thumb,
.mimg,
.simg,
.wide-img,
.mold-img,
.vimg {
  background-color: #F0EFEA;
}