/* ==========================================================================
   多页站点组件（2026-09-21：由单页长滚动改为 6 页站点时新增）
   依赖 tokens.css 的变量；加载顺序须在 components.css 之后。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 内页横幅 page-hero
   复用首屏的「深蓝底 + 右侧斜切图 + 金色发丝线」语言，但压缩到横幅高度，
   让人一眼知道自己在哪个页面，而不是被一张全屏图占满。
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 44svh, 440px);
  padding-top: calc(var(--header-h) + var(--sp-7));
  padding-bottom: var(--sp-8);
  background: var(--navy-900);
  color: var(--ink-onDark-1);
  overflow: clip;
  isolation: isolate;
}
.page-hero__media {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 54%;
  z-index: -2;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}
/* 左缘深蓝渐隐，保证文字压在图上仍然清晰 */
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--navy-900) 6%,
    rgba(1, 20, 46, .80) 34%,
    rgba(1, 20, 46, .30) 70%,
    rgba(1, 20, 46, .48) 100%
  );
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(38rem 22rem at 8% 18%, rgba(20, 84, 154, .30), transparent 62%);
}
.page-hero__inner { position: relative; }

.page-hero__title {
  font-family: var(--font-serif);
  font-size: var(--type-page);
  line-height: 1.14;
  letter-spacing: var(--ls-display);
  font-weight: 600;
}
.page-hero__title em {
  font-style: normal;
  color: var(--color-accent-display);
}
.page-hero__lead {
  margin-top: var(--sp-5);
  max-width: 37rem;
  font-size: var(--fs-md);
  line-height: 1.8;
  color: var(--ink-onDark-2);
}

/* --------------------------------------------------------------------------
   2. 面包屑
   -------------------------------------------------------------------------- */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--ink-onDark-3);
}
.crumbs a { color: var(--ink-onDark-2); }
.crumbs a:hover { color: var(--gold-400); }

/* --------------------------------------------------------------------------
   3. 首页可点击业务卡
   -------------------------------------------------------------------------- */
/* 只负责把 <a> 变成块级卡片；悬停/位移完全交给 .card，
   避免同一元素出现两套数值（曾经这里是 -5px，.card 是 -4px） */
.card--link {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* 键盘用户必须拿到与悬停一致的反馈 */
.card--link:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: var(--line-gold);
}
.card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-accent-text);
}

/* --------------------------------------------------------------------------
   4. 首页图文两栏 teaser
   -------------------------------------------------------------------------- */
.teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}
.teaser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.teaser__media { position: relative; }
.teaser__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}
/* 阶梯装饰压在图片左上角，与业务区的构成语言保持一致 */
.teaser__media .ladder {
  position: absolute;
  left: calc(-1 * var(--sp-5));
  top: calc(-1 * var(--sp-5));
}

/* --------------------------------------------------------------------------
   5. CTA 按钮容器
   用 flex 而不是靠父级 text-align：一个页面里出现两个 CTA 时不会各歪一边
   -------------------------------------------------------------------------- */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* --------------------------------------------------------------------------
   6. 多页导航高亮
   scrollspy 用的是 aria-current="true"（同页锚点），
   多页站点用 aria-current="page"（当前页面），两者共用同一套高亮样式。
   -------------------------------------------------------------------------- */
.nav__link[aria-current="page"] { color: var(--gold-400); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   7. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .page-hero { min-height: 0; padding-top: calc(var(--header-h) + var(--sp-6)); }
  /* 图文叠放时把图压到背景，避免横幅过高 */
  .page-hero__media { width: 100%; clip-path: none; opacity: .5; }
  .page-hero__media::after {
    background: linear-gradient(180deg, rgba(1, 20, 46, .82), rgba(1, 20, 46, .92));
  }
  .teaser { grid-template-columns: 1fr; gap: var(--sp-7); }
  .teaser__media .ladder { left: 0; top: calc(-1 * var(--sp-4)); }
}

@media (max-width: 640px) {
  .page-hero__title { font-size: clamp(1.8rem, 1.2rem + 5vw, 2.4rem); }
  .page-hero__lead { font-size: var(--fs-base); }
}

