/* brand-band.css — 全站品牌宣言带 (2026-10-06)
 *
 * 页面侧契约:
 *   <link rel="stylesheet" href="brand-band.css?v=20261006">
 *   <section class="ty-band ty-band--full">…</section>   完整版（首页 / 关于 / 商品列表）
 *   <section class="ty-band ty-band--slim">…</section>   紧凑版（其余前台页）
 *
 * 位置（2026-10-06 晚定）: 一律放在**页面顶部** —— 客户一进站先看到宣言。
 *   index 在轮播之后、about 在顶部大图之后（这两页本就靠上），其余 8 页都在导航正下方:
 *   shop 压在分类轮播之上、product-detail 压在面包屑之下、news/activity 压在页内大标题之前、
 *   solution-design/professional-wear/merchants/investment 压在本页标题横幅之上。
 *
 * ⚠ 本文件被 11 个前台页共用, 其中 about.html 与 solution-detail.html **不引 shared-style.css**,
 *   所以颜色一律写**字面色值**, 绝不写 var(--token) —— 变量解析不到会让整条声明作废,
 *   颜色回退成继承值, 而且不报错。(同款处理见 task-board.js:34-36)
 *   色值取自 shared-style.css: #2F4046 = --primary-dark, #E2DACB = --gold-on-dark,
 *   #BBA680 = --gold, #A99166 = --gold-dark, #BBA680 = gold-500。
 *
 * ⚠ 深底金字用 #E2DACB 而**不是** #BBA680:
 *   #BBA680 压 #2F4046 只有 4.57:1(勉强过), 压 #4E6E78 更是 2.32:1(不及格);
 *   #E2DACB 压 #2F4046 有 7.78:1。仓库里 custom-request.html:17 / professional-wear.html:62
 *   和 topbar-user.js:87-90 都记过这条。
 *
 * ⚠ 内层用 .ty-band-inner 而**不是** .container:
 *   mobile.css:186 有一条 `.container{padding:0 12px!important;max-width:100%!important}` 会抢。
 *
 * ⚠ 不用 backdrop-filter(会开新层叠上下文吃掉 z-index, 见记忆 backdrop-filter-traps-dropdown)。
 */

/* ── 基座 ───────────────────────────────────────────── */
.ty-band {
  position: relative;
  overflow: hidden;
  background-color: #2F4046;
  /* 图随本文件解析: 本文件在站点根目录, 各前台页也都在根目录 —— 相对路径直接可用 */
  background-image: url('images/hotel-scene-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  /* 文字与图之间永远隔一层蒙版, 蒙版样式见下面的变体 */
}

.ty-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ty-band-inner {
  position: relative; /* 压过 ::before */
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 76px 20px;
}

.ty-band-copy { max-width: 640px; }

/* ── 完整版: 左重右轻的蒙版, 文字只压在厚蒙版一侧 ──────── */
.ty-band--full { background-position: center 38%; }

.ty-band--full::before {
  background: linear-gradient(100deg,
    rgba(22, 32, 36, 0.96) 0%,
    rgba(22, 32, 36, 0.92) 40%,
    rgba(22, 32, 36, 0.72) 64%,
    rgba(22, 32, 36, 0.42) 100%);
}

/* ── 紧凑版: 同样的图, 蒙版更平, 高度更矮 ──────────────── */
.ty-band--slim { background-position: center 45%; }

.ty-band--slim::before {
  background: linear-gradient(90deg,
    rgba(22, 32, 36, 0.94) 0%,
    rgba(22, 32, 36, 0.90) 52%,
    rgba(22, 32, 36, 0.60) 100%);
}

.ty-band--slim .ty-band-inner { padding: 44px 20px; }
.ty-band--slim .ty-band-copy { max-width: 900px; }

/* ── 排版 ───────────────────────────────────────────── */
.ty-band-kicker {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #E2DACB;
}

.ty-band-title {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 52px);
  /* 本机只有 Microsoft YaHei/黑体, 最重只到 Bold(700) —— 再往上写 800/900 不会有额外效果,
     冲击力靠字号 + 字距 + 金白对比, 不靠字重。 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}

.ty-band-title em {
  font-style: normal; /* <em> 只用来上金色, 不做斜体 */
  color: #E2DACB;
}

.ty-band-sub {
  margin: 20px 0 0;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.86);
}

/* ── 三根支柱 ───────────────────────────────────────── */
.ty-band-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.ty-band-points li {
  padding: 0 26px;
  border-left: 1px solid rgba(187, 166, 128, 0.3);
}

.ty-band-points li:first-child {
  padding-left: 0;
  border-left: 0;
}

.ty-band-points b {
  display: block;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #E2DACB;
}

.ty-band-points span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

/* ── CTA ────────────────────────────────────────────── */
.ty-band-cta-wrap { margin: 34px 0 0; }

.ty-band-cta {
  display: inline-block;
  padding: 13px 32px;
  background: linear-gradient(135deg, #BBA680 0%, #A99166 100%);
  color: #2F4046;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ty-band-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ── 紧凑版再压一档字号 ─────────────────────────────── */
.ty-band--slim .ty-band-title { font-size: clamp(20px, 2.6vw, 32px); }
.ty-band--slim .ty-band-sub { margin-top: 12px; font-size: clamp(13px, 1.3vw, 15px); }

/* ── 移动端 ─────────────────────────────────────────── */
/* ⚠ 手机上文字占满整宽 —— 左边重右边轻的蒙版会让右半边的字压到亮图上,
   所以 ≤768 一律换成接近平铺的厚蒙版。(5 个页面没引 mobile.css, 规则必须写在这里) */
@media (max-width: 768px) {
  .ty-band--full::before,
  .ty-band--slim::before {
    background: linear-gradient(180deg,
      rgba(22, 32, 36, 0.94) 0%,
      rgba(22, 32, 36, 0.89) 60%,
      rgba(22, 32, 36, 0.92) 100%);
  }

  .ty-band-inner,
  .ty-band--slim .ty-band-inner { padding: 46px 18px; }

  .ty-band-copy,
  .ty-band--full .ty-band-copy,
  .ty-band--slim .ty-band-copy { max-width: none; }

  .ty-band-title { line-height: 1.34; }

  .ty-band-points {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .ty-band-points li {
    padding: 15px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(187, 166, 128, 0.28);
  }

  .ty-band-points li:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .ty-band-cta-wrap { margin-top: 28px; }

  /* 多页有固定定位的 .m-tabbar 压底。2026-10-06 晚带子已全部挪到页头、不再与 tabbar 重叠,
     这条留着当保险: 万一将来某页把带子放回页尾, 最后一行不会被底栏盖住。 */
  .ty-band { padding-bottom: 8px; }
}

@media (max-width: 375px) {
  .ty-band-inner,
  .ty-band--slim .ty-band-inner { padding: 38px 16px; }
  .ty-band-kicker { letter-spacing: 0.1em; }
}