/* ==========================================================================
   北京传家律师事务所官网 v2 —— 复刻 律所官网原型/lawfirm-v2.html
   手写 CSS，不依赖 Tailwind / 外部 CDN。
   （原型用 Tailwind 浏览器端运行时编译，生产站不适用：样式会吊在外网 CDN 上，
     慢或不可达时整页失去样式。故按原型设计值手写等价 CSS。）
   全站共用本文件：首页 index.html + 列表页 / 详情页 / 搜索页 / 表单页。
   （一个样式表覆盖全站：设计变量只有一份，子页面也不必多发一次请求。）
   ========================================================================== */

:root {
  --c-blue: #172E75;        /* 主色：律所品牌蓝（取自 logo 色卡） */
  --c-blue-dark: #122457;
  --c-blue-deep: #0C1A42;
  --c-blue-light: #33489A;
  --c-gold: #B08D57;
  --c-gold-l: #CEA46B;
  --c-bg: #FAFAF7;
  --c-card: #FFFFFF;
  --c-ink: #1F1B16;
  --c-gray: #5C5648;
  --c-line: #E8E4DD;
  --r: 12px;
  --shadow: 0 16px 32px rgba(23, 46, 117, .10);
  --f-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun, serif;
  --f-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  --f-hero: "SourceHanSansCN-Hero", var(--f-sans);
}

/* 思源黑体 Medium(500) —— 只给首页大标题「北京传家律师事务所」用。
   源文件 字体/思源黑体/SourceHanSansCN-Medium_0.otf 有 8.8MB，整包上线不现实（受众在国内，
   不挂任何外部 CDN），故用 pyftsubset 只裁这 9 个字：裁完 woff2 仅 2.2KB。
   重新生成（改标题文案就得重跑，命令见 font/fonts/README-hero-subset.txt）：
     python -m fontTools.subset "字体/思源黑体/SourceHanSansCN-Medium_0.otf" \
       --text="北京传家律师事务所" --flavor=woff2 --no-hinting --desubroutinize \
       --output-file="htmlback/font/fonts/SourceHanSansCN-Medium-hero.woff2"
   family 名带 -Hero 后缀，避免被误当成完整的思源黑体到处引用。 */
