/* ============================================
   我们的服务 手风琴 services.css（仅首页）
   功能：6 大栏目横向手风琴（书法/广告/雕刻/热转印/装裱/打印）
   交互：大栏目用 radio + :has() 点击切换（纯 CSS）；
        子栏目默认第一项展开，JS 悬停切换 is-active 类，
        移开后保持不回弹（老站 SuperSlide 行为）
   布局：以老站 1380×230 为基准的纯 cqw 等比缩放体系 ——
        所有尺寸 = 老站像素 ÷ 1380 × 100（单位 cqw，随舞台宽度
        线性缩放），最外层宽高比与所有内部结构位置全程不变
   零空隙：收起态大栏目标题 width:100% 填满整栏、收起态子栏目
        竖条 flex:1 填满整栏，任何宽度下栏目间均无缝隙
   显隐：<1200px 整段隐藏（含"我们的服务"标题），≥1200px 显示
   缩放：无任何断点/硬锁，只有一条统一规则 ——
        所有尺寸 = min(cqw, 1400px 时的尺寸 ÷ 16 的 rem 值)：
        · 手风琴自宽 <1400px：纯 cqw 等比，整块等比缩小
        · 自宽 ≥1400px：全部尺寸按"1400px 宽时"的值锁定比例，
          封顶单位已由 px 改为 rem（÷16），于是：
          - 正常屏（根字号恒为 16px）：数值与 1400px 时完全相同，
            外观与改动前一致，只有正文每行更长
          - 巨幕变焦段（≥2560px，根字号 16→30px，见 base.css）：
            整块（字号 / 偏移 / 插画 / 图标 / 高度）随根字号
            等比放大，内部比例与 1400px 时完全一致 ——
            不会出现"图片放大而文字不动"的重叠，也不留断裂的空隙
        页面全局容器在大屏会阶梯收窄（≥1400px → 70% 视口宽），
        手风琴宽度随容器收敛，故大屏不会被无限拉宽
        唯一例外：锁定档里子层小标题与其下方"内容介绍"的纵向间距
        另切一套值，见文件末尾第 9 节
        （纯 min()/max() 无法表达"某点之后换值"，只能用容器查询）
   高度：宽高比 6.5:1（老站原 6:1 / 1380×230，按要求压低约 8%），
        并加 max-height: 13.4615rem（=215.3846px ÷ 16）封顶 ——
        自宽超 1400px 后高度不再随 cqw 增长（避免大屏被纵向拉高），
        但变焦段仍随根字号等比放大，与内部文字/图片同步
   为什么尺寸与字号必须同单位：插画/图标是等比图，由
        background-size: var(--illus-w) auto / contain 驱动，
        若尺寸用 px、字号用 rem，变焦段就会"图不放大、字放大（或反之）"，
        出现重叠或空档 —— 所以这一次全部统一成 rem
   字号：min(…cqw, 老站rem) 封顶 —— 老站（固定 1380px 布局）字号：
        竖标 20、竖条名 16、面板标题 16、正文/小标题 14、菱形框 24px
   行距/截断：正文行距 1.5、标题行高 1.2，正文 -webkit-line-clamp: 5
   省略号：加在 dd 上（不是 dl），只在正文确实超出可用行数时
        才在末行出现，未超出时完整显示
   最后更新：2026-10-20（16 处 min(cqw,px) 封顶与 6 处独立尺寸全部换成 rem，支持巨幕变焦）
   ============================================ */


/* ============================================
   0. 模块整体显隐：手机/平板不显示（屏幕太小排不下）
   ============================================ */
.services-section {
  display: none;                           /* <1200px：标题+手风琴一起隐藏 */
}

@media (min-width: 1200px) {
  .services-section { display: block; }    /* ≥1200px：整段显示 */
}


/* ============================================
   1. 舞台容器（自身不能用 cqw——容器不能查询自己；
      宽高比用 aspect-ratio 锁定，间距交给子级 cqw 外边距）
   ============================================ */
.services-stage {
  container-type: inline-size;             /* 声明为宽度容器，供后代使用 cqw 单位 */
  container-name: svc;
  display: flex;
  width: 100%;                             /* 宽度始终跟随父容器：不显式声明时，
                                              aspect-ratio + max-height 约束会按 6.5:1
                                              把宽度反推缩小，导致大屏不再变宽 */
  aspect-ratio: 6.5 / 1;                   /* 宽高比：老站原为 6:1（1380×230），按用户要求压低到 6.5:1，
                                              整体高度减少约 8%；内部结构位置全部由 cqw 定位、不受影响，
                                              只有底部留白同步收窄 */
  max-height: 13.4615rem;                  /* 高度封顶 = 1400px ÷ 6.5：手风琴自宽超 1400px 后
                                              高度不再增长（宽度仍随容器变宽），
                                              <1400px 时实际高度未到上限、aspect-ratio 正常生效 */
  margin: 10px 0;
}


