/* ============================================================================
 * blocks.css — 组件层（业务内容区块）
 * 项目：洛阳智昊工程科技有限公司 官网 V4
 * ----------------------------------------------------------------------------
 * 范围：数据带、全过程服务流程、技术优势、工艺选型器、工程案例、新闻中心、
 *       招贤纳士、联系转化。首页专属样式见 pages/home.css。
 *
 * 依赖：tokens.css → base.css → layout.css → components.css
 * ==========================================================================*/

@layer components {

  /* ==========================================================================
   * 1. 数据带（Stats Band）
   * ----------------------------------------------------------------------------
   * V3 现状：5 项指标以等分小卡散布在 Hero 下方，权重平均、缺乏冲击力。
   * V4 处理：合并为一条深色横带，数字用显示字族放大到正文 4 倍，
   *          并以 --stagger-step 逐项入场，形成"报表逐条点亮"的观感。
   * =========================================================================*/
  .stats {
    position: relative;
    background: var(--section-data-bg);
    color: var(--section-data-text);
    overflow: hidden;
  }

  /* 底纹：斜向细线，呼应金属加工纹理 */
  .stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, .028) 0 1px,
      transparent 1px 14px
    );
    pointer-events: none;
  }

  .stats__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  @media (max-width: 1023px) {
    .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 479px) {
    .stats__grid { grid-template-columns: minmax(0, 1fr); }
  }

  .stat {
    display: grid;
    gap: var(--sp-1);
    padding: clamp(var(--sp-8), 3.4vw, var(--sp-16)) var(--sp-6);
    border-left: 1px solid rgba(255, 255, 255, .1);
    transition: background-color var(--dur-base) var(--ease-out);
  }

  .stat:first-child { border-left: 0; }

  .stat:hover { background: rgba(255, 255, 255, .03); }

  @media (max-width: 1023px) {
    .stat {
      border-left: 0;
      border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .stats__grid > .stat:nth-child(1),
    .stats__grid > .stat:nth-child(2) { border-top: 0; }

    .stats__grid > .stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .1); }
  }

  @media (max-width: 479px) {
    .stats__grid > .stat:nth-child(1) { border-top: 0; }
    .stats__grid > .stat:nth-child(n) { border-left: 0; }
  }

  .stat__value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--section-data-text);
    font-variant-numeric: tabular-nums;
  }

  /* 后缀（+ / 套）单独缩小，避免与数字同权重造成误读 */
  .stat__suffix {
    font-size: .42em;
    color: var(--section-data-accent);
    letter-spacing: 0;
  }

  .stat__label {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .72);
    letter-spacing: .04em;
  }

  .stat__en {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .26);
  }

  /* 数字滚动未完成时的占位宽度锁定，防止布局跳动（CLS） */
  .stat__num {
    display: inline-block;
    min-width: 2ch;
  }

  /* ==========================================================================
   * 2. 全过程服务流程（EPCO Process）
   * ----------------------------------------------------------------------------
   * V3 现状：4 张等分卡片，读起来像并列产品，未体现"贯穿全周期"的顺序关系。
   * V4 处理：改为带连接线与阶段编号的横向流程，桌面端强调"链路"，
   *          移动端自动转为纵向时间轴，同一份结构两种读法。
   * =========================================================================*/
  .process {
    position: relative;
    display: grid;
    gap: var(--gap-grid);
    counter-reset: process-step;
  }

  @media (min-width: 1024px) {
    .process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* 连接线：桌面横向、纵向移动端 */
  .process::before {
    content: "";
    position: absolute;
    background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  }

  @media (min-width: 1024px) {
    .process::before {
      top: 27px;
      left: 12.5%;
      right: 12.5%;
      height: 2px;
    }
  }

  @media (max-width: 1023px) {
    .process::before {
      top: 0;
      bottom: 0;
      left: 26px;
      width: 2px;
      background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px);
    }
  }

  .process__item {
    position: relative;
    display: grid;
    gap: var(--sp-3);
    padding: 0;
    counter-increment: process-step;
  }

  @media (min-width: 1024px) {
    .process__item { padding-top: var(--sp-12); }
  }

  @media (max-width: 1023px) {
    .process__item {
      grid-template-columns: 54px 1fr;
      gap: var(--sp-4);
      align-items: start;
      min-height: var(--sp-16);
    }
  }

  /* 节点：编号圆牌，压在连接线上 */
  .process__node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--slate-400);
    transition:
      border-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out),
      background-color var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  /* 序号取自 CSS counter，无需在 HTML 中硬编码，插入阶段时不必改文案 */
  .process__node::before { content: "0" counter(process-step); }

  .process__item:hover .process__node {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: var(--accent-500);
    transform: scale(1.06);
  }

  @media (min-width: 1024px) {
    .process__node { margin-bottom: var(--sp-5); }
  }

  .process__en {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--brand-500);
  }

  .process__title {
    margin: 0;
    font-size: var(--fs-lg);
  }

  .process__desc {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    line-height: 1.85;
  }

  /* 采购能力条：EPCO 之外的第五项支撑，横贯流程下方 */
  .process__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-top: clamp(var(--sp-8), 3vw, var(--sp-16));
    padding: var(--sp-6);
    background: var(--surface);
    border: var(--edge-light);
    clip-path: var(--clip-notch);
  }

  /* 流程区块：工程黄主题 */
  .process-section {
    background: var(--section-engine-bg);
  }

  .process-section .section-head__title {
    color: var(--section-engine-text);
  }

  .process-section .process__en {
    color: var(--section-engine-accent);
  }

  /* ==========================================================================
   * 3. 技术优势（Advantage）
   * ----------------------------------------------------------------------------
   * 采用 Bento 不等跨度：物联网（核心壁垒）占 6 列并配深色，
   * 其余三项各占 2 列，形成 1 主 3 次的层级，纠正 V3 的四等分。
   * =========================================================================*/
  .adv {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    height: 100%;
  }

  .adv__head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  .adv__title {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
  }

  .adv__desc {
    flex: 1;
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    line-height: 1.85;
  }

  /* 物联网四项能力标签：置于深色大卡内 */
  .adv__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-top: auto;
  }

  @media (max-width: 479px) {
    .adv__features { grid-template-columns: minmax(0, 1fr); }
  }

  .adv__feature {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .82);
    font-size: var(--fs-sm);
    border-left: 2px solid var(--section-tech-accent);
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  .adv__feature:hover { background: rgba(255, 255, 255, .1); }

  /* 优势卡片"查看更多"链接 */
  .adv__more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: auto;
    padding-top: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--accent-500);
    text-decoration: none;
    transition: gap var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
  }

  .adv__more:hover {
    gap: var(--sp-2);
    color: var(--accent-400);
  }

  .adv__more span {
    transition: transform var(--dur-base) var(--ease-out);
  }

  .adv__more:hover span {
    transform: translateX(3px);
  }

  /* 区块头「查看更多」入口：与 .news__more 同款无外框纯文字风格，
     位于 section-head__aside 导语下方，hover 下划线 + 箭头右移 */
  .section-head__more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--brand-500);
    text-decoration: none;
  }

  .section-head__more span {
    transition: transform var(--dur-base) var(--ease-out);
  }

  .section-head__more:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .section-head__more:hover span { transform: translateX(4px); }

  /* EPCO 字母块 */
  .epco {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-top: auto;
  }

  .epco__cell {
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: var(--sp-4) var(--sp-2);
    background: var(--paper-2);
    border-bottom: 2px solid var(--line);
    text-align: center;
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }

  .epco__cell:hover {
    border-bottom-color: var(--section-tech-accent);
    transform: translateY(-2px);
  }

  .epco__letter {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ink-900);
  }

  .epco__word {
    font-size: var(--fs-xs);
    color: var(--text-3);
    letter-spacing: .06em;
  }

  /* ==========================================================================
   * 5. 工程案例（Cases）
   * ----------------------------------------------------------------------------
   * V4.1：案例卡增加项目实景图，并改为自动循环轮播（无缝滚动、悬停暂停），
   *       卡片数量支持 6–10 个，克隆与滚动由 home.js InitCasesCarousel 驱动。
   * =========================================================================*/

  /* 轮播外层：入场揭示作用于整体，避免与轨道位移动画叠加 */
  .cases__carousel {
    --case-card-w: 360px;
  }

  /* 视口：裁切溢出卡片，两侧渐隐遮罩柔化边缘 */
  .cases__viewport {
    position: relative;
    display: flex;
    overflow: hidden;
    /* 卡片 hover 上浮留出顶部空间，避免被视口裁切 */
    padding-top: var(--sp-3);
  }

  .cases__viewport::before,
  .cases__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    z-index: 2;
    pointer-events: none;
  }

  .cases__viewport::before {
    left: 0;
    background: linear-gradient(90deg, var(--section-engine-bg), transparent);
  }

  .cases__viewport::after {
    right: 0;
    background: linear-gradient(270deg, var(--section-engine-bg), transparent);
  }

  /* 轨道：JS 按总宽度设置动画时长，匀速平移一份原始列表宽度后循环 */
  .cases__track {
    display: flex;
    flex: none;
    align-items: stretch;
    gap: var(--gap-grid);
  }

  /* 悬停/键盘聚焦暂停，保证可读性与可点击性 */
  .cases__viewport:hover .cases__track,
  .cases__viewport:focus-within .cases__track {
    animation-play-state: paused;
  }

  /* 位移量由 JS 按克隆份数写入 --cases-loop-shift（= 100% / 总份数），
     保证循环点恰好平移整数份卡片宽度，接缝无跳帧 */
  @keyframes cases-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(var(--cases-loop-shift, -50%)); }
  }

  /* 案例卡片链接包裹器：固定宽度保证轮播节奏，等高由轨道 align-items 拉伸 */
  .case-link {
    display: block;
    flex: none;
    width: var(--case-card-w);
    max-width: 82vw;
    text-decoration: none;
    color: inherit;
  }

  .case {
    position: relative;
    display: grid;
    /* media/title/capacity 固定，desc 弹性占位，foot 与 cta 压底对齐 */
    grid-template-rows: auto auto auto 1fr auto auto;
    gap: var(--sp-3);
    height: 100%;
    /* 图片通栏出血：抵消卡片内边距，四角圆角裁切 */
    padding: 0 var(--sp-6) var(--sp-6);
    border-radius: var(--r-lg);
    /* 顶部淡工程黄渐入白底，制造暖调层次而不牺牲文字对比度 */
    background: linear-gradient(180deg, var(--section-engine-bg) 0%, var(--surface) 46%);
    border: var(--edge-light);
    text-align: left;
    overflow: hidden;
    transition:
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  /* 顶部工程黄强调条：默认收起一小段，hover 时横向展开，呼应导航指示条动效 */
  .case::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-500), var(--accent-300));
    transform: scaleX(.18);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-out);
    z-index: 2;
  }

  /* 背景年份水印：低透明度大号数字，纯装饰不叠加正文，制造层次 */
  .case::after {
    content: attr(data-year);
    position: absolute;
    right: var(--sp-4);
    bottom: calc(-1 * var(--sp-5));
    font-family: var(--font-display);
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--accent-500);
    opacity: .08;
    pointer-events: none;
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  .case:hover {
    border-color: var(--section-engine-accent);
    box-shadow: var(--shadow-3);
    transform: translateY(-6px);
  }

  .case:hover::before { transform: scaleX(1); }

  .case:hover::after {
    opacity: .14;
    transform: translateY(-6px);
  }

  /* hover 时实景图缓动放大，与卡片上浮叠加增强交互感 */
  .case:hover .case__img { transform: scale(1.05); }

  /* 项目实景图：16:9 通栏出血，徽章悬浮左上角 */
  .case__media {
    position: relative;
    margin: 0 0 var(--sp-1);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--paper-2);
  }

  .case__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  /* 徽章组：半透明深色底 + 白字，保证任意图片上的可读性 */
  .case__badges {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 10px;
    background: rgba(15, 23, 42, .62);
    border-radius: var(--r-md);
    backdrop-filter: blur(4px);
  }

  .case__year {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
  }

  .case__region {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, .85);
  }

  .case__region--overseas { color: var(--accent-300); }

  .case__title {
    margin: 0;
    font-size: var(--fs-lg);
  }

  /* 产能数字：浅黄 chip 底 + 深色文字，兼顾主题识别与 WCAG 对比度 */
  .case__capacity {
    display: inline-flex;
    align-items: baseline;
    justify-self: start;
    gap: var(--sp-2);
    padding: 4px var(--sp-3);
    background: var(--accent-100);
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-1);
  }

  .case__capacity span {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-3);
  }

  .case__desc {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    line-height: 1.85;
    /* 描述长度不一，统一折 4 行保持网格齐整 */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .case__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-top: var(--sp-4);
    margin-top: var(--sp-2);
    border-top: 1px solid var(--line);
  }

  /* 成品规格：等宽字体保证 mm 数值对齐，便于快速比对级配 */
  .case__products {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--slate-400);
    letter-spacing: -.01em;
  }

  /* 案例卡片建设单位 */
  .case__client {
    display: block;
    width: 100%;
    font-size: var(--fs-xs);
    color: var(--text-3);
    margin-top: var(--sp-1);
  }

  /* 查看详情引导：默认弱化，hover 时文字加深、箭头右移，明确可点击 */
  .case__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-3);
    transition: color var(--dur-base) var(--ease-out);
  }

  .case__cta-arrow {
    display: inline-block;
    transition: transform var(--dur-base) var(--ease-out);
  }

  .case:hover .case__cta { color: var(--text-1); }
  .case:hover .case__cta-arrow { transform: translateX(5px); }

  /* 移动端：卡片变窄，一屏可见约 1.5 张暗示可滑动 */
  @media (max-width: 640px) {
    .cases__carousel { --case-card-w: 280px; }

    .cases__viewport::before,
    .cases__viewport::after { width: 32px; }
  }

  /* ==========================================================================
   * 6. 客户与建设单位墙
   * ----------------------------------------------------------------------------
   * 决策：不做 logo 墙。未经授权使用他企标识存在侵权风险，且 V3 无 logo 素材。
   *      改为「排版式实名墙」——仅展示案例正文中已公开出现的建设单位名称，
   *      以字号与灰度建立层级，比灰底 logo 更可信。
   * =========================================================================*/
  .clients {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1px;
    background: var(--line);
    border: var(--edge-light);
  }

  .clients__item {
    display: grid;
    gap: var(--sp-2);
    padding: clamp(var(--sp-5), 2vw, var(--sp-8));
    background: var(--surface);
    transition: background-color var(--dur-base) var(--ease-out);
  }

  .clients__item:hover { background: var(--paper-2); }

  .clients__name {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-1);
  }

  .clients__role {
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--slate-400);
  }

  .clients__project {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--section-engine-accent);
  }

  /* ==========================================================================
   * 7. 新闻中心
   * ----------------------------------------------------------------------------
   * V3 现状：1 大 + 5 小共 6 条，全部同权重，读起来像列表而非编辑页。
   *  V4 处理：头条占 6 列并带图，其余按「行业 / 文化」两类分组列出，
   *          日期右对齐形成目录感。
   * =========================================================================*/
  .news {
    display: grid;
    gap: clamp(var(--sp-8), 3vw, var(--sp-16));
  }

  @media (min-width: 1024px) {
    .news { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  }

  .news__lead {
    display: grid;
    gap: var(--sp-5);
    text-decoration: none;
    color: inherit;
  }

  .news__lead:hover { color: inherit; }

  .news__lead-title {
    margin: 0;
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    transition: color var(--dur-fast) var(--ease-out);
  }

  .news__lead:hover .news__lead-title { color: var(--section-people-accent); }

  .news__lead-excerpt {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    line-height: 1.9;
  }

  .news__list {
    display: grid;
    align-content: start;
    gap: 0;
  }

  .news__group-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-3);
  }

  .news__group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }

  .news__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    transition: padding-left var(--dur-base) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }

  .news__item:hover {
    color: var(--section-people-accent);
    padding-left: var(--sp-3);
  }

  .news__item-title {
    font-size: var(--fs-base);
    line-height: 1.6;
    /* 中文标题单行截断，保持列表可扫读 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .news__date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--slate-400);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* 查看更多：无外框纯文字入口指引，位于右侧新闻列表（.news__list 网格）末尾，
     justify-self: end 随列表列右对齐；hover 箭头右移强化可点击感 */
  .news__more {
    display: inline-flex;
    justify-self: end;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-8);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--brand-500);
    text-decoration: none;
  }

  .news__more span {
    transition: transform var(--dur-base) var(--ease-out);
  }

  .news__more:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .news__more:hover span { transform: translateX(4px); }

  /* ==========================================================================
   * 8. 招贤纳士
   * =========================================================================*/
  .jobs {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: var(--edge-light);
  }

  .job {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-6);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out);
  }

  @media (min-width: 768px) {
    .job {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: var(--sp-6);
    }
  }

  .job:hover { background: var(--paper-2); }

  .job__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
  }

  .job__title {
    margin: 0;
    font-size: var(--fs-md);
  }

  .job__salary {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--accent-700);
    white-space: nowrap;
  }

  .job__req {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    line-height: 1.8;
  }

  /* 手风琴展开态：详情默认折叠，避免首页被招聘文案撑长 */
  .job__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out);
    overflow: hidden;
  }

  .job[aria-expanded="true"] .job__body { grid-template-rows: 1fr; }
  .job__body > div { min-height: 0; overflow: hidden; }

  .job__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--section-people-accent);
    white-space: nowrap;
  }

  .job__toggle .icon {
    transition: transform var(--dur-base) var(--ease-out);
  }

  .job[aria-expanded="true"] .job__toggle .icon { transform: rotate(180deg); }

  /* 人才理念：三句并列，用竖线分隔而非卡片，降低视觉噪音 */
  .ethos {
    display: grid;
    gap: var(--sp-5);
  }

  @media (min-width: 768px) {
    .ethos {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
    }

    .ethos__item + .ethos__item {
      padding-left: var(--sp-8);
      border-left: 1px solid var(--line);
    }
  }

  .ethos__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-md);
    color: var(--text-1);
  }

  .ethos__text {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    line-height: 1.9;
  }

  /* ==========================================================================
   * 9. 联系与转化
   * =========================================================================*/
  .contact {
    display: grid;
    gap: clamp(var(--sp-8), 4vw, var(--sp-16));
  }

  @media (min-width: 1024px) {
    .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  }

  .contact__list {
    display: grid;
    gap: 0;
    margin-top: var(--sp-8);
  }

  .contact__row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--line);
  }

  .contact__row:first-child { border-top: 1px solid var(--line); }

  .contact__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--brand-50);
    color: var(--section-convert-accent);
    font-size: 18px;
  }

  .contact__label {
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--text-3);
  }

  .contact__value {
    margin-top: 2px;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-1);
    word-break: break-word;
  }

  .contact__value a {
    color: inherit;
    text-decoration: none;
  }

  .contact__value a:hover { color: var(--section-convert-accent); }

  .contact__value--tel {
    font-family: var(--font-mono);
    letter-spacing: .02em;
  }

  /* --------------------------------------------------------------------------
   * 9.1 咨询表单
   * ------------------------------------------------------------------------*/
  .form {
    display: grid;
    gap: var(--sp-5);
    padding: clamp(var(--sp-6), 3vw, var(--sp-12));
    background: var(--surface);
    border: var(--edge-light);
    clip-path: var(--clip-notch);
    box-shadow: var(--shadow-2);
  }

  .form__row {
    display: grid;
    gap: var(--sp-5);
  }

  @media (min-width: 600px) {
    .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .form__field {
    display: grid;
    gap: var(--sp-2);
  }

  .form__label {
    display: flex;
    align-items: baseline;
    gap: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
  }

  /* 必填星号：以伪元素附加，屏幕阅读器由 aria-required 承担，不重复朗读 */
  .form__label[data-required="true"]::after {
    content: "*";
    color: var(--danger);
  }

  .form__input,
  .form__select,
  .form__textarea {
    width: 100%;
    padding: 12px var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-1);
    font-size: var(--fs-base);
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }

  .form__input::placeholder,
  .form__textarea::placeholder {
    color: var(--slate-300);
  }

  .form__input:hover,
  .form__select:hover,
  .form__textarea:hover { border-color: var(--slate-200); }

  .form__input:focus,
  .form__select:focus,
  .form__textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--section-convert-accent);
    box-shadow: var(--focus-ring);
  }

  .form__select {
    padding-right: var(--sp-10);
    background-image: linear-gradient(45deg, transparent 50%, var(--slate-400) 50%),
                      linear-gradient(135deg, var(--slate-400) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .form__textarea { min-height: 132px; }

  /* 校验失败态：由 JS 设置 aria-invalid */
  .form__input[aria-invalid="true"],
  .form__select[aria-invalid="true"],
  .form__textarea[aria-invalid="true"] {
    border-color: var(--danger);
    background: #fff5f5;
  }

  .form__error {
    display: none;
    font-size: 11px;
    color: var(--danger);
  }

  .form__field[data-invalid="true"] .form__error { display: block; }

  .form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
  }

  .form__note {
    max-width: 34ch;
    font-size: 11px;
    line-height: 1.7;
    color: var(--slate-400);
  }

  /* 提交结果提示：静态站无后端，此处明确告知投递方式，不做假成功 */
  .form__result {
    display: none;
    padding: var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.7;
  }

  .form__result[data-show="true"] { display: block; }

  /* 提交结果提示（V5 接 /api/site/inquiry 后由 contact-form.js 控制） */
  .form__status {
    margin: var(--sp-3) 0 0;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.7;
    border-left: 3px solid var(--slate-400);
    background: var(--slate-50, #f8fafc);
  }

  .form__status--ok {
    color: var(--ok);
    border-left-color: var(--ok);
  }

  .form__status--error {
    color: var(--danger);
    border-left-color: var(--danger);
  }

  /* --------------------------------------------------------------------------
   * 10. EPCO 展示四格（公共组件：智昊优势分类页 epco.html / 详情页 epco-service.html）
   *     复刻原官网 zhys11.html 动效机制：竖长格底=线性图标+中英文标题+释义，
   *     实景照片层默认隐藏，悬停格子时 0.6s 淡入（原站 yx_ImgCover 同款）；
   *     触屏设备无 hover，照片常显（与原站移动端降级一致）。
   *     格高≈2.3×格宽：与原站 padding-bottom:230% 一致，照片按原比例完整显示。
   * ------------------------------------------------------------------------*/
  .epco-showcase {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  @media (max-width: 1024px) {
    .epco-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 560px) {
    .epco-showcase { grid-template-columns: minmax(0, 1fr); }
  }

  .epco-showcase__cell {
    position: relative;
    overflow: hidden;
    aspect-ratio: 100 / 230;
    background: linear-gradient(180deg, #223341 0%, #16222c 100%);
    color: #fff;
  }

  /* 底层：线性图标居中，避开底部文字区 */
  .epco-showcase__base {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-bottom: 32%;
  }

  .epco-showcase__icon {
    width: min(38%, 96px);
    height: auto;
    object-fit: contain;
  }

  /* 照片层：铺满格，悬停淡入（复刻原站 e_image-74 机制） */
  .epco-showcase__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
  }

  .epco-showcase__cell:hover .epco-showcase__photo,
  .epco-showcase__cell:focus-within .epco-showcase__photo { opacity: 1; }

  @media (hover: none) {
    .epco-showcase__photo { opacity: 1; }
  }

  /* 文字层：压在照片/图标之上，底部渐变蒙版保证白字可读 */
  .epco-showcase__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--sp-10) var(--sp-4) var(--sp-6);
    text-align: center;
    background: linear-gradient(180deg, rgba(5, 17, 27, 0) 0%, rgba(5, 17, 27, .78) 58%);
  }

  .epco-showcase__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
  }

  .epco-showcase__en {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wide);
    color: rgba(255, 255, 255, .78);
  }

  .epco-showcase__desc {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-sm);
    line-height: 1.8;
    color: rgba(255, 255, 255, .92);
  }
}