@font-face {
  font-family: "SourceHanSansCN-Hero";
  src: url("../font/fonts/SourceHanSansCN-Medium-hero.woff2") format("woff2"),
       url("../font/fonts/SourceHanSansCN-Medium-hero.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink);
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; transition: color .3s ease; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
::selection { background: var(--c-blue); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.arrow { display: inline-block; margin-left: 8px; transition: transform .28s cubic-bezier(.22, .61, .36, 1); }

/* ===== Hero（对角渐变 + 右侧图片轮播） ===== */
.hero { position: relative; isolation: isolate; background: var(--c-blue-dark); }

.hero__media {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 30%;
  z-index: 0;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .9s ease, transform 6s linear;
  will-change: opacity, transform;
}

.hero__slide.is-active { opacity: 1; transform: scale(1); }

.hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg,
    var(--c-blue-deep) 0%,
    var(--c-blue) 35%,
    rgba(18, 36, 87, .55) 70%,
    rgba(18, 36, 87, .15) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ===== 顶部导航 ===== */
.nav {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__logo { display: flex; align-items: center; }
.nav__logo img { display: block; height: 40px; width: auto; }

.nav__links { display: flex; align-items: center; gap: 28px; }

.nav__link {
  position: relative;
  padding-bottom: 4px;
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  transition: color .3s ease, transform .3s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  border-radius: 1px;
  background: var(--c-gold-l);
  transform: translateX(-50%);
  transition: width .32s cubic-bezier(.22, .61, .36, 1);
}

.nav__link:hover { color: #fff; transform: translateY(-1px); }
.nav__link:hover::after { width: 100%; }
.nav__link.is-active { color: #fff; font-weight: 500; }
.nav__link.is-active::after { width: 60%; }

.nav__search { display: inline-flex; align-items: center; }
.nav__search svg { display: block; width: 17px; height: 17px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.btn-ghost:hover {
  background: #fff;
  color: var(--c-blue);
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

.btn-ghost:active { transform: translateY(0); background: rgba(255, 255, 255, .92); }
.btn-ghost:hover .arrow { transform: translateX(4px); }

.btn-ghost--lg { padding: 14px 38px; font-size: 18px; }

/* 汉堡按钮（原型无移动端菜单，此处补齐，样式沿用原型语言） */
.nav__toggle {
  display: none;
  position: relative;
  z-index: 61;
  width: 42px; height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 4px;
}

.nav__toggle span {
  display: block;
  position: relative;
  width: 18px; height: 2px;
  background: #fff;
  transition: background-color .25s ease;
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: #fff;
  transition: transform .28s ease;
}

.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle.is-open span { background: transparent; }
.nav__toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

.nav__backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 55;
  background: rgba(12, 26, 66, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

.nav__backdrop.is-open { opacity: 1; visibility: visible; }

/* ===== Hero 正文 ===== */
.hero__body { flex: 1; display: flex; }

.hero__col {
  width: 60%;
  display: flex;
  flex-direction: column;
  padding: 56px 72px 44px 21%;
}

.hero__center { flex: 1; display: flex; align-items: center; padding-bottom: 60px; }
.hero__stack { width: 100%; display: flex; flex-direction: column; align-items: flex-start; }

.hero__title {
  font-family: var(--f-hero);
  /* 字号按「这一行实际能占多宽」反解，不能用纯 5vw：
     9 个全角字连字距要占 9×字号 + 9×2px = 666px（72px 时），而本档 .hero__col
     的内容宽只有 39vw - 72px —— 1920px 下是 670px 刚好塞下（原型就是照这个尺寸画的），
     1892px 以下就不够了，末字「所」会掉到第二行。
     解 9f + 18 ≤ 39vw - 72 得下面的系数，减去的 11px 是滚动条和舍入的余量；
     1920px 时算出来仍是 72px，原型观感不变。 */
  font-size: clamp(34px, calc(4.33vw - 11px), 72px);
  /* 500 与 @font-face 的 font-weight 对齐：字重对得上，浏览器就不会再合成假粗 */
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 2px;
  color: #fff;
}

.hero__en {
  margin-top: 30px;
  font-size: clamp(14px, 1.5vw, 22px);
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--c-gold-l);
}

.hero__sub {
  /* 下边距归零：原本 52px 是给下方「预约咨询」按钮留的间距，按钮已移除 */
  margin: clamp(40px, 11vh, 150px) 0 0;
  max-width: 40ch;
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(255, 255, 255, .85);
}

.hero__dots { display: flex; align-items: center; gap: 10px; user-select: none; }

.hero-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .5);
  transition: width .32s ease, background-color .32s ease;
}

.hero-dot:hover { background: rgba(255, 255, 255, .8); }
.hero-dot.is-active { width: 26px; background: #fff; }

/* ===== 版块外壳 ===== */
.section { padding: 96px 0; }
.section--cream { background: var(--c-bg); }
.section--white { background: var(--c-card); }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 96px; }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}

.sec-title { font-family: var(--f-serif); font-size: 36px; font-weight: 600; color: var(--c-blue); }
.sec-title--light { color: #fff; }
.sec-en { display: block; margin-top: 14px; font-size: 12px; font-weight: 500; letter-spacing: 3px; color: var(--c-gold-l); }

.sec-more {
  flex: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-blue-light);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--c-blue);
  transition: color .3s ease, border-color .3s ease;
}

.sec-more:hover { color: var(--c-blue-light); border-bottom-color: var(--c-gold); }
.sec-more:hover .arrow { transform: translateX(4px); }

/* 空态 / 加载态 */
.state { padding: 28px 0; color: var(--c-gray); font-size: 14px; }

/* ===== 动态 / 研究 / 期刊：主卡 + 右侧列表 ===== */
.news-grid { display: flex; gap: 48px; align-items: stretch; }

.news-feature {
  flex: 0 0 560px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--c-card);
  box-shadow: 0 6px 20px rgba(23, 46, 117, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}

.section--white .news-feature { background: var(--c-bg); }
.news-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.news-feature__media {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: linear-gradient(135deg, #0C1A42 0%, #172E75 55%, #33489A 100%);
}

/* 主卡图片轮播：交叉淡入（自实现，不引入 Swiper） */
.feature-slide {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity .7s ease;
}

.feature-slide.is-active { opacity: 1; z-index: 2; }
.news-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.news-feature__mdate {
  position: absolute;
  bottom: 22px; left: 26px;
  z-index: 2;
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

.news-feature__caption { display: flex; flex-direction: column; gap: 10px; padding: 22px 26px 26px; }
.news-feature__date { font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--c-gold); }

.news-feature__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-ink);
  transition: color .3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-feature:hover .news-feature__title { color: var(--c-blue); }

.news-feature__desc {
  font-size: 14px;
  line-height: 22px;
  color: var(--c-gray);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-side { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.news-list { display: flex; flex-direction: column; }

.news-row {
  display: flex;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--c-line);
  cursor: pointer;
  transition: padding-left .3s ease, background-color .3s ease;
}

.news-row:last-of-type { border-bottom: 1px solid var(--c-line); }
.news-row:hover { padding-left: 8px; }

/* ===== 日期日历牌 =====
   三行结构：月条（蓝底白字）/ 日号（近黑大字）/ 年份（灰色小字，上方细分割线）。
   变量按本项目色板对应：--brand → --c-blue，--surface → --c-card，
   --border/--divider → --c-line，--text → --c-ink，悬停描边 → --c-blue-light。
   圆角不用全局的 --r(12px)：70px 的小牌子上 12px 会圆得发胖，这里单独给 6px。 */
.date-badge {
  flex-shrink: 0;
  /* .news-row 没写 align-items，默认 stretch 会把牌子拉到整行高（两行标题的行约 106px），
     描边框跟着抽长、年份那行浮在中间。这里改回按内容高，顶部与标题对齐。 */
  align-self: flex-start;
  width: 70px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: var(--c-card);
  overflow: hidden;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.date-month {
  display: block;
  background: var(--c-blue);
  color: #ffffff;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 1px;
  /* 左右 padding 不对称：letter-spacing 会在末字右边多挂 1px，左侧补 4px 才视觉居中 */
  padding: 3px 0 3px 4px;
  font-weight: 500;
}

.date-day {
  display: block;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  padding: 5px 0 3px;
  color: var(--c-ink);
  /* 等宽数字：08 和 30 的字形宽度一致，多行日期左右对齐不跳动 */
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}

.date-year {
  display: block;
  font-size: 10px;
  color: #999;
  padding: 0 6px 6px;
  letter-spacing: .5px;
  border-top: 1px solid var(--c-line);
  /* 分割线左右各缩进 10px，不顶到牌子边框 */
  margin: 0 10px;
}

/* 悬停：整行触发，牌子描边加深 + 浮起阴影，日号变品牌蓝 */
.news-row:hover .date-badge {
  border-color: var(--c-blue-light);
  box-shadow: 0 2px 8px rgba(23, 46, 117, .12);
}

.news-row:hover .date-day { color: var(--c-blue); }
.news-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.news-row__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-ink);
  transition: color .3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-row:hover .news-row__title { color: var(--c-blue); }

.news-row__desc {
  font-size: 14px;
  line-height: 22px;
  color: var(--c-gray);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 原型的列表项无选中底色，仅细分隔线 + 悬停位移 */
.news-more { margin-top: 28px; }

/* ===== 传家期刊 ===== */
.journal-grid { display: flex; gap: 64px; }

.journal-cover {
  position: relative;
  flex: 0 0 420px;
  height: 560px;
  overflow: hidden;
  border-radius: var(--r);
  background: linear-gradient(180deg, #0C1A42 0%, #172E75 60%, #33489A 100%);
  box-shadow: 0 24px 48px rgba(23, 46, 117, .18);
  transition: transform .3s ease, box-shadow .3s ease;
}

.journal-cover:hover { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(23, 46, 117, .24); }

.journal-cover > a { display: block; width: 100%; height: 100%; }

/* 头图整幅显示：不裁切，按封面比例压缩（object-fit: cover 会把横版图裁成局部） */
.journal-cover img { display: block; width: 100%; height: 100%; object-fit: fill; }

.journal-cover__badge {
  position: absolute;
  right: 32px; bottom: 32px;
  z-index: 2;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--c-gold-l);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

/* 期刊列表顶对齐（原型的 justify-center 在自适应高度下不生效，实际靠上） */
.journal-grid .news-side { justify-content: flex-start; }

/* ===== 关于传家 ===== */
.about-grid { display: flex; align-items: center; gap: 80px; }
.about-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.about-copy p { font-size: 15px; line-height: 28px; color: var(--c-gray); }

.about-photo {
  flex: 0 0 560px;
  width: 560px; height: 360px;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(12, 26, 66, .12);
}

/* ===== 业务领域 ===== */
.practice { position: relative; overflow: hidden; background: var(--c-blue-deep); }

.practice__photo {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(50% - 240px);
  overflow: hidden;
}

.practice__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.practice__photo::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to right, rgba(12, 26, 66, .12) 0%, rgba(12, 26, 66, .60) 100%);
}

.practice__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 720px;
  display: flex;
}

.practice__spacer { flex: 0 0 33.33%; }
.practice__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px; padding: 72px 96px 72px 72px; }

.practice-cat { display: flex; flex-direction: column; gap: 14px; }
.practice-cat__head { display: flex; align-items: center; gap: 10px; }
/* 原型的分类短杠用 --color-gold(#B08D57)，不是浅金 */
.practice-cat__bar { flex: none; width: 28px; height: 2px; background: var(--c-gold); }
.practice-cat__name { font-size: 18px; font-weight: 500; color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* 原型的标签为纯文字：无底色、无悬停态（padding 仍保留，用于维持标签间距） */
.chip {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, .75);
}

/* ===== 传家团队 ===== */
.team-viewport { overflow: hidden; }
.team-track { display: flex; transition: transform .5s ease-out; }
.team-page { flex: 0 0 100%; display: flex; gap: 32px; }

.team-card {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--c-bg);
}

.team-card--empty { background: transparent; pointer-events: none; }

.team-card__photo {
  height: 280px;
  overflow: hidden;
  background: linear-gradient(180deg, #F5F3F0 0%, #E8E4DD 100%);
}

.team-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.team-card__info { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.team-card__name { font-size: 16px; font-weight: 500; color: var(--c-ink); }
/* 职务原来占 3em 高（两行）来对齐各卡高度；现在下面多了一行首条资历，
   两者各占一行，合起来仍是 3em，卡片高度不变。 */
.team-card__role { font-size: 14px; line-height: 1.5; min-height: 1.5em; color: var(--c-gray); }

/* 静止态展示第一条资历（完整列表仍在悬浮层里）。用金色和职务区分开。
   单行截断：资历长短不一，不截断会把卡片高度顶乱。空占位也保留高度。 */
.team-card__cred {
  min-height: 1.5em;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-gold);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-card__hover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 26px;
  /* 半透明是有意的：人像要能从蓝底里透出来。
     要消掉的只是卡片底部那层「姓名 / 职务 / 资历」的文字重影 ——
     那个由下面的 .is-open/.hover 时隐藏 .team-card__info 解决，不靠加深底色。 */
  background: rgba(23, 46, 117, .94);
  /* 多推 2px：只写 100% 时，某些缩放比 / DPR 下底边会因为亚像素取整露出 1px 蓝线。 */
  transform: translateY(calc(100% + 2px));
  transition: transform .3s ease;
  overflow-y: auto;
}

/* 悬浮 / 键盘聚焦展开只给有真指针的设备。触屏上点一下，焦点就留在卡片里，
   :focus-within 一直成立，遮罩再也收不回去（手机上就是「点开了下不来」）。
   触屏改由 JS 切 .is-open —— 见 lawfirm-v2.js 的 initTeamTap()。 */
@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-card__hover,
  .team-card:focus-within .team-card__hover { transform: translateY(0); }
}

.team-card.is-open .team-card__hover { transform: translateY(0); }

/* 遮罩是半透明的，卡面这三行文字会透上来跟悬浮层的文字叠在一起。
   展开时把它们淡出 —— 只隐文字，人像在 .team-card__photo 里，照旧透出来。
   时长比遮罩的 .3s 短一点，先让文字消失再让蓝底盖上，中途不会看到重影。 */
.team-card__info { transition: opacity .2s ease; }
.team-card.is-open .team-card__info { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-card__info,
  .team-card:focus-within .team-card__info { opacity: 0; }
}

.team-card__hname { font-family: var(--f-serif); font-size: 18px; font-weight: 600; color: #fff; }
.team-card__hrole { font-size: 13px; letter-spacing: 1px; color: var(--c-gold-l); }
.team-card__hdesc { font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, .85); }

.team-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 44px; }

.team-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: #E4E0D9;
  transition: width .3s ease, background-color .3s ease;
}