/* ==========================================================================
   8. 掌灯者 —— 创始人主题页（founder.html）
   这是全站唯一的「人物主题」页，构成语言与其他内页刻意拉开：
   横幅改为左文右像（其余内页是文字压图），标题字号高于 --type-page 一档，
   相当于把「人」本身当成页面主体，而不是又一张带图的信息页。
   ========================================================================== */

/* 8.1 人物横幅 */
.founder-hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--sp-9));
  padding-bottom: var(--section-y);
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow: clip;
  isolation: isolate;
}
.founder-hero__inner {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.founder-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 1.4rem + 6vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  font-weight: 600;
}
.founder-hero__latin {
  margin-top: var(--sp-4);
  font-family: var(--font-latin);
  font-size: var(--fs-xl);
  font-style: italic;
  letter-spacing: .04em;
  color: var(--gold-400);
}
.founder-hero__lead {
  margin-top: var(--sp-6);
  max-width: 34rem;
  font-size: var(--type-lead);
  line-height: 1.9;
  color: var(--ink-onDark-2);
}
.founder-hero__sign {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-onDark-1);
}
.founder-hero__name {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
}
.founder-hero__role {
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  color: var(--gold-400);
}
.founder-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* 8.2 人物肖像：金色发丝框向右下偏移，形成「照片压在框上」的层次 */
.founder-hero__media { position: relative; }
.founder-hero__media::before {
  content: "";
  position: absolute;
  inset: var(--sp-5) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-5);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-xl);
}
.founder-hero__figure {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.founder-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 38%;
}
.founder-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 11, 30, .04) 40%, rgba(1, 11, 30, .46));
}
/* 肖像左下角的「云阶」标记，与业务区、速览区同一套破格语言 */
.founder-hero__media .ladder {
  position: absolute;
  z-index: 2;
  left: var(--sp-6);
  bottom: var(--sp-6);
  height: 28px;
  gap: 5px;
}
.founder-hero__media .ladder i { width: 5px; }
.founder-hero__media .ladder i:nth-child(1) { height: 10px; }
.founder-hero__media .ladder i:nth-child(2) { height: 19px; }
.founder-hero__media .ladder i:nth-child(3) { height: 28px; }

/* 8.3 专业版图：六格共用发丝线，比卡片更"报表"，与人物页的克制感一致 */
.scope {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.scope__item {
  background: var(--color-surface);
  padding: var(--sp-7) var(--sp-6);
  transition: background-color var(--dur-base) ease-out;
}
.scope__item:hover { background: rgba(196, 161, 93, .09); }
.scope__num {
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  letter-spacing: .16em;
  color: var(--gold-400);
}
.scope__title { margin-top: var(--sp-4); font-size: var(--type-card); }
.scope__en {
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.scope__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--color-muted);
}

/* 8.4 咨询理念：三段式，短金线压顶 */
.creed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.creed__item {
  position: relative;
  padding-top: var(--sp-6);
  border-top: 2px solid var(--line-1);
}
.creed__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 46px;
  height: 2px;
  background: var(--gold-500);
}
.creed__step {
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  color: var(--color-accent-text);
}
.creed__title { margin-top: var(--sp-3); font-size: var(--type-card); }
.creed__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-muted);
}

/* 8.5 响应式 */
@media (max-width: 1080px) {
  .scope { grid-template-columns: repeat(2, 1fr); }
  .creed { grid-template-columns: 1fr; gap: var(--sp-7); }
}
@media (max-width: 900px) {
  .founder-hero { padding-top: calc(var(--header-h) + var(--sp-7)); }
  .founder-hero__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .founder-hero__media { max-width: 26rem; }
}
@media (max-width: 640px) {
  .founder-hero__title { font-size: clamp(2.6rem, 1.6rem + 6vw, 3.4rem); }
  .founder-hero__lead { font-size: var(--fs-base); }
  /* 边框外溢在窄屏会把容器撑出视觉边界，直接取消 */
  .founder-hero__media::before { display: none; }
  .scope { grid-template-columns: 1fr; }
  .scope__item { padding: var(--sp-6) var(--sp-5); }
}