/* ============================================
   2. 左侧"服务项目"菱形纹竖块
      对应老站 .box-title-02（190×230 蓝底、字号 24px、行高 30px、
      文字上下各留 85px 垂直居中），尺寸 190÷1380×100=13.7681cqw
      随舞台等比缩放；菱形底图 190×210 用 contain 等比完整显示，
      居中放置、任何宽度都不裁切（老站原为左上角对齐）
   ============================================ */
.services-side {
  flex: 0 0 auto;
  width: min(13.7681cqw, 11.875rem);       /* 老站 190px ÷ 16 = 11.875rem；px→rem 后变焦段随根字号同步放大 */
  display: flex;
  align-items: center;                     /* 文字垂直居中（老站上下 padding 85px 的效果） */
  justify-content: center;
  font-size: min(1.7391cqw, 1.5rem);       /* 老站 24px ÷ 16 = 1.5rem；px→rem 后变焦段跟随同步 */
  line-height: 1.25;                       /* 老站 30px 行高 */
  color: #d8e8fb;                          /* 老站浅蓝字 */
  text-align: center;
  background-color: #3b8bed;               /* 老站蓝底 */
  background-image: url(../images/services/rhomboid.png?v=20261019-6);
                                           /* 图片本身已换（画布裁成 190×190），URL 带版本号
                                              避免浏览器继续缓存旧的 190×210 图 */
  background-repeat: no-repeat;
  background-position: center center;      /* 菱形水平+垂直居中于外块（老站为左上角对齐） */
  background-size: contain;                /* 图片已裁到菱形本体（见下），contain+居中即"菱形本体居中"：
                                              原 rhomboid.png 为 190×210，顶部 20px 全透明、底部 0px，
                                              菱形本体只占 (0,20)-(189,209) 的 190×190 方形区域 ——
                                              直接 contain 居中只会把"画布"居中，菱形视觉上偏下
                                              （顶端留 21px、底端仅 2px）；老站左上角对齐时
                                              恰好凑成上下各 20px，所以这个缺陷一直没暴露。
                                              已把画布裁成 190×190（原图备份于 backup-20261019\），
                                              此后菱形宽=外块宽、上下留白严格相等
                                              （外块高 212px 时各 11px），小屏等比缩小同样居中、
                                              不裁切、190:190 比例不变 */
}


/* ============================================
   3. 可调参数总表（挂在 .group-box 上，后代继承使用）
      统一规则（除"--"标注的外，全部 min(cqw, 1400px 时的尺寸÷16 的 rem 值)）：
      手风琴自宽 <1400px 时纯 cqw 等比缩放（整体等比缩小）；
      ≥1400px 后按"1400px 宽时"的值锁定比例：正常屏（根字号 16px）
      与改动前完全一致；≥2560px 巨幕变焦段随根字号整体等比放大。
      为什么全部统一成 rem：插画/图标是等比图（宽高同增），
      纵向偏移与字号必须与图形同单位同步，否则变焦段会出现
      "图片放大、文字不动"的重叠，或反过来留出空档；
      实测竖条图标 40×90 恒为 2.25 倍高宽比，宽度一放高度必上窜
      纵向偏移同理受舞台高度（max-height: 13.4615rem）约束，
      两者同单位才能保证变焦段不被推出舞台
   ============================================ */