.team-dot:hover { background: #CFC9BE; }
.team-dot.is-active { width: 20px; background: var(--c-blue); }

/* ===== 联系我们 ===== */
.contact-grid { display: flex; gap: 48px; }

.contact-map {
  flex: 0 0 560px;
  height: 360px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: #fff;
}

.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.contact-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.contact-item { display: flex; flex-direction: column; gap: 8px; }
.contact-item__label { font-size: 13px; font-weight: 500; letter-spacing: 2px; color: var(--c-gold); }
.contact-item__value { font-size: 16px; line-height: 26px; color: var(--c-ink); }
.contact-item__value a:hover { color: var(--c-blue); }

/* 友情链接：接在联系电话下方，用分割线隔开 */
.contact-item--links { padding-top: 24px; border-top: 1px solid var(--c-line); }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.contact-links a { color: var(--c-blue); }
.contact-links a:hover { color: var(--c-blue-light); }

/* ===== 页脚 ===== */
/* 原型页脚为窄条：无顶部金线，上下内边距 8px */
.foot { position: relative; background: var(--c-blue); color: #fff; }

.foot__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 14px;
}

.foot__links { display: inline-flex; align-items: center; gap: 12px; }
.foot a:hover { color: var(--c-gold-l); }

/* ===== 响应式 ===== */

/* .hero__col 的宽松版式（68% 宽 + 12% 左padding）从 1280px 提到 1891px：
   60%/21% 那套是照 1920px 画的，只在 1892px 以上才排得下 72px 的大标题；
   笔记本常见的 1366/1440/1536/1600/1792 都落在中间这段，沿用窄版式就只能把字号
   压到 50px 上下。提前切到宽版式后，标题到 1258px 左右都还能保持 72px 不换行，
   顺带让标题左边缘和导航（max-width:1440 + 80px padding）对得更齐。
   只挪 .hero__col 一条，其余 1280px 的规则不动。 */
@media (max-width: 1891px) {
  .hero__col { width: 68%; padding: 48px 48px 40px 12%; }
  /* 宽版式下内容宽变成 56.64vw - 96px，比上面那档松得多，字号按新几何重解：
     9f + 18 ≤ 56.64vw - 96 → 系数 6.2vw，留 9px 余量。
     结果是 1258px 以上都吃满 72px（clamp 的上限），再往下才跟着宽度缩。 */
  .hero__title { font-size: clamp(34px, calc(6.2vw - 9px), 72px); }
}

@media (max-width: 1280px) {
  .nav { padding: 20px 40px; }
  .nav__links { gap: 20px; }
  .nav__link { font-size: 14px; }
  .wrap { padding: 0 48px; }
  .news-feature { flex-basis: 460px; max-width: 460px; }
  .news-grid { gap: 36px; }
  .journal-grid { gap: 44px; }
  .journal-cover { flex-basis: 360px; height: 480px; }
  .about-grid { gap: 48px; }
  .about-photo { flex-basis: 460px; width: 460px; height: 320px; }
  .practice__body { padding: 64px 48px 64px 56px; }
  .practice__photo { width: calc(50% - 300px); }
  .contact-map { flex-basis: 460px; }
  .team-page { gap: 24px; }
}

/* 5 人一行在 1200px 以下会窄到放不下姓名/职务，换行成 3 + 2
   （flex-basis 与此处的 gap 配套：3×(33.333%-16px) + 2×24px = 100%） */
@media (max-width: 1200px) {
  .team-page { flex-wrap: wrap; gap: 24px; }
  .team-card { flex: 0 0 calc(33.333% - 16px); }
}

@media (max-width: 991px) {
  .section { padding: 68px 0; }
  .wrap { padding: 0 32px; }
  .sec-title { font-size: 30px; }

  .nav { padding: 18px 32px; }
  .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; }

  .nav__links {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 60;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 92px 26px 40px;
    background: rgba(12, 26, 66, .98);
    transform: translateX(100%);
    transition: transform .35s ease;
    overflow-y: auto;
  }

  .nav__links.is-open { transform: translateX(0); }
  .nav__link { width: 100%; padding: 12px 0; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, .10); }
  .nav__link::after { display: none; }

  .hero__media { left: 0; }
  .hero::before {
    background: linear-gradient(115deg,
      rgba(12, 26, 66, .95) 0%,
      rgba(23, 46, 117, .80) 45%,
      rgba(18, 36, 87, .55) 100%);
  }
  .hero__col { width: 100%; padding: 40px 32px 36px; }
  .hero__center { padding-bottom: 40px; }

  .news-grid { flex-direction: column; gap: 30px; }
  .news-feature { flex-basis: auto; max-width: none; }
  .news-feature__media { height: 260px; }

  .journal-grid { flex-direction: column; gap: 32px; }
  .journal-cover { flex-basis: auto; width: min(340px, 100%); height: auto; aspect-ratio: 3 / 4; }

  .about-grid { flex-direction: column; align-items: stretch; gap: 28px; }
  .about-photo { flex-basis: auto; width: 100%; height: 300px; }

  .practice__photo, .practice__spacer { display: none; }
  .practice__inner { min-height: 0; }
  .practice__body { padding: 68px 32px; gap: 34px; }

  /* 一页仍是 5 人，但换行成 2 + 2 + 1，避免卡片被挤到不可读 */
  .team-page { flex-wrap: wrap; gap: 20px; }
  .team-card { flex: 0 0 calc(50% - 10px); }
  .team-dots { margin-top: 32px; }

  .contact-grid { flex-direction: column; gap: 26px; }
  .contact-map { flex-basis: auto; width: 100%; height: 300px; }

  .foot__inner { padding: 8px 32px; }
}

