/* Full-width category banners. Keep complete titles, authentic scenes and transparent routes. */
@import url("./fonts/misans-headline.css");

.hero-route {display:flex;align-items:center;gap:14px;margin:0;padding:0;background:none;border:0;border-radius:0;color:inherit;font-size:13px;line-height:1.5}
.hero-route a {display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.hero-route .back-link {position:relative;min-height:44px;margin:0 6px 0 0;padding:0 22px 0 0;border:0;border-radius:0;background:none;color:inherit;font-size:13px;font-weight:400;line-height:1.5}
.hero-route .back-link::after {content:"";position:absolute;right:0;top:15px;height:14px;border-right:1px solid currentColor;opacity:.4}
.hero-route .back-link:hover,.hero-route .back-link:active {background:none;border:0;color:inherit;text-decoration:underline;text-underline-offset:6px}
.hero-route a:hover {text-decoration:underline;text-underline-offset:6px}
.hero-route a:focus-visible {outline:2px solid currentColor;outline-offset:3px}
.hero-route>span[aria-hidden] {color:inherit;opacity:.55}
.partnership-route {color:#192c38;text-shadow:0 1px 5px #fff,0 1px 12px #fff}
.company-route {color:#414b49}

.category-hero {position:relative;isolation:isolate;width:100%;height:clamp(450px,40vw,760px);overflow:hidden;color:#fff;background:#333b3d}
.category-hero-photo {position:absolute;inset:0;margin:0;z-index:-2}
.category-hero-photo img {display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.category-hero::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(10,18,23,.6),rgba(10,18,23,.3) 70px,transparent 140px),linear-gradient(0deg,rgba(10,18,23,.65),transparent 64%)}
.category-hero-content {height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:18px 0 64px}
.category-hero-title {width:max-content;max-width:100%;margin:0;font-family:"Tenon Headline",MiSans,"PingFang SC","Microsoft YaHei",sans-serif;font-size:clamp(54px,6vw,104px);line-height:1.12;font-weight:900;font-synthesis:none;letter-spacing:-.035em;white-space:nowrap;text-wrap:nowrap;text-shadow:0 2px 14px rgba(0,0,0,.12)}
.category-hero--news {color:#bdcddd}
.category-hero--cases {color:#d0bea3}
.category-hero--news::before,.category-hero--cases::before {background:linear-gradient(180deg,rgba(10,18,23,.76),rgba(10,18,23,.66) 72px,transparent 160px),linear-gradient(0deg,rgba(10,18,23,.65),transparent 64%)}
.category-hero--cases .category-hero-photo img {object-position:50% 52%}
.category-hero--news .category-hero-photo img {object-position:50% 52%}
.category-hero--service .category-hero-photo img {object-position:50% 55%}
.category-hero--door {height:auto;aspect-ratio:1800/765}
.category-hero--lock {height:auto;aspect-ratio:1830/800}
.category-hero--door .category-hero-photo img {position:relative;top:-3%;height:103%;object-position:center}
.category-hero--door .hero-route,.category-hero--lock .hero-route {color:#253038;text-shadow:0 1px 5px white}
.category-hero--door::before,.category-hero--lock::before {background:linear-gradient(0deg,rgba(10,18,23,.7),transparent 55%)}
.category-hero--about .category-hero-photo img {object-position:50% 45%}
.category-hero--engineering .category-hero-photo img {object-position:60% center}

@media(min-width:1800px) {
  .category-hero-content {width:calc(100% - 8vw);max-width:none}
}
@media(max-width:760px) {
  .hero-route {gap:10px;font-size:12px;flex-wrap:nowrap}
  .hero-route .back-link {font-size:12px;min-height:44px;padding:0 14px 0 0;margin-right:2px}
  .hero-route>span {display:inline}
  .partnership-route {inset:8px 0 auto;width:calc(100% - 32px)}
  .category-hero {height:420px}
  .category-hero--door,.category-hero--lock {height:420px;aspect-ratio:auto}
  .category-hero-content {width:calc(100% - 40px);padding:8px 0 36px}
  .category-hero-title {font-size:clamp(42px,11.8vw,68px);letter-spacing:-.025em}
  .category-hero--cases .category-hero-photo img {object-position:64% center}
  .category-hero--news .category-hero-photo img {object-position:54% center}
  .category-hero--service .category-hero-photo img {object-position:71% 50%}
  .category-hero--door .category-hero-photo img {object-position:51% center}
  .category-hero--lock .category-hero-photo img {object-position:48% center}
  .category-hero--about {height:300px}
  .category-hero--about .category-hero-photo img {object-position:75% center}
  .category-hero--door .hero-route,.category-hero--lock .hero-route {color:#fff;text-shadow:0 1px 5px #182027}
  .category-hero--door::before,.category-hero--lock::before {background:linear-gradient(180deg,rgba(10,18,23,.55),transparent 25%),linear-gradient(0deg,rgba(10,18,23,.7),transparent 55%)}
}

/* 2026-09-20 scoped typography: approved family extended to four specified pages. */
/* ============================================================
   统一栏目横幅标题排版 - 其余四页补充方案
   与已批准的智能门 / 智能锁资料页共用 MiSans 500 体系
   精确限定：page-list-18 / page-list-26 / page-list-21 / page-list-36
   ============================================================ */

/* ============================================================
   1. 智能锁页（浅底产品页 · page-list-18）
   ============================================================ */

/* 蒙层：取消顶部重压与径向效果；仅底部加暗渐变托白字，产品主体完全原色 */
body[class*="page-list-18-"] .category-hero--lock::before {
  background:
    linear-gradient(
      0deg,
      rgba(10, 18, 23, 0.42),
      transparent 45%
    );
}

body[class*="page-list-18-"] .category-hero--lock .category-hero-content {
  width: 83.333333%;
  max-width: none;
  padding-top: 20px;
  padding-bottom: 108px;
}

/* 标题：MiSans 500、端正不斜不扁、白字，取消旧text-shadow与900字重 */
body[class*="page-list-18-"] .category-hero--lock .category-hero-title {
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  font-synthesis: none;
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: none;
  white-space: nowrap;
}

/* 面包屑：深灰字，去旧白影；13px/400，44px点击高由基础样式保证 */
body[class*="page-list-18-"] .category-hero--lock .hero-route {
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: #2a353e;
  text-shadow: none;
}
body[class*="page-list-18-"] .category-hero--lock .hero-route .back-link {
  font-family: inherit;
  font-weight: 400;
  font-size: 13px;
  color: #2a353e;
}

/* ============================================================
   2. 工程案例页（深底 · page-list-26）
   ============================================================ */

/* 蒙层：减轻顶部76%重压，底部渐变托字，建筑中部细节保留 */
body[class*="page-list-26-"] .category-hero--cases::before {
  background:
    linear-gradient(
      180deg,
      rgba(14, 16, 19, 0.2),
      transparent 25%
    ),
    linear-gradient(
      0deg,
      rgba(15, 17, 20, 0.38),
      transparent 50%
    );
}

body[class*="page-list-26-"] .category-hero--cases {
  color: #ffffff;
}

body[class*="page-list-26-"] .category-hero--cases .category-hero-content {
  width: 83.333333%;
  max-width: none;
  padding-top: 20px;
  padding-bottom: 96px;
}

/* 标题：白字、MiSans 500，取消金色 #d0bea3 与 900字重 */
body[class*="page-list-26-"] .category-hero--cases .category-hero-title {
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  font-synthesis: none;
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: none;
  white-space: nowrap;
}

/* 面包屑：浅灰白，去旧重蒙层带来的深色字 */
body[class*="page-list-26-"] .category-hero--cases .hero-route {
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: #e8ecf0;
  text-shadow: none;
}
body[class*="page-list-26-"] .category-hero--cases .hero-route .back-link {
  font-family: inherit;
  font-weight: 400;
  font-size: 13px;
  color: #e8ecf0;
}

/* ============================================================
   3. 企业资讯页（深底 · page-list-21）
   ============================================================ */

/* 蒙层：减轻顶部重压，底部渐变托字，舞台画面主体保留 */
body[class*="page-list-21-"] .category-hero--news::before {
  background:
    linear-gradient(
      180deg,
      rgba(14, 16, 19, 0.2),
      transparent 25%
    ),
    linear-gradient(
      0deg,
      rgba(15, 17, 20, 0.38),
      transparent 50%
    );
}

body[class*="page-list-21-"] .category-hero--news {
  color: #ffffff;
}

body[class*="page-list-21-"] .category-hero--news .category-hero-content {
  width: 83.333333%;
  max-width: none;
  padding-top: 20px;
  padding-bottom: 96px;
}

/* 标题：白字、MiSans 500，取消浅蓝灰 #bdcddd 与 900字重 */
body[class*="page-list-21-"] .category-hero--news .category-hero-title {
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  font-synthesis: none;
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: none;
  white-space: nowrap;
}

/* 面包屑：浅灰白 */
body[class*="page-list-21-"] .category-hero--news .hero-route {
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: #e8ecf0;
  text-shadow: none;
}
body[class*="page-list-21-"] .category-hero--news .hero-route .back-link {
  font-family: inherit;
  font-weight: 400;
  font-size: 13px;
  color: #e8ecf0;
}

/* ============================================================
   4. 关于天能页（说明句 · page-list-36）
   说明句身份：MiSans 400，不做品牌大标题，不增额外"关于天能"大字
   ============================================================ */

/* 蒙层：顶部轻薄便于面包屑可读，底部渐变托白字说明句，厂区建筑中部原色 */
body[class*="page-list-36-"] .company-campus::before {
  background:
    linear-gradient(
      180deg,
      rgba(247, 249, 250, 0.55),
      transparent 28%
    ),
    linear-gradient(
      0deg,
      rgba(24, 31, 29, 0.7),
      transparent 45%
    );
}

/* 面包屑：深灰字，去旧阴影；13px/400，44px点击高 */
body[class*="page-list-36-"] .company-route {
  color: #2a353e;
}
body[class*="page-list-36-"] .company-route .page-route {
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: #2a353e;
  text-shadow: none;
}

/* 说明句：保留原文，MiSans 400，白字，左下角排版 */
body[class*="page-list-36-"] .company-masthead-subtitle {
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-synthesis: none;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0;
  color: #ffffff;
  text-shadow: none;
  inset: auto 0 56px 0;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

body[class*="page-list-36-"] .company-masthead-subtitle {
  width: 83.333333%;
  max-width: none;
  margin: 0 auto;
}

/* ============================================================
   手机端（≤ 760px，390 宽视口基准）
   ============================================================ */

@media (max-width: 760px) {

  /* —— 智能锁手机端 —— */
  body[class*="page-list-18-"] .category-hero--lock .category-hero-content {
    width: calc(100% - 48px);
    padding-top: 16px;
    padding-bottom: 56px;
  }
  body[class*="page-list-18-"] .category-hero--lock .category-hero-title {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-top: auto;
  }
  /* 面包屑移至标题上方绝对定位，白字（锁图顶部偏暗，与门页同理） */
  body[class*="page-list-18-"] .category-hero--lock .hero-route {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 108px;
    color: #ffffff;
    text-shadow: none;
    font-size: 12px;
    gap: 8px;
  }
  body[class*="page-list-18-"] .category-hero--lock .hero-route .back-link {
    color: #ffffff;
    font-size: 12px;
    padding-right: 14px;
    margin-right: 2px;
  }
  body[class*="page-list-18-"] .category-hero--lock::before {
    background:
      linear-gradient(
        0deg,
        rgba(10, 18, 23, 0.55),
        transparent 48%
      );
  }

  /* —— 工程案例手机端 —— */
  body[class*="page-list-26-"] .category-hero--cases .category-hero-content {
    width: calc(100% - 48px);
    padding-top: 16px;
    padding-bottom: 56px;
  }
  body[class*="page-list-26-"] .category-hero--cases .category-hero-title {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  body[class*="page-list-26-"] .category-hero--cases .hero-route {
    font-size: 12px;
    gap: 8px;
    color: #e8ecf0;
  }
  body[class*="page-list-26-"] .category-hero--cases .hero-route .back-link {
    font-size: 12px;
    padding-right: 14px;
    margin-right: 2px;
    color: #e8ecf0;
  }
  body[class*="page-list-26-"] .category-hero--cases::before {
    background:
      linear-gradient(180deg, rgba(14, 16, 19, 0.3), transparent 25%),
      linear-gradient(0deg, rgba(15, 17, 20, 0.55), transparent 50%);
  }

  /* —— 企业资讯手机端 —— */
  body[class*="page-list-21-"] .category-hero--news .category-hero-content {
    width: calc(100% - 48px);
    padding-top: 16px;
    padding-bottom: 56px;
  }
  body[class*="page-list-21-"] .category-hero--news .category-hero-title {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  body[class*="page-list-21-"] .category-hero--news .hero-route {
    font-size: 12px;
    gap: 8px;
    color: #e8ecf0;
  }
  body[class*="page-list-21-"] .category-hero--news .hero-route .back-link {
    font-size: 12px;
    padding-right: 14px;
    margin-right: 2px;
    color: #e8ecf0;
  }
  body[class*="page-list-21-"] .category-hero--news::before {
    background:
      linear-gradient(180deg, rgba(14, 16, 19, 0.3), transparent 25%),
      linear-gradient(0deg, rgba(15, 17, 20, 0.55), transparent 50%);
  }

  /* —— 关于天能手机端 —— */
  /* 说明句保留在图内，自然换行，不挪到图下灰条 */
  body[class*="page-list-36-"] .company-campus::before {
    background:
      linear-gradient(
        180deg,
        rgba(247, 249, 250, 0.5),
        transparent 45px
      ),
      linear-gradient(
        0deg,
        rgba(24, 31, 29, 0.78),
        transparent 55%
      );
  }
  body[class*="page-list-36-"] .company-route {
    inset: 6px 0 auto;
    color: #2a353e;
  }
  body[class*="page-list-36-"] .company-route .page-route {
    font-size: 12px;
    color: #2a353e;
  }
  body[class*="page-list-36-"] .company-masthead-subtitle {
    position: absolute;
    inset: auto 0 16px 0;
    font-size: 13px;
    line-height: 1.55;
    color: #ffffff;
    padding: 0;
    margin: 0;
  }
  body[class*="page-list-36-"] .company-masthead-subtitle {
    width: calc(100% - 48px);
    margin: 0 auto;
  }
}
/* Map the author's 120px / 24px alignment to the existing shell DOM. */
body[class*="page-list-36-"] .company-route {width:83.333333%;max-width:none}
@media(max-width:760px){
 body[class*="page-list-36-"] .company-route{width:calc(100% - 48px)}
}

/* ============================================================
   三处具体修正（基于实际截图核对）
   ============================================================ */

/* ============================================================
   1. 智能锁桌面页 — 标题移至右上角，避开F8古铜锁底部
   手机端经核对无压产品问题，保持底部位置不变
   ============================================================ */
@media (min-width: 761px) {
  body[class*="page-list-18-"] .category-hero--lock .category-hero-content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 0;
  }
  body[class*="page-list-18-"] .category-hero--lock .category-hero-title {
    font-size: 50px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: right;
    margin: 0;
    white-space: nowrap;
  }
  /* 顶部渐变托住白字；底部减淡因标题已不在底部 */
  body[class*="page-list-18-"] .category-hero--lock::before {
    background:
      linear-gradient(
        180deg,
        rgba(10, 18, 23, 0.4),
        transparent 32%
      ),
      linear-gradient(
        0deg,
        rgba(10, 18, 23, 0.22),
        transparent 28%
      );
  }
  /* 面包屑保持左上深灰字，取消旧白影 */
  body[class*="page-list-18-"] .category-hero--lock .hero-route {
    color: #2a353e;
    text-shadow: none;
  }
  body[class*="page-list-18-"] .category-hero--lock .hero-route .back-link {
    color: #2a353e;
    text-shadow: none;
  }
}

/* ============================================================
   2. 关于天能手机端 — 说明句放大字号，自然两行
   保持140px图高与原裁切，不改变图像几何
   ============================================================ */
@media (max-width: 760px) {
  body[class*="page-list-36-"] .company-masthead-subtitle {
    position: absolute;
    inset: auto 0 14px 0;
    font-size: 17px;
    line-height: 1.5;
    color: #ffffff;
    width: calc(100% - 48px);
    margin: 0 auto;
    padding: 0;
  }
  /* 底部渐变加厚，托住两行白字说明句 */
  body[class*="page-list-36-"] .company-campus::before {
    background:
      linear-gradient(
        180deg,
        rgba(247, 249, 250, 0.5),
        transparent 45px
      ),
      linear-gradient(
        0deg,
        rgba(24, 31, 29, 0.85),
        transparent 52%
      );
  }
}

/* ============================================================
   3. 工程案例桌面 — 加深顶部渐变，提升路径可读性
   不移动建筑、不加白浮框
   ============================================================ */
@media (min-width: 761px) {
  body[class*="page-list-26-"] .category-hero--cases::before {
    background:
      linear-gradient(
        180deg,
        rgba(14, 16, 19, 0.5),
        transparent 35%
      ),
      linear-gradient(
        0deg,
        rgba(15, 17, 20, 0.38),
        transparent 50%
      );
  }
}

/* ============================================================
   手机端三处修正（补充/覆盖现有规则）
   ============================================================ */

@media (max-width: 760px) {

  /* —— 1. 关于天能：说明句均衡两行，消除"司"孤字 —— */
  body[class*="page-list-36-"] .company-masthead-subtitle {
    max-width: 12.5em;          /* 约212.5px / 17px ≈ 12.5字宽，21字拆成11+10 */
    left: 24px;
    right: auto;
    margin: 0;
    text-wrap: balance;         /* 现代浏览器自动均衡；不支持的回退到max-width */
    text-align: left;
  }

  /* —— 2. 工程案例：顶部路径加深蒙层，提升白字可读性 —— */
  body[class*="page-list-26-"] .category-hero--cases::before {
    background:
      linear-gradient(
        180deg,
        rgba(14, 16, 19, 0.6),   /* 从0.3加深到0.6，白字在浅天空上可读 */
        transparent 30%
      ),
      linear-gradient(
        0deg,
        rgba(15, 17, 20, 0.55),
        transparent 50%
      );
  }

  /* —— 3. 智能锁：路径上移顶部用深色字，标题右移减少跨锁数 —— */
  /* 路径从底部移到顶部，深灰字配浅灰产品背景，避开底部产品密集区 */
  body[class*="page-list-18-"] .category-hero--lock .hero-route {
    position: absolute;
    top: 14px;
    left: 24px;
    right: 24px;
    bottom: auto;
    color: #2a353e;
    font-size: 12px;
    gap: 8px;
  }
  body[class*="page-list-18-"] .category-hero--lock .hero-route .back-link {
    color: #2a353e;
    font-size: 12px;
  }

  /* 标题右对齐，仅压第4-5把锁的下部，减少横跨数量 */
  body[class*="page-list-18-"] .category-hero--lock .category-hero-title {
    align-self: flex-end;
    text-align: right;
    font-size: 30px;            /* 从32略减，减小覆盖面积 */
    letter-spacing: -0.01em;
  }

  /* 底部渐变加厚，托住右下白字标题 */
  body[class*="page-list-18-"] .category-hero--lock::before {
    background:
      linear-gradient(
        0deg,
        rgba(10, 18, 23, 0.6),  /* 从0.55加深到0.6，范围扩大到55% */
        transparent 55%
      );
  }

  /* 内容区底部内边距微调，标题不贴底边 */
  body[class*="page-list-18-"] .category-hero--lock .category-hero-content {
    padding-bottom: 48px;
  }
}

@media (max-width: 760px) {

  /* —— 智能锁手机端路径：白字 + 深色投影，跨深浅背景均可读 —— */
  body[class*="page-list-18-"] .category-hero--lock .hero-route {
    position: absolute;
    top: 14px;
    left: 24px;
    right: 24px;
    bottom: auto;
    color: #ffffff;
    font-size: 12px;
    gap: 8px;
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.75),
      0 0 1px rgba(0, 0, 0, 0.55);
  }
  body[class*="page-list-18-"] .category-hero--lock .hero-route .back-link {
    color: #ffffff;
    font-size: 12px;
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.75),
      0 0 1px rgba(0, 0, 0, 0.55);
  }

}

/* Mobile separation approved 2026-09-20; 44px links retained. */
/* ============================================================
   page-list-18 智能锁页 — 标题排版修正
   桌面/平板：标题右上，不碰 E3 锁顶
   手机端（用户已确认的手机留白方案）：顶部加同色留白，标题与路径移入，原图420px不变
   ============================================================ */

/* —— 蒙层：仅底部轻微渐变托住画面下沿，顶部无重压 —— */
body[class*="page-list-18-"] .category-hero--lock::before {
  background:
    linear-gradient(
      0deg,
      rgba(10, 18, 23, 0.22),
      transparent 28%
    );
}

/* —— 内容区：左右两端布局，路径左上、标题右上 —— */
body[class*="page-list-18-"] .category-hero--lock .category-hero-content {
  width: 83.333333%;
  max-width: none;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

/* —— 标题：MiSans 500，端正不斜，右对齐 —— */
body[class*="page-list-18-"] .category-hero--lock .category-hero-title {
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  font-synthesis: none;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: none;
  white-space: nowrap;
  text-align: right;
  margin: 0;
}

/* —— 路径：深灰字，去白影 —— */
body[class*="page-list-18-"] .category-hero--lock .hero-route {
  font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: #2a353e;
  text-shadow: none;
}
body[class*="page-list-18-"] .category-hero--lock .hero-route .back-link {
  font-family: inherit;
  font-weight: 400;
  font-size: 13px;
  color: #2a353e;
  text-shadow: none;
}

/* ========== 断点：字号与上内边距逐级调整，标题底始终在 E3 顶之上 ========== */

/* 大屏桌面 ≥ 1440px：50px / 20px，实测不遮挡 */
@media (min-width: 1440px) {
  body[class*="page-list-18-"] .category-hero--lock .category-hero-content {
    padding-top: 20px;
    padding-bottom: 0;
  }
  body[class*="page-list-18-"] .category-hero--lock .category-hero-title {
    font-size: 50px;
  }
}

/* 小屏桌面 1024–1439px：36px / 16px，1024 处 E3 顶 61.5px，标题底 57.4px，余 4.1px */
@media (min-width: 1024px) and (max-width: 1439px) {
  body[class*="page-list-18-"] .category-hero--lock .category-hero-content {
    padding-top: 16px;
    padding-bottom: 0;
  }
  body[class*="page-list-18-"] .category-hero--lock .category-hero-title {
    font-size: 36px;
  }
}

/* 平板 761–1023px：26px / 12px，768 处 E3 顶 46.2px，标题底 41.9px，余 4.3px */
@media (min-width: 761px) and (max-width: 1023px) {
  body[class*="page-list-18-"] .category-hero--lock .category-hero-content {
    padding-top: 12px;
    padding-bottom: 0;
  }
  body[class*="page-list-18-"] .category-hero--lock .category-hero-title {
    font-size: 26px;
  }
}

/* ========== 手机端（用户已确认的手机留白方案：顶部加同色留白，标题与路径移入） ==========
   原理：hero 加高到 546px，背景用与图顶一致的浅灰；
   图保持 420px 高、贴底，水平裁切 48% 完全不变；
   路径与标题在上方 126px 浅灰区内，深字，不碰任何锁体和型号。
   ================================================================ */

@media (max-width: 760px) {

  /* Hero 加 126px 顶部同色留白，图仍为 420px 贴底 */
  body[class*="page-list-18-"] .category-hero--lock {
    height: 546px;
    aspect-ratio: auto;
    background: #eef0f2;           /* 与图顶工作室浅灰背景同色 */
  }

  /* 图片容器：固定 420px 高，贴底，水平裁切不变 */
  body[class*="page-list-18-"] .category-hero--lock .category-hero-photo {
    top: auto;
    bottom: 0;
    height: 420px;
  }
  body[class*="page-list-18-"] .category-hero--lock .category-hero-photo img {
    object-position: 48% center;   /* 与原手机端水平对齐一致 */
  }

  /* 内容区：顶部纵向排列，路径在上、标题在下 */
  body[class*="page-list-18-"] .category-hero--lock .category-hero-content {
    width: calc(100% - 48px);
    padding: 18px 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* 路径：深灰字，浅底，无阴影 */
  body[class*="page-list-18-"] .category-hero--lock .hero-route {
    position: static;
    color: #4a5560;
    font-size: 12px;
    gap: 8px;
    text-shadow: none;
    margin: 0;
  }
  body[class*="page-list-18-"] .category-hero--lock .hero-route .back-link {
    color: #4a5560;
    font-size: 12px;
    padding-right: 14px;
    margin-right: 2px;
    text-shadow: none;
  }

  /* 标题：深字、30px / MiSans 500，左对齐，在浅灰区内距图顶仍有 18px 空隙 */
  body[class*="page-list-18-"] .category-hero--lock .category-hero-title {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #1a2530;
    text-shadow: none;
    text-align: left;
    margin-top: 10px;
    align-self: flex-start;
  }

  /* 蒙层：仅底部轻微过渡，顶部浅灰区不需要渐变 */
  body[class*="page-list-18-"] .category-hero--lock::before {
    background:
      linear-gradient(
        0deg,
        rgba(10, 18, 23, 0.2),
        transparent 30%
      );
  }
}

/* Author's final desktop/tablet color, mapped to the actual page classes. */
@media (min-width: 761px) {
  body[class*="page-list-18-"] .category-hero--lock .category-hero-title {
    color: #2a353e;
  }
}

/* Keep the author's top-aligned 19.5px text line inside the real 44px targets. */
@media (min-width: 761px) and (max-width: 1439px) {
  body[class*="page-list-18-"] .category-hero--lock .hero-route,
  body[class*="page-list-18-"] .category-hero--lock .hero-route a {
    align-items: flex-start;
  }
  body[class*="page-list-18-"] .category-hero--lock .hero-route .back-link::after {
    top: 3px;
  }
}