.group-box {
  display: flex;
  flex: 1;
  min-width: 0;                              /* 允许在 flex 中收缩 */
  margin-left: min(1.0870cqw, 0.9511rem);     /* 竖块与栏目区间距（老站 15px） */

  /* —— 配色（与老站 group-box-s0~s5 完全一致） —— */
  --svc-red: #f24854;                        /* 激活栏目红 */
  --svc-blue1: #3b8bed;                      /* 栏目蓝 1 */
  --svc-blue2: #3399ff;                      /* 栏目蓝 2（老站简写 #39F） */
  --svc-blue3: #499df5;                      /* 栏目蓝 3 */

  /* —— 横向尺寸参数（括号内为老站 1380px 下的原始像素） —— */
  --col-w: min(5.0725cqw, 4.4384rem);         /* 大栏目收起宽度=竖标宽度（70px） */
  --tab-w: min(3.6232cqw, 3.1703rem);         /* 子栏目竖条宽度（50px，打印组另覆盖） */
  --ico-w: min(2.8986cqw, 2.5363rem);          /* 竖条小图标宽度（40px；原图 40×90，宽一放大高度就上窜压字） */
  --illus-w: min(13.4058cqw, 11.7301rem);     /* 面板插画宽度（约185px；方图放大后会超出面板高度被裁） */
  --text-x: min(15.4348cqw, 13.5054rem);      /* 面板文字左偏移（213px；须与插画同步锁死才不留空档/不重叠） */

  /* —— 字号（min 封顶老站 px，大屏不再放大） —— */
  --label-fs: min(1.4493cqw, 1.25rem);          /* 竖标字号（老站 .group-txt span 20px） */
  --name-fs: min(1.1594cqw, 1rem);           /* 竖条项目名字号（老站 .role-name 16px） */
  --group-fs: min(1.1594cqw, 1rem);          /* 面板标题字号（老站 .role-group 16px） */
  --desc-fs: min(1.0145cqw, 0.875rem);           /* 面板正文字号（老站 .role-item dt/dd 14px） */

  /* —— 纵向偏移（同样是 min 封顶 1400px 时的 px 值） —— */
  --label-top: min(6.5217cqw, 5.7065rem);     /* 竖标文字顶部偏移（老站 90px；1400px 时 91.3px 封顶） */
  --name-top: min(1.4493cqw, 1.2681rem);       /* 竖条名字顶部偏移（老站 20px；1400px 时 20.3px 封顶） */
  --ico-bottom: min(1.5942cqw, 1.3949rem);    /* 竖条图标底部偏移（老站 22px；1400px 时 22.3px 封顶） */
  --title-top: min(2.2cqw, 1.925rem);          /* 面板标题顶部偏移（老站 45px 基准收窄；1400px 时 30.8px 封顶） */
  --desc-top: min(4.2cqw, 3.675rem);           /* 面板正文顶部偏移（老站 90px 基准收窄；1400px 时 58.8px 封顶） */
}


/* ============================================
   4. 六大栏目骨架（flex 手风琴：收起 1 份，展开 11.7857 份）
      比例来源：老站 825px ÷ 70px = 11.7857
      零空隙：栏目区间距为 0，收起态竖标 width:100% 填满整栏
      尺寸封顶：收起态加 max-width = 竖标宽（--col-w 已带 1400px
      比例封顶，单位 rem）—— 自宽超 1400px 后收起栏不再随 cqw 变宽，
      多余的宽度落到展开栏里由其面板吸收；变焦段则整套随根字号
      等比放大。<1400px 时收起栏自然宽度恰好等于 --col-w，
      max-width 不生效、不改变等比缩放
   ============================================ */
.group-bd {
  flex: 1 1 0%;                              /* 收起态：6 栏等分 */
  min-width: var(--col-w);                   /* 收起宽度下限=竖标宽 */
  max-width: var(--col-w);                   /* 收起宽度上限=竖标宽（≥1400px 时锁宽，见上） */
  position: relative;
  overflow: hidden;                          /* 收起时裁掉右侧面板 */
  transition: flex-grow 0.3s ease, max-width 0.3s ease;
                                             /* 与老站相同的 0.3s 展开动画；max-width 一并参与过渡
                                                （收起/展开时从 71px 与 100% 之间平滑插值），
                                                否则锁宽瞬间生效、大屏切换栏目会"啪"地跳一下 */
}

/* 当前选中的大栏目：占据剩余全部空间（宽度上限改为 100%，
   即容器宽——永远大于实际宽度、不生效，于是能平滑过渡） */
.group-bd:has(> .svc-check:checked) {
  flex-grow: 11.7857;
  max-width: 100%;
}

/* 单选框本体视觉隐藏（可聚焦、可用方向键切换，纯 CSS 驱动） */
/* .visually-hidden 样式见 base.css */


/* ============================================
   5. 大栏目竖标题（label 点击切换 radio）
      收起态 width:100% 填满整栏（零空隙）；
      展开态还原为竖标宽度，面板紧贴其右（老站 left:70px 效果）
   ============================================ */
.group-txt {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;                               /* 收起态：填满整栏，栏间零空隙 */
  display: block;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.3s ease;
                                             /* 配色与宽度随展开动画同步过渡 */
}