@media (max-width: 767px) {
  .section { padding: 52px 0; }
  .wrap { padding: 0 20px; }
  .sec-title { font-size: 25px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 30px; }

  /* 团队标题行：移动端不竖排，"查看全部团队" 仍与标题同行、靠右下对齐 */
  #team-page .sec-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }

  #team-page .sec-more { white-space: nowrap; }

  .nav { padding: 14px 20px; }
  .nav__logo img { height: 34px; }

  .hero__col { padding: 32px 20px 30px; }
  .btn-ghost--lg { padding: 12px 28px; font-size: 16px; }

  .news-feature__media { height: 210px; }
  .news-feature__caption { padding: 18px 18px 20px; }
  .news-feature__title { font-size: 18px; }

  .news-row { gap: 14px; padding: 18px 0; }
  /* 日历牌保持 70px 不缩：三行字号是按这个宽度定的，压窄了月条会挤成两行。
     320px 屏减去 20px 边距和 14px 间距后标题还剩 196px，够排。 */
  .news-row__title { font-size: 16px; }
  .news-row__desc { -webkit-line-clamp: 3; }

  .practice__body { padding: 52px 20px; }
  .practice-cat__name { font-size: 16px; }
  .chip { font-size: 13px; }

  /* 移动端：改为原生横向滑动，一屏一张卡（右侧露出下一张的边），
     不再用圆点分页。JS 写在 .team-track 上的 translateX 在此失效。 */
  .team-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* 卡片可滑到贴屏幕边缘，同时首张仍与正文左边距对齐 */
    margin: 0 -20px;
    padding: 0 20px;
    /* 与 padding 对齐，否则吸附时会把左边距吃掉 */
    scroll-padding-left: 20px;
  }

  .team-viewport::-webkit-scrollbar { display: none; }

  /* width: max-content 让轨道按卡片总宽撑开，滑到末尾时右侧内边距不被裁掉 */
  .team-track { transform: none !important; width: max-content; gap: 16px; }
  .team-page { display: contents; }

  .team-card {
    /* 比原来（78vw / 320px / 图 300px）小五分之一 */
    flex: 0 0 62vw;
    max-width: 256px;
    scroll-snap-align: start;
  }

  .team-card--empty { display: none; }
  .team-card__photo { height: 240px; }
  .team-card__role, .team-card__cred { min-height: 0; }
  .team-dots { display: none; }

  .about-photo { height: 220px; }
  .contact-map { height: 260px; }

  .foot__inner { flex-direction: column; padding: 18px 20px; gap: 8px; text-align: center; }
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity .3s ease; transform: none; }
  .hero__slide.is-active { transform: none; }
  .team-track { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   子页面：列表页 / 详情页 / 搜索页 / 表单页
   版式参照集团站子页（实色顶栏 + 横幅 + 米白正文），配色沿用首页的品牌蓝。
   变量、.nav、.btn-ghost、.foot 与首页共用，此处只补子页面特有部件。
   ========================================================================== */

/* 顶栏 + 正文 + 页脚竖排：内容不足一屏时页脚仍贴底 */
body[data-page] { display: flex; flex-direction: column; min-height: 100vh; }
body[data-page] .pmain { flex: 1 0 auto; }

/* 上面 body 的 overflow-x: hidden 会把 body 变成滚动容器，.topbar 的 sticky 就失效了
   （粘在不滚动的 body 上而不是视口）。clip 同样裁掉横向溢出，但不生成滚动容器。
   老浏览器不认 clip → 退回 hidden，只是顶栏不吸顶，版式不受影响。 */
body[data-page] { overflow-x: clip; }

/* ===== 顶栏（首页导航浮在 Hero 上是透明的；子页面无 Hero，改实色蓝底并吸顶） ===== */
/* 不加 box-shadow：顶栏与横幅同色相接，阴影会在交界处压出一道暗带，
   看起来就是「顶栏和横幅颜色不一样」。滚动时蓝底压在米白正文上，本身已经分得开。 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-blue);
}

.topbar .nav { padding: 14px 80px; }

/* ===== 横幅 ===== */
/* 底色必须与 .topbar 完全同色，否则顶栏与横幅交界处会有一道明显色差。
   纵深只做在下半部：提亮的圆心压到元素下方，顶边就仍是纯 --c-blue。 */
.phero { position: relative; overflow: hidden; background: var(--c-blue); }

/* 不放大图：每个子页省下几百 KB，改用渐变 + 一点金色微光 */
.phero::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(120% 95% at 74% 125%, rgba(51, 72, 154, .58) 0%, rgba(51, 72, 154, 0) 60%),
    radial-gradient(55% 65% at 86% 62%, rgba(206, 166, 107, .085) 0%, rgba(206, 166, 107, 0) 62%);
}

