/* ============================================================================
 *  POLYMERMESH — 设计层（叠加在 Bootstrap 5 + Agency 主题之上）
 *  基底：assets/css/agency.css（Start Bootstrap Agency v7.0.12，MIT）
 *  本文件只做「我们的东西」，不重复 Bootstrap 已有的能力。
 * ========================================================================== */

:root {
  /* 主色沿用 Agency 的金黄。要换主色改这里 + 下面 .btn-primary 等覆盖 */
  --pm-accent:      #e0a800;   /* 2026-10-06 由 #ffc800 调深一档：黑底上太刺目 */
  --pm-accent-dark: #c08f00;
  --pm-ink:         #212529;
  --pm-ink-2:       #6c757d;
  --pm-line:        rgba(0, 0, 0, 0.12);
  --pm-line-soft:   rgba(0, 0, 0, 0.07);
  --pm-surface:     #ffffff;
  --pm-surface-2:   #f8f9fa;

  --pm-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Liberation Mono", monospace;
}

/* ── 字体：等宽数字，参数表对齐的基础 ─────────────────────────────────── */
.pm-num,
.spec-table td:not(:first-child),
.stat-value,
.badge-mono {
  font-family: var(--pm-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 首页 hero（首屏）─────────────────────────────────────────────────────
 * ⚠️ 必须写 `header.masthead` 而不是 `.masthead`：
 *    agency.css 里是 `header.masthead { background-image: url("../assets/img/header-bg.jpg") }`，
 *    相对 assets/css/ 解析成 assets/assets/img/… → 那个文件不存在 → 404。
 *    它的选择器权重 (0,1,1) 高于 (0,1,0)，所以用 `.masthead` 盖不住，会继续白字白底。
 *    这里用同等权重 + 后加载来覆盖。
 * 压暗比 .page-header 轻（0.55→0.80），因为首页 hero 是主视觉，图要看得见；
 * 子页面页头只是背景，用 0.82→0.92 压到几乎只剩纹理。
 *
 * ⚠️ 图片路径必须写**站点绝对路径** `/assets/img/…`：
 *    本文件在 /assets/ 下，写相对路径 `../img/…` 会解析成 /img/…（站点根下一层），
 *    而图片其实在 /assets/img/…。这两个坑叠加起来，导致首页白字白底、
 *    9 个子页面页头也一直没背景图（只靠兜底深色撑着）。
 */
header.masthead {
  position: relative;
  /* 满一屏：原 agency.css 是固定内边距撑出来的「黑带」，不是整屏。
     改成 min-height:100vh + flex 垂直居中 —— 内容居中后上下黑边对称，
     落地即整屏，导航栏由居中留出的上方空间自然避开。
     想微调上下留白改下面的 padding 即可。 */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: #14161a;                    /* 图加载前的兜底色 —— 深色，白字始终可读 */
  background-image: linear-gradient(rgba(20, 22, 25, 0.55), rgba(20, 22, 25, 0.80)),
                    url(/assets/img/masthead.jpg?v=1791260187);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

header.masthead > .container { width: 100%; }

/* ── 子页面页头（对应首页 masthead 的压缩版）──────────────────────────── */
.page-header {
  position: relative;
  padding: 9rem 0 4.5rem;
  background-color: #212529;
  background-image: linear-gradient(rgba(20, 22, 25, 0.82), rgba(20, 22, 25, 0.92)),
                    url(/assets/img/masthead.jpg?v=1791260187);
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: center;
}
.page-header .eyebrow {
  display: block;
  font-family: var(--pm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pm-accent);
  margin-bottom: 0.9rem;
}
.page-header h1 {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 auto 1rem;
  max-width: 22ch;
}
.page-header p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 62ch;
  margin: 0 auto;
  font-size: 1.02rem;
}

/* ── 参数表 ──────────────────────────────────────────────────────────── */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
  background: var(--pm-surface);
}
.spec-table th,
.spec-table td {
  padding: 0.85rem 1.05rem;
  border-bottom: 1px solid var(--pm-line-soft);
  text-align: left;
  vertical-align: top;
}
.spec-table thead th {
  font-family: var(--pm-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pm-ink-2);
  background: var(--pm-surface-2);
  border-bottom: 1px solid var(--pm-line);
  white-space: nowrap;
}
.spec-table td:first-child { color: var(--pm-ink-2); }
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table-wrap {
  border: 1px solid var(--pm-line);
  border-radius: 0.5rem;
  overflow: hidden;
  overflow-x: auto;
}

/* ── 数据来源标记 ────────────────────────────────────────────────────── */
.src {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--pm-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--pm-ink-2);
  white-space: nowrap;
}
.src::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  flex: none;
}
.src-ok::before    { background: var(--pm-accent); }
.src-self::before  { background: #fd7e14; }
.src-pend::before  { background: #adb5bd; }

/* ── 页脚 ────────────────────────────────────────────────────────────── */
.pm-footer {
  background: #212529;
  color: rgba(255, 255, 255, 0.7);
  padding: 3.5rem 0 1.5rem;
  font-size: 0.9rem;
}
.pm-footer h4 {
  font-family: var(--pm-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.9rem;
}
.pm-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  display: block;
  padding: 0.16rem 0;
}
.pm-footer a:hover { color: var(--pm-accent); }
.pm-footer-bottom {
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ── 语言切换 ────────────────────────────────────────────────────────── */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}
.lang-switch a {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-family: var(--pm-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch a:hover { color: #fff; }
.lang-switch a.active { background: var(--pm-accent); color: #212529; font-weight: 500; }

/* ── 正文小标题（等宽 + 短横）────────────────────────────────────────── */
.pm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--pm-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pm-accent-dark);
}
.pm-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--pm-accent);
  flex: none;
}

/* ── 条款/政策类正文的编号小节 ───────────────────────────────────────── */
.pm-clause { margin-bottom: 2rem; }
.pm-clause-no {
  font-family: var(--pm-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--pm-accent-dark);
}
.pm-clause h2 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0.35rem 0 0.7rem;
}
.pm-clause p { color: #495057; margin-bottom: 0.85rem; }
.pm-clause p:last-child { margin-bottom: 0; }

/* ── 提示框 ──────────────────────────────────────────────────────────── */
.pm-note {
  border-left: 3px solid var(--pm-accent);
  background: #fffdf5;
  padding: 1.1rem 1.25rem;
  border-radius: 0 0.375rem 0.375rem 0;
  font-size: 0.9rem;
  color: #495057;
  line-height: 1.7;
}
.pm-note strong { color: var(--pm-ink); }

/* ── 审计模式（?audit）───────────────────────────────────────────────── */
body.audit [data-p].pm-pending {
  background: rgba(220, 53, 69, 0.13);
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.5);
  border-radius: 2px;
}
body.audit [data-p].pm-self {
  background: rgba(253, 126, 20, 0.14);
  box-shadow: 0 0 0 1px rgba(253, 126, 20, 0.5);
  border-radius: 2px;
}
body.audit [data-p].pm-placeholder {
  background: rgba(108, 117, 125, 0.14);
  box-shadow: 0 0 0 1px rgba(108, 117, 125, 0.45);
  border-radius: 2px;
}
.pm-audit-banner { display: none; }
body.audit .pm-audit-banner {
  display: block;
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 1080;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #212529;
  color: var(--pm-accent);
  font-family: var(--pm-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* ── 细节修正 ────────────────────────────────────────────────────────── */

/* 首页主标题改用 <h1> 后，压掉浏览器默认上边距 */
.masthead h1.masthead-heading { margin-top: 0; }

/* 子页面页头的 <h1> 同理 */
.page-header h1 { margin-top: 0; }

.text-muted { color: var(--pm-ink-2) !important; }
.page-section { padding: 5rem 0; }
.section-heading { letter-spacing: -0.02em; }
a { color: var(--pm-accent-dark); }
a:hover { color: #a87e00; }
.btn-primary { color: #212529; }

/* 表格在窄屏可横向滚动而不是撑破布局 */
.table-responsive-sm { overflow-x: auto; }

/* 打印时去掉装饰 */
@media print {
  .navbar, .pm-footer, .page-header { background-image: none !important; }
}

/* ── 产品细节图集（原「档位卡」改造，2026-10-06）────────────────────────────
 * agency.css 里 .portfolio-* 全部锁在 `#portfolio` 下，而本站该区块 id 是
 * #grades，所以那些规则从未生效 → 卡片无内边距、标题左对齐、.portfolio-hover
 * 的「+」号还会静态显示。这里按 #grades 重新给一套等价样式，并把 hover 层去掉。
 */
#grades .portfolio-item {
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
#grades .portfolio-link {
  position: relative;
  display: block;
}
#grades .portfolio-link img {
  width: 100%;
  height: auto;
  border-radius: .35rem;
}
#grades .portfolio-caption {
  padding: 1.25rem 1rem .5rem;
  text-align: center;
}
#grades .portfolio-caption-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: .25rem;
}
#grades .portfolio-caption-subheading {
  font-style: italic;
  margin-bottom: 0;
}