/* 展开态：竖标恢复固定比例宽，右侧面板紧贴（与老站一致） */
.group-bd:has(> .svc-check:checked) .group-txt {
  width: var(--col-w);
}

/* 竖排文字：现代 writing-mode 替代老站"定宽+letter-spacing" trick */
.group-txt span {
  position: absolute;
  top: var(--label-top);
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;                 /* 竖排（老站 tb-rl 的现代标准写法） */
  letter-spacing: 1em;                       /* 字距=1 字宽（老站 20px/20px 等比还原） */
  white-space: nowrap;
  font-size: var(--label-fs);
  line-height: 1;
  color: #fff;
}

/* 3 字竖标（热转印）：比 2 字竖标多一个字，文字块长一个字距周期
   （字宽 1em + 字距 1em = 2em），top 相同就会低半个周期（1em）。
   上移 1em 后与其余 5 个竖标的视觉中心对齐。
   选择器用 .group-txt.group-txt-04 提高特异性，确保压过上面的
   .group-txt span 基础规则；em 随 --label-fs 等比缩放，无断点 */
.group-txt.group-txt-04 span {
  top: calc(var(--label-top) - 1em);
}

/* 激活栏目标题右侧的红色小三角（老站 i-triangle） */
.group-txt::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1rem;
  margin-top: -0.5rem;
  border: 8px solid transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.group-bd:has(> .svc-check:checked) .group-txt::after {
  opacity: 1;
  border-left-color: var(--svc-red);
}


/* ============================================
   6. 六态配色矩阵（与老站 group-box-s0~s5 逐条一致：
      每个激活状态下 6 根竖标的颜色分配完全相同）
   ============================================ */