/* logo 水印：复用导航那张白 logo，已在缓存里，不额外增加请求。
   尺寸要能整个装进横幅（207×128 的图，340px 宽 ≈ 210px 高），
   否则上下被裁掉会显得过大、糊在整块横幅上。 */
.phero__mark {
  position: absolute;
  right: 48px;
  bottom: 24px;
  z-index: 0;
  width: 340px;
  opacity: .075;
  pointer-events: none;
  user-select: none;
}

.phero__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 62px 96px 58px;
}

.phero__title {
  font-family: var(--f-serif);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #fff;
}

.phero__en { display: block; margin-top: 14px; font-size: 12px; font-weight: 500; letter-spacing: 3px; color: var(--c-gold-l); }

.crumb { display: flex; align-items: center; margin-top: 26px; font-size: 13px; color: rgba(255, 255, 255, .60); }
.crumb a { flex: none; }
.crumb a:hover { color: #fff; }
.crumb__sep { flex: none; margin: 0 9px; opacity: .5; }

/* 详情页最后一节是文章标题，可能很长：截断成一行 */
.crumb__cur { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, .88); }

/* ===== 正文外壳 ===== */
.pmain { padding: 52px 0 84px; background: var(--c-bg); }
.pstate { padding: 26px 0; color: var(--c-gray); font-size: 14px; }

/* ===== 列表页顶部：条数 + 栏目内搜索 ===== */
.plist-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 10px;
  padding-bottom: 18px;
}

.plist-count { font-size: 14px; color: var(--c-gray); }
.plist-count b { font-weight: 600; color: var(--c-blue); }

.filter { display: flex; align-items: center; gap: 10px; }

.filter__input {
  width: 260px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--c-ink);
  transition: border-color .28s ease, box-shadow .28s ease;
}