/* ── 主色降刺激：覆盖 agency.css 里硬编码的 Bootstrap 黄色（2026-10-06）─────
 * agency.css 把 --bs-primary / .btn-primary 的 --bs-btn-* 全写死成 #ffc800，
 * 只改 --pm-accent 管不到按钮，必须在这里按 Bootstrap 变量接口覆盖。
 */
.btn-primary {
  --bs-btn-bg: #e0a800;
  --bs-btn-border-color: #e0a800;
  --bs-btn-hover-bg: #c08f00;
  --bs-btn-hover-border-color: #c08f00;
  --bs-btn-active-bg: #b38200;
  --bs-btn-active-border-color: #b38200;
  --bs-btn-disabled-bg: #e0a800;
  --bs-btn-disabled-border-color: #e0a800;
}
.text-primary { color: #c08f00 !important; }

/* 首页 hero：大号实心黄按钮改成白描边（首页只保留导航栏那一颗实心黄按钮） */
header.masthead .btn-outline-light {
  border-width: 2px;
  padding: .85rem 1.6rem;
}
header.masthead .btn-outline-light:hover,
header.masthead .btn-outline-light:focus {
  background-color: #fff;
  color: #212529;
  border-color: #fff;
}

/* ── 首页「材料特性」：改成横条卡片 2×3，压进一屏（2026-10-06）─────────────
 * 原来是「黄圆在上、文字在下」的 3×2，两行圆心相距约 331 CSS px、整段约 907px，
 * 在较矮的窗口里放不下（实测可视区约 572px）。改成「左图标 + 右文字」，
 * 2 列 × 3 行，圆由 8em 缩到 5em，区块上下留白减半 —— 整段约 540px。
 */
#properties.page-section { padding-top: 3.25rem; padding-bottom: 2.75rem; }
#properties .pm-feature { display: flex; align-items: flex-start; gap: 1.1rem; }
#properties .pm-feature .fa-stack {
  flex: 0 0 auto;
  font-size: 2.5em;
  width: 2em;                     /* 收紧图标盒，圆和外框同宽 */
}
#properties .pm-feature h4 { font-size: 1.12rem; margin: 0 0 .3rem; }
#properties .pm-feature p { font-size: .95rem; line-height: 1.5; margin-bottom: 0; }

/* ── 窄屏字号修正：修 360px 横向溢出（2026-10-07）──────────────────────
 * agency.css 在 <768px 仍给 .masthead-heading 用 3.25rem(52px)，
 * 英文长句 "forces that break steel" 在 360px 屏上撑破视口（实测溢出 14px）。
 * 这里按屏宽收缩，并允许长词断行兜底。
 */
header.masthead .container { overflow-wrap: break-word; }
@media (max-width: 575.98px) {
  header.masthead .masthead-heading {
    font-size: 2.05rem;
    line-height: 1.18;
    margin-bottom: 1.25rem;
  }
  header.masthead .masthead-subheading {
    font-size: 1.05rem;
    line-height: 1.35;
    margin-bottom: 1rem;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  header.masthead .masthead-heading { font-size: 2.6rem; line-height: 1.2; }
}