/* 状态 s0：书法激活 */
.services-stage:has(#svc1:checked) .group-txt-01 { background-color: var(--svc-red); }
.services-stage:has(#svc1:checked) .group-txt-02 { background-color: var(--svc-blue1); }
.services-stage:has(#svc1:checked) .group-txt-03 { background-color: var(--svc-blue2); }
.services-stage:has(#svc1:checked) .group-txt-04 { background-color: var(--svc-blue3); }
.services-stage:has(#svc1:checked) .group-txt-05 { background-color: var(--svc-blue1); }
.services-stage:has(#svc1:checked) .group-txt-06 { background-color: var(--svc-blue2); }
/* 状态 s1：广告激活 */
.services-stage:has(#svc2:checked) .group-txt-01 { background-color: var(--svc-blue1); }
.services-stage:has(#svc2:checked) .group-txt-02 { background-color: var(--svc-red); }
.services-stage:has(#svc2:checked) .group-txt-03 { background-color: var(--svc-blue2); }
.services-stage:has(#svc2:checked) .group-txt-04 { background-color: var(--svc-blue3); }
.services-stage:has(#svc2:checked) .group-txt-05 { background-color: var(--svc-blue1); }
.services-stage:has(#svc2:checked) .group-txt-06 { background-color: var(--svc-blue2); }
/* 状态 s2：雕刻激活 */
.services-stage:has(#svc3:checked) .group-txt-01 { background-color: var(--svc-blue1); }
.services-stage:has(#svc3:checked) .group-txt-02 { background-color: var(--svc-blue2); }
.services-stage:has(#svc3:checked) .group-txt-03 { background-color: var(--svc-red); }
.services-stage:has(#svc3:checked) .group-txt-04 { background-color: var(--svc-blue3); }
.services-stage:has(#svc3:checked) .group-txt-05 { background-color: var(--svc-blue1); }
.services-stage:has(#svc3:checked) .group-txt-06 { background-color: var(--svc-blue2); }
/* 状态 s3：热转印激活 */
.services-stage:has(#svc4:checked) .group-txt-01 { background-color: var(--svc-blue1); }
.services-stage:has(#svc4:checked) .group-txt-02 { background-color: var(--svc-blue3); }
.services-stage:has(#svc4:checked) .group-txt-03 { background-color: var(--svc-blue2); }
.services-stage:has(#svc4:checked) .group-txt-04 { background-color: var(--svc-red); }
.services-stage:has(#svc4:checked) .group-txt-05 { background-color: var(--svc-blue1); }
.services-stage:has(#svc4:checked) .group-txt-06 { background-color: var(--svc-blue2); }
/* 状态 s4：装裱激活 */
.services-stage:has(#svc5:checked) .group-txt-01 { background-color: var(--svc-blue1); }
.services-stage:has(#svc5:checked) .group-txt-02 { background-color: var(--svc-blue3); }
.services-stage:has(#svc5:checked) .group-txt-03 { background-color: var(--svc-blue2); }
.services-stage:has(#svc5:checked) .group-txt-04 { background-color: var(--svc-blue1); }
.services-stage:has(#svc5:checked) .group-txt-05 { background-color: var(--svc-red); }
.services-stage:has(#svc5:checked) .group-txt-06 { background-color: var(--svc-blue2); }
/* 状态 s5：打印激活 */
.services-stage:has(#svc6:checked) .group-txt-01 { background-color: var(--svc-blue1); }
.services-stage:has(#svc6:checked) .group-txt-02 { background-color: var(--svc-blue3); }
.services-stage:has(#svc6:checked) .group-txt-03 { background-color: var(--svc-blue2); }
.services-stage:has(#svc6:checked) .group-txt-04 { background-color: var(--svc-blue1); }
.services-stage:has(#svc6:checked) .group-txt-05 { background-color: var(--svc-blue2); }
.services-stage:has(#svc6:checked) .group-txt-06 { background-color: var(--svc-red); }


/* ============================================
   7. 展开面板 + 子栏目（二级手风琴，悬停展开）
   ============================================ */
.group-item {
  margin-left: var(--col-w);                 /* 给左侧竖标留位 */
  height: 100%;
  overflow: hidden;
}

.svc-sub {
  display: flex;
  height: 100%;
}

/* 每个子栏目：默认收起为一条竖条，竖条 flex:1 填满整栏（零空隙）
   max-width = 竖条宽：手风琴自宽超 1400px 后收起条不再变宽
   （否则条变宽而内部 40×90 的图标不变，比例失衡），
   多余宽度由展开项的图文面板吸收 */
.svc-sub li {
  flex: 1 1 0%;
  min-width: var(--tab-w);
  max-width: var(--tab-w);
  position: relative;
  display: flex;
  transition: flex-grow 0.3s ease, max-width 0.3s ease;   /* max-width 同步过渡，避免锁宽瞬间生效的跳变 */
}

/* 各组子栏目数量不同，展开比例按老站实际宽度换算：
   4 项组 605/50、5 项组 555/50、6 项组 475/56、7 项组 455/50
   （打印组老站竖条 56px 宽，需同步覆盖 --tab-w） */
.svc-sub-4 { --open: 12.1; }
.svc-sub-5 { --open: 11.1; }
.svc-sub-6 { --open: 8.4821; --tab-w: min(4.0580cqw, 3.5508rem); }  /* 475/56，竖条 56px÷1380 */
.svc-sub-7 { --open: 9.1; }

/* —— 子栏目展开：默认第一项（HTML 中已标 is-active 类），
      JS 悬停切换 is-active 类，移开后保持不回弹（老站 SuperSlide 行为） —— */
.svc-sub li.is-active { flex-grow: var(--open); max-width: 100%; }  /* 激活项展开（上限改为容器宽，不再锁宽） */
.svc-sub li:focus-within { flex-grow: var(--open); max-width: 100%; } /* 键盘聚焦项同样展开 */

/* ----- 7.1 左侧图文面板（展开时可见） -----
   收起态 flex:0 1 0% 零宽裁切；展开态 flex:1 占满竖条左侧全部空间 */
.role-item {
  flex: 0 1 0%;                              /* 收起态：零宽（overflow 裁切，不占位无缝隙） */
  min-width: 0;
  overflow: hidden;
  position: relative;
  background-color: #f5f9ff;                 /* 老站面板底色 */
  background-repeat: no-repeat;
  background-position: 10px center;          /* 插画靠左垂直居中（老站一致） */
  background-size: var(--illus-w) auto;
}

/* 展开态：面板占满竖条左侧全部空间 */
.svc-sub li.is-active .role-item,
.svc-sub li:focus-within .role-item {
  flex: 1 1 0%;
}

/* 面板标题（如：香火代写 · 书法）
   行高 1.2（单行标题，压低标题盒高度，与下方正文保持安全间距） */
.role-group {
  position: absolute;
  top: var(--title-top);
  left: var(--text-x);
  right: 0.5rem;
  font-size: var(--group-fs);
  line-height: 1.2;
  font-weight: 700;
  color: #3c3c3c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "灯箱招牌"标题后的 NEW 小徽标（老站 yjl） */
.role-group.yjl::after {
  content: "";
  display: inline-block;
  width: 2.6875rem;                                   /* NEW 徽标宽 43px ÷ 16 */
  height: 1.125rem;
  margin-left: 0.375rem;                              /* 6px ÷ 16 */
  vertical-align: -0.125rem;                          /* -2px ÷ 16 */
  background: url(../images/services/new_fa.png) no-repeat center / contain;
}

/* 面板正文（内容介绍）
   dl 只负责定位与裁切；真正的多行省略号加在 dd 上（见下），
   这样 dt"内容介绍"独占一行、dd 按自己的行数截断，
   不会出现"第 N 行末尾有省略号、第 N+1 行又有字"的错位 */
.role-desc {
  position: absolute;
  top: var(--desc-top);
  bottom: 0.5rem;                            /* 8px ÷ 16，变焦段随根字号同步 */
  left: var(--text-x);
  right: 0.625rem;
  overflow: hidden;
  font-size: var(--desc-fs);
  line-height: 1.5;                          /* 行距 1.5（按用户要求自 1.4 加宽一点） */
  color: #3c3c3c;
}

.role-desc dt { font-weight: 700; }          /* "内容介绍" 小标题加粗 */

/* 正文段落：-webkit-line-clamp 只在内容确实超出可用行数时
   才在末行出现省略号，未超出时完整显示、不加省略号
   （行数 5 由几何反推：dl 可用高度 = 舞台高 − desc-top − 8px，
    舞台高 = min(手风琴宽 ÷ 6.5, 215.38px)，行距 1.5，正文最大 14px；
    最紧张的两处是自宽 1020px（显示下限）与刚过 1400px：
    1020px 时 6 行需 93px ≤ 可用 106px ✓、再+1 行即超高；
    1400px 时 6 行需 126px ≤ 可用 132px ✓、再+1 行超高 → 恒为 5 行；
    超过 1400px 后高度封顶、desc-top 也已封顶，可用高度不再变化，
    而宽度更大 → 每行字数更多，5 行始终安全） */
.role-desc dd {
  display: -webkit-box;                      /* 多行截断三件套：盒模型＋纵向＋行数 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-indent: 2em;                          /* 正文首行缩进两字（实测与 line-clamp 共存有效） */
}
.role-desc a { color: #3c3c3c; }
.role-desc a:hover { text-decoration: underline; }

/* ----- 7.2 右侧竖条标签（收起时的可见部分） -----
   收起态 flex:1 填满整栏（栏间零空隙）；展开态固定为竖条宽 */
.role-txt {
  flex: 1 1 0%;                              /* 收起态：占满整栏，任何宽度下无缝隙 */
  min-width: 0;
  position: relative;
  background: #eaf1fa;                       /* 老站竖条浅蓝灰底 */
  border: 1px solid #fff;
  margin-left: -1px;                         /* 相邻竖条边框合并（老站技巧） */
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 展开态：竖条恢复固定比例宽（老站 50px，打印组 56px） */
.svc-sub li.is-active .role-txt,
.svc-sub li:focus-within .role-txt {
  flex: 0 0 var(--tab-w);
}

/* 竖排项目名 */
.role-name {
  position: absolute;
  top: var(--name-top);
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;                 /* 老站 tb-rl 的现代标准写法 */
  letter-spacing: 0.125em;                   /* 老站 2px/16px 等比还原 */
  white-space: nowrap;
  font-size: var(--name-fs);
  color: #3c3c3c;
}

/* 竖条底部小图标：收起时灰度半透明，展开时恢复彩色（老站效果） */
.role-img {
  position: absolute;
  bottom: var(--ico-bottom);
  left: 50%;
  transform: translateX(-50%);
  width: var(--ico-w);
  aspect-ratio: 4 / 9;                       /* 原图统一 40×90 */
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

/* —— 子栏目激活视觉态（JS 切换 is-active 类驱动，移开后保持） —— */
.svc-sub li.is-active .role-txt { background: #f5f9ff; border-color: transparent; }
.svc-sub li.is-active .role-img { filter: grayscale(0); opacity: 1; }
.svc-sub li:focus-within .role-txt { background: #f5f9ff; border-color: transparent; }
.svc-sub li:focus-within .role-img { filter: grayscale(0); opacity: 1; }


/* ============================================
   8. 图片资源映射（原老站 images/Service-tem/ 全部迁至
      images/services/；每项两张：X.1=面板插画，X.2=竖条图标）
   ============================================ */
/* 书法 */
.bg-sh4 { background-image: url(../images/services/sh4.1.png); }   /* 香火代写 插画 */
.bg-sh4i { background-image: url(../images/services/sh4.2.png); }  /* 香火代写 图标 */
.bg-sh3 { background-image: url(../images/services/sh3.1.png); }   /* 书法销售 插画 */
.bg-sh3i { background-image: url(../images/services/sh3.2.png); }  /* 书法销售 图标 */
.bg-sh2 { background-image: url(../images/services/sh2.1.png); }   /* 装裱字画 插画 */
.bg-sh2i { background-image: url(../images/services/sh2.2.png); }  /* 装裱字画 图标 */
.bg-sh1 { background-image: url(../images/services/sh1.1.png); }   /* 书法定制 插画 */
.bg-sh1i { background-image: url(../images/services/sh1.2.png); }  /* 书法定制 图标 */
/* 广告 */
.bg-gg7 { background-image: url(../images/services/gg7.1.png); }   /* 展板展架 插画 */
.bg-gg7i { background-image: url(../images/services/gg7.2.png); }  /* 展板展架 图标 */
.bg-gg6 { background-image: url(../images/services/gg6.1.png); }   /* 名片传单 插画 */
.bg-gg6i { background-image: url(../images/services/gg6.2.png); }  /* 名片传单 图标 */
.bg-gg5 { background-image: url(../images/services/gg5.1.png); }   /* 广告字牌 插画 */
.bg-gg5i { background-image: url(../images/services/gg5.2.png); }  /* 广告字牌 图标 */
.bg-gg4 { background-image: url(../images/services/gg4.1.png); }   /* 户外广告 插画 */
.bg-gg4i { background-image: url(../images/services/gg4.2.png); }  /* 户外广告 图标 */
.bg-gg3 { background-image: url(../images/services/gg3.1.png); }   /* 标识标牌 插画 */
.bg-gg3i { background-image: url(../images/services/gg3.2.png); }  /* 标识标牌 图标 */
.bg-gg2 { background-image: url(../images/services/gg2.1.png); }   /* 喷绘写真 插画 */
.bg-gg2i { background-image: url(../images/services/gg2.2.png); }  /* 喷绘写真 图标 */
.bg-gg1 { background-image: url(../images/services/gg1.1.png); }   /* 灯箱招牌 插画 */
.bg-gg1i { background-image: url(../images/services/gg1.2.png); }  /* 灯箱招牌 图标 */
/* 雕刻 */
.bg-dk4 { background-image: url(../images/services/dk4.1.png); }   /* PVC吊牌 插画 */
.bg-dk4i { background-image: url(../images/services/dk4.2.png); }  /* PVC吊牌 图标 */
.bg-dk3 { background-image: url(../images/services/dk3.1.png); }   /* 实木对联 插画 */
.bg-dk3i { background-image: url(../images/services/dk3.2.png); }  /* 实木对联 图标 */
.bg-dk2 { background-image: url(../images/services/dk2.1.png); }   /* 实木牌匾 插画 */
.bg-dk2i { background-image: url(../images/services/dk2.2.png); }  /* 实木牌匾 图标 */
.bg-dk1 { background-image: url(../images/services/dk1.1.png); }   /* 实木吊牌 插画 */
.bg-dk1i { background-image: url(../images/services/dk1.2.png); }  /* 实木吊牌 图标 */
/* 热转印 */
.bg-rzy4 { background-image: url(../images/services/rzy4.1.png); } /* 服装印制 插画 */
.bg-rzy4i { background-image: url(../images/services/rzy4.2.png); }/* 服装印制 图标 */
.bg-rzy3 { background-image: url(../images/services/rzy3.1.png); } /* 袖套印制 插画 */
.bg-rzy3i { background-image: url(../images/services/rzy3.2.png); }/* 袖套印制 图标 */
.bg-rzy2 { background-image: url(../images/services/rzy2.1.png); } /* 绶带印制 插画 */
.bg-rzy2i { background-image: url(../images/services/rzy2.2.png); }/* 绶带印制 图标 */
.bg-rzy1 { background-image: url(../images/services/rzy1.1.png); } /* 锦旗印制 插画 */
.bg-rzy1i { background-image: url(../images/services/rzy1.2.png); }/* 锦旗印制 图标 */
/* 装裱 */
.bg-zb5 { background-image: url(../images/services/zb5.1.png); }   /* 画匾销售 插画 */
.bg-zb5i { background-image: url(../images/services/zb5.2.png); }  /* 画匾销售 图标 */
.bg-zb4 { background-image: url(../images/services/zb4.1.png); }   /* 执照框销售 插画 */
.bg-zb4i { background-image: url(../images/services/zb4.2.png); }  /* 执照框销售 图标 */
.bg-zb3 { background-image: url(../images/services/zb3.1.png); }   /* 画框定制 插画 */
.bg-zb3i { background-image: url(../images/services/zb3.2.png); }  /* 画框定制 图标 */
.bg-zb2 { background-image: url(../images/services/zb2.1.png); }   /* 作品装裱 插画 */
.bg-zb2i { background-image: url(../images/services/zb2.2.png); }  /* 作品装裱 图标 */
.bg-zb1 { background-image: url(../images/services/zb1.1.png); }   /* 绣画装裱 插画 */
.bg-zb1i { background-image: url(../images/services/zb1.2.png); }  /* 绣画装裱 图标 */
/* 打印 */
.bg-dy6 { background-image: url(../images/services/dy6.1.png); }   /* 收款码印制 插画 */
.bg-dy6i { background-image: url(../images/services/dy6.2.png); }  /* 收款码印制 图标 */
.bg-dy5 { background-image: url(../images/services/dy5.1.png); }   /* 塑封 插画 */
.bg-dy5i { background-image: url(../images/services/dy5.2.png); }  /* 塑封 图标 */
.bg-dy4 { background-image: url(../images/services/dy4.1.png); }   /* 扫描 插画 */
.bg-dy4i { background-image: url(../images/services/dy4.2.png); }  /* 扫描 图标 */
.bg-dy3 { background-image: url(../images/services/dy3.1.png); }   /* 证卡定制 插画 */
.bg-dy3i { background-image: url(../images/services/dy3.2.png); }  /* 证卡定制 图标 */
.bg-dy2 { background-image: url(../images/services/dy2.1.png); }   /* 彩色打印 插画 */
.bg-dy2i { background-image: url(../images/services/dy2.2.png); }  /* 彩色打印 图标 */
.bg-dy1 { background-image: url(../images/services/dy1.1.png); }   /* 激光复印 插画 */
.bg-dy1i { background-image: url(../images/services/dy1.2.png); }  /* 激光复印 图标 */

/* —— 纯流式缩放，无断点；唯一的容器查询在第 9 节（仅调锁定档的纵向间距） —— */


/* ============================================
   9. 锁定档纵向间距（唯一的一处容器查询）
      触发点＝"高度锁定"同一个点：手风琴自宽 ≥1400px 时舞台高度
      已封在 215.38px，宽度却还会继续变宽 → 正文行数变少、面板
      下半显得空，故锁定档单独调纵向间距。
      当前取值（按用户逐次微调最终确定）：
      · --title-top: 38px —— 子层大标题（.role-group，如"实木牌匾
        · 雕刻"）距面板顶 38px（紧凑档基值 30.8px 的封顶值之上）
      · --desc-top: 80px —— "内容介绍"（dt）距面板顶 80px，
        比上一版的 87.2px 上收 7.2px（用户要求"向上收一点"）
      · dd 与 dt 之间再留 6px（margin-top），正文与"内容介绍"分开
      注：上一版曾用 calc(2 × title-top + 19.2px) 让 dt 与标题上下
          对称；用户现要求"标题再向下、内容介绍向上"，两者相向靠拢，
          对称关系随之取消，故 --desc-top 改为固定 80px（不再联动
          --title-top，改标题位置不会再动正文位置）。
      几何：dl 高度 = 215.3846 − 80 − 8 = 127.4px；扣掉 dt 一行
           21px（14px × 行距 1.5）与 6px 间距，正文可用 ≈ 100.4px
           ≈ 4.8 行（上一版 93.2px），长文案更容易排下。
      说明：dd 的 -webkit-line-clamp: 5 是上限；锁定档最窄处（自宽
           恰 1400px）配最长文案时末行仍可能被 dl 裁掉一点，属
           215.38px 高度上限内的取舍。
      <1400px 的紧凑档完全不受影响（基类的 min(…) 值原样生效）。
      （此块按全站约定置于文件末尾：基础样式在前、查询在后）
   ============================================ */
@container svc (min-width: 1400px) {
  .group-box {
    --title-top: 2.375rem;                            /* 锁定档：子层大标题距面板顶 38px ÷ 16 */
    --desc-top: 5rem;                                 /* 锁定档："内容介绍"距面板顶 80px ÷ 16 */
  }
  .role-desc dd { margin-top: 0.375rem; }             /* "内容介绍"与下方正文之间留 6px ÷ 16 */
}