.filter__input::placeholder { color: #A8A29A; }
.filter__input:focus { outline: 0; border-color: var(--c-blue-light); box-shadow: 0 0 0 3px rgba(23, 46, 117, .08); }

.filter__btn {
  flex: none;
  height: 40px;
  padding: 0 26px;
  border-radius: 4px;
  background: var(--c-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  transition: background-color .28s ease;
}

.filter__btn:hover { background: var(--c-blue-light); }

/* ===== 列表页：缩略图在左，标题 / 摘要 / 日期在右（日期沉到底） ===== */
.plist { display: flex; flex-direction: column; }

.plist-item {
  display: flex;
  gap: 34px;
  padding: 30px 0;
  border-top: 1px solid var(--c-line);
  transition: padding-left .3s ease;
}

.plist-item:last-of-type { border-bottom: 1px solid var(--c-line); }
.plist-item:hover { padding-left: 8px; }

.plist-item__thumb {
  flex: 0 0 280px;
  height: 186px;
  overflow: hidden;
  border-radius: var(--r);
  background: linear-gradient(135deg, #0C1A42 0%, #172E75 55%, #33489A 100%);
}

.plist-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.plist-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.plist-item__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-ink);
  transition: color .3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.plist-item:hover .plist-item__title { color: var(--c-blue); }

.plist-item__desc {
  font-size: 15px;
  line-height: 26px;
  color: var(--c-gray);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* margin-top:auto 把日期压到与缩略图底边同高 */
.plist-item__date { margin-top: auto; font-size: 14px; letter-spacing: 1px; color: #8C867B; }

/* ===== 期刊列表页：封面墙 ===== */
/* 不限宽：桌面端排满一行，窄屏再自然折行 */
.jintro {
  margin-bottom: 40px;
  font-size: 15px;
  line-height: 28px;
  color: var(--c-gray);
}

.jgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.jcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 26px 22px 24px;
  border-radius: var(--r);
  background: var(--c-bg);
  transition: transform .3s ease, box-shadow .3s ease;
}

.jcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* 各期封面比例不完全一致（0.707 与 0.732），用固定高度的框 + contain：
   两种都不拉伸，标题也能横向对齐。
   这里用 height 而不是 aspect-ratio——子图 height:100% 会与 aspect-ratio 形成循环，
   浏览器退回按图片自身比例算高，第 1 期就比其余三期矮 3px，标题跟着错位。 */
.jcard__cover {
  width: 100%;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jcard__cover img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 26px rgba(12, 26, 66, .22);
}

.jcard__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: var(--c-ink);
  transition: color .3s ease;
}

.jcard:hover .jcard__title { color: var(--c-blue); }

/* 期刊页正文下方留白收窄：没有分页条时不需要那么大的底部间距 */
.pmain--tight { padding-bottom: 40px; }
.pmain--tight .pstate:empty,
.pmain--tight .pstate[hidden] { display: none; }

/* ===== 详情页底部「近期期刊」 ===== */
.recent { margin-top: 56px; }

.recent__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.recent__title { font-family: var(--f-serif); font-size: 22px; font-weight: 600; color: var(--c-blue); }

.recent__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

/* ===== 团队列表页 ===== */
/* 卡片完全复用首页的 .team-card（含 hover 展开资历），这里只排版：一行 5 个。
   首页团队区是白底 + 米白卡，所以这一页正文也用白底，卡片才有边界。 */
.pmain--white { background: var(--c-card); }

.team-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
}

/* ===== 分页器 ===== */
/* flex-wrap 是兜底：JS 已按屏宽把数字槽位降到 5，但 320px 这类窄机型加上七八个槽位
   仍可能超出一行。默认的 nowrap + justify-content:center 会让溢出往两侧平摊、
   首尾按钮各被切掉一半，宁可折行也不能溢出。 */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 48px;
}

/* 类选择器的 display:flex 会盖掉浏览器对 [hidden] 的默认 display:none，
   分页条藏起来后 margin-top 仍占位、底部凭空多出 48px 空白，必须显式补这一条。 */
.pager[hidden] { display: none; }

/* 三类子项都不参与收缩：flex 默认允许压到内容宽度以下，
   一压「上一页」就在「上」「一页」之间折成两行、按钮高度也跟着涨。 */
.pager > * { flex: 0 0 auto; white-space: nowrap; }

.pager__num {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-card);
  font-size: 15px;
  color: var(--c-gray);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.pager__num:hover { border-color: var(--c-blue-light); color: var(--c-blue); }

.pager__num.is-active {
  border-color: var(--c-blue);
  background: var(--c-blue);
  color: #fff;
  font-weight: 500;
  cursor: default;
}

.pager__gap { min-width: 22px; text-align: center; color: #A8A29A; user-select: none; }

.pager__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--c-blue);
  border-radius: 4px;
  font-size: 15px;
  color: var(--c-blue);
  transition: background-color .25s ease, color .25s ease;
}

.pager__next:hover { background: var(--c-blue); color: #fff; }

/* 宽屏用文字，箭头收起；≤767px 反过来（见下方媒体查询） */
.pager__next-i { display: none; }

/* ===== 详情页 ===== */
.article {
  max-width: 900px;
  margin: 0 auto;
  padding: 52px 60px 60px;
  border-radius: var(--r);
  background: var(--c-card);
  box-shadow: 0 6px 24px rgba(23, 46, 117, .06);
}

/* 期刊详情是外链阅读器，narrow 版心会把书页压得太小 */
.article--wide { max-width: none; }

.article__title {
  font-family: var(--f-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink);
}

.article__rule { display: block; width: 56px; height: 2px; margin: 22px 0 30px; background: var(--c-gold); }

/* 正文来自 CMS（UEditor），元素上带大量行内 font-size / line-height / font-family：
   只设不会被行内样式顶掉的基线（max-width 压得住行内 width），不用 !important 硬盖。 */
.article__body { font-size: 16px; line-height: 1.95; color: #2A2620; overflow-wrap: break-word; }
.article__body p { margin: 0 0 1.1em; }
.article__body img { max-width: 100%; height: auto; border-radius: 6px; }
.article__body a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
.article__body a:hover { color: var(--c-blue-light); }

.article__body h1, .article__body h2, .article__body h3, .article__body h4 {
  margin: 1.5em 0 .6em;
  font-family: var(--f-serif);
  font-weight: 600;
  color: var(--c-ink);
}

.article__body h1 { font-size: 26px; }
.article__body h2 { font-size: 22px; }
.article__body h3 { font-size: 19px; }
.article__body h4 { font-size: 17px; }

/* 全局 reset 去掉了 ul 的项目符号，正文里要还回来 */
.article__body ul, .article__body ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li { margin-bottom: .3em; }

.article__body blockquote {
  margin: 0 0 1.1em;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--c-gold);
  color: var(--c-gray);
}

.article__body table { max-width: 100%; border-collapse: collapse; }
.article__body th, .article__body td { padding: 8px 12px; border: 1px solid var(--c-line); }
.article__body iframe, .article__body video { max-width: 100%; }
.article__body hr { height: 1px; margin: 2em 0; border: 0; background: var(--c-line); }

/* ===== 期刊阅读器 / 外部表单：内嵌框 ===== */
.jbook, .embed { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r); background: #fff; }
.jbook { height: 800px; }
.embed { height: 1800px; }
.jbook iframe, .embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ===== 全站搜索页 ===== */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 620px;
  margin-top: 28px;
  padding: 6px 6px 6px 22px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(12, 26, 66, .22);
}

.searchbar__input {
  flex: 1;
  min-width: 0;
  height: 42px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--c-ink);
}

.searchbar__input:focus { outline: 0; }
.searchbar__input::placeholder { color: #A8A29A; }

.searchbar__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 28px;
  border-radius: 9999px;
  background: var(--c-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 3px;
  transition: background-color .28s ease;
}

.searchbar__btn:hover { background: var(--c-blue-light); }
.searchbar__btn svg { display: block; width: 16px; height: 16px; }

.search-tip { margin-bottom: 4px; font-size: 14px; color: var(--c-gray); }
.search-tip b { font-weight: 600; color: var(--c-blue); }

.result-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0;
  border-top: 1px solid var(--c-line);
  transition: padding-left .3s ease;
}

.result-item:last-of-type { border-bottom: 1px solid var(--c-line); }
.result-item:hover { padding-left: 8px; }

.result-item__title { font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--c-ink); transition: color .3s ease; }
.result-item:hover .result-item__title { color: var(--c-blue); }

/* 接口把命中词包在 <em> 里 */
.result-item__title em, .search-keyword { font-style: normal; color: var(--c-gold); }

.result-item__meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #8C867B; }
.result-item__type { padding: 1px 9px; border: 1px solid var(--c-line); border-radius: 3px; font-size: 12px; letter-spacing: 1px; color: var(--c-gold); }

/* ===== 子页面响应式 ===== */
@media (max-width: 1280px) {
  .topbar .nav { padding: 14px 40px; }
  .phero__inner { padding: 54px 48px 50px; }
  .phero__mark { width: 300px; right: 28px; bottom: 22px; }
  .plist-item { gap: 26px; }
  .plist-item__thumb { flex-basis: 240px; height: 160px; }
  .team-list { gap: 24px; }
  .jgrid { gap: 24px; }
  .jcard { padding: 22px 18px 20px; }
}

/* 与首页同一个断点：5 列在 1200px 以下每张放不下姓名/职务，换成 3 列 */
@media (max-width: 1200px) {
  .team-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 991px) {
  .topbar .nav { padding: 12px 32px; }
  .phero__inner { padding: 44px 32px 40px; }
  .phero__title { font-size: 32px; }
  .phero__mark { width: 230px; right: 16px; bottom: 18px; }
  .crumb { margin-top: 20px; }

  .pmain { padding: 40px 0 64px; }
  .plist-item { gap: 20px; padding: 24px 0; }
  .plist-item__thumb { flex-basis: 200px; height: 134px; }
  .plist-item__title { font-size: 18px; }
  .plist-item__desc { font-size: 14px; line-height: 23px; }

  .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .jgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .jintro { margin-bottom: 30px; font-size: 14px; line-height: 26px; }
  .recent { margin-top: 40px; }
  .recent__title { font-size: 20px; }
  .recent__grid { gap: 18px; }

  .article { padding: 40px 36px 46px; }
  .article__title { font-size: 26px; }
  .jbook { height: 640px; }
  .embed { height: 1650px; }
}

@media (max-width: 767px) {
  .topbar .nav { padding: 10px 20px; }
  .phero__inner { padding: 32px 20px 30px; }
  .phero__title { font-size: 25px; }
  .phero__en { margin-top: 10px; }
  .phero__mark { width: 150px; right: 12px; bottom: 14px; opacity: .07; }
  .crumb { margin-top: 16px; font-size: 12px; }

  .pmain { padding: 28px 0 52px; }

  /* 条数与搜索框竖排，搜索框占满一行 */
  .plist-bar { flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 14px; }
  .filter__input { width: auto; flex: 1; }

  /* 缩略图改顶部通栏，否则标题被挤成一列窄字 */
  .plist-item { flex-direction: column; gap: 14px; padding: 22px 0; }
  .plist-item:hover { padding-left: 0; }
  .plist-item__thumb { flex-basis: auto; width: 100%; height: 190px; }
  .plist-item__body { gap: 10px; }
  .plist-item__title { font-size: 17px; }
  .plist-item__date { margin-top: 2px; font-size: 13px; }

  .article { padding: 26px 18px 32px; border-radius: 8px; }
  .article__title { font-size: 21px; }
  .article__rule { margin: 16px 0 22px; }
  .article__body { font-size: 15px; line-height: 1.85; }

  .searchbar { margin-top: 22px; padding: 5px 5px 5px 16px; }
  .searchbar__input { height: 36px; font-size: 14px; }
  .searchbar__btn { height: 36px; padding: 0 18px; font-size: 14px; letter-spacing: 1px; }
  .searchbar__btn span { display: none; }
  .result-item:hover { padding-left: 0; }

  .jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .jcard { gap: 14px; padding: 14px 12px 16px; }
  .jcard__cover { height: 210px; }
  .jcard__title { font-size: 13px; line-height: 21px; }
  .jintro { margin-bottom: 24px; }
  .recent { margin-top: 32px; }
  .recent__head { margin-bottom: 18px; }
  .recent__title { font-size: 18px; }
  .recent__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* 手机上 2 列。首页 ≤767px 把团队卡改成横向滑动（.team-page{display:contents} 等），
     那套只作用于 .team-track/.team-page，这一页是 .team-list 网格，不受影响。 */
  .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .team-list .team-card__photo { height: 220px; }
  .team-list .team-card__hover { padding: 22px 16px; gap: 8px; }

  /* 上下页换成箭头，省下约 76px：整条从 434px 降到 335px 的可用宽度内。
     文字仍在 DOM 里（.pager__next-t 只是不显示），按钮另有 aria-label，读屏照旧念「上一页」。
     34px 见方保持不变，是 WCAG 2.5.8 最小目标尺寸(24px)之上的可点范围，不再往下压。 */
  .pager { gap: 6px; margin-top: 34px; }
  .pager__num { min-width: 34px; height: 34px; padding: 0 7px; font-size: 14px; }
  .pager__gap { min-width: 16px; }
  .pager__next { width: 34px; height: 34px; padding: 0; font-size: 14px; }
  .pager__next-t { display: none; }
  .pager__next-i { display: block; font-size: 19px; line-height: 1; }

  .jbook { height: 420px; }
  .embed { height: 1500px; }
}

/* ==========================================================================
   预约咨询（form.html）：左表单 + 右电话地址
   原先这页嵌的是第三方托管表单（基木鱼 iframe）：样式不受控、高度只能写死一个
   1800px 的估值，还要多吊一次外站请求。改为站内手写表单，配色沿用全站蓝金变量。
   ========================================================================== */

.cform-grid { display: flex; align-items: flex-start; gap: 40px; }

/* ===== 左：表单卡 ===== */
.cform-card {
  flex: 1;
  min-width: 0;
  padding: 44px 48px 48px;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-card);
  box-shadow: 0 10px 24px rgba(23, 46, 117, .05);
}

.cform-card__title { font-family: var(--f-serif); font-size: 26px; font-weight: 600; color: var(--c-blue); }
.cform-card__note { margin-top: 12px; font-size: 14px; color: var(--c-gray); }
.cform-card__note b { font-weight: 600; color: var(--c-gold); }

/* position:relative 是给蜜罐的绝对定位当参照系用的，别去掉 */
.cform { position: relative; display: flex; flex-direction: column; gap: 22px; margin-top: 32px; }
.cform__row { display: flex; gap: 24px; }
.cform__row > .field { flex: 1; min-width: 0; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 14px; font-weight: 500; color: var(--c-ink); }
/* 必填星号用金色，不另引一支红：全站只有蓝金两色 */
.field__label b { font-weight: 600; color: var(--c-gold); }

.field__input, .field__area {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink);
  transition: border-color .28s ease, box-shadow .28s ease;
}

.field__input { height: 46px; padding: 0 14px; }
.field__area { min-height: 150px; padding: 12px 14px; resize: vertical; }

.field__input::placeholder, .field__area::placeholder { color: #A8A29A; }

.field__input:focus, .field__area:focus {
  outline: 0;
  border-color: var(--c-blue-light);
  box-shadow: 0 0 0 3px rgba(23, 46, 117, .08);
}

/* 校验没过：红框 + 字段下一行提示 */
.field.is-bad .field__input,
.field.is-bad .field__area { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, .07); }

.field__err { font-size: 13px; color: #C0392B; }
.field__err[hidden] { display: none; }

/* 蜜罐字段：移出视口，而不是 display:none —— 后者会被稍聪明的机器人识别并跳过。
   对屏读器的隐藏靠标记里的 aria-hidden，所以这里不用 .sr-only（那个是「只给屏读器」，正好相反）。 */
.cform__honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 4px; }

.cform__submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 40px;
  border-radius: 4px;
  background: var(--c-blue);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  transition: background-color .28s ease, transform .28s ease;
}

.cform__submit:hover { background: var(--c-blue-light); transform: translateY(-1px); }
.cform__submit:hover .arrow { transform: translateX(4px); }
.cform__submit:disabled { background: #8A93B4; cursor: default; transform: none; }
.cform__submit:disabled .arrow { transform: none; }

.cform__state { font-size: 14px; line-height: 22px; color: var(--c-gray); }
.cform__state[hidden] { display: none; }
.cform__state.is-ok { color: var(--c-blue); }
.cform__state.is-bad { color: #C0392B; }

/* ===== 右：电话与地址 ===== */
.cside { flex: 0 0 340px; display: flex; flex-direction: column; gap: 20px; }

.cside__card {
  padding: 28px 30px 30px;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-card);
}

.cside__title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--c-ink); }
/* 金色短横：和「业务领域」小节标题同一个语汇 */
.cside__title::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--c-gold); }

.cside__tel {
  display: block;
  margin-top: 16px;
  font-family: var(--f-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--c-blue);
}

.cside__tel:hover { color: var(--c-blue-light); }
.cside__addr { margin-top: 14px; font-size: 15px; line-height: 27px; color: var(--c-ink); }
.cside__text { margin-top: 12px; font-size: 14px; line-height: 24px; color: var(--c-gray); }

/* ===== 表单页响应式 ===== */
@media (max-width: 1280px) {
  .cform-grid { gap: 32px; }
  .cform-card { padding: 38px 36px 42px; }
  .cside { flex-basis: 300px; }
  .cside__card { padding: 24px 24px 26px; }
  .cside__tel { font-size: 29px; }
}

@media (max-width: 991px) {
  /* 侧栏落到表单下面，两张卡并排，别把页面拖太长 */
  .cform-grid { flex-direction: column; gap: 26px; }
  .cside { flex-basis: auto; flex-direction: row; width: 100%; }
  .cside__card { flex: 1; min-width: 0; }
}

@media (max-width: 767px) {
  .cform-card { padding: 26px 20px 30px; border-radius: 8px; }
  .cform-card__title { font-size: 21px; }
  .cform { gap: 18px; margin-top: 24px; }
  .cform__row { flex-direction: column; gap: 18px; }
  .field__input { height: 44px; }
  .field__area { min-height: 128px; }
  .cform__submit { width: 100%; justify-content: center; padding: 0 24px; }
  .cform__state { width: 100%; }

  .cside { flex-direction: column; }
  .cside__card { padding: 22px 18px 24px; border-radius: 8px; }
  .cside__tel { font-size: 27px; }
}