/* ============================================================
   案例列表模板（case 模型）· 头尾跟随项目统一绿色主题
   （与 page/list_product/detail 等模板共用同一套绿色主题）
   版式：顶栏/品牌行/绿色主导航 + 通栏 banner + 页面标签
         + 浅灰底白色圆角卡（内容区：案例卡片栅格）+ 分页 + 绿色页脚
   内容区卡片风格与首页「案例中心」（home.html .eng-cases__card）一致。
   ============================================================ */
:root{
  --lc-primary:#2563eb;
  --lc-on-primary:#FFFFFF;
  --lc-body-bg:#f6f7f8;
  --footer-bg:#2563eb;
  --footer-fg:#FFFFFF;
}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:#333;line-height:1.7;-webkit-font-smoothing:antialiased;background:#fff}
img{max-width:100%}
a{color:inherit}
button{font-family:inherit}
.container{margin:0 auto;max-width:1200px;padding:0 20px;box-sizing:border-box}
/* ============================ 顶栏 / 品牌 / 主导航 ============================ */
.site-header-wrap{flex-shrink:0;background:#fff}
.site-header__top{background:#f8f9fa;border-bottom:1px solid rgba(229,231,235,.8);color:#6b7280;font-size:12px;line-height:1.4}
.site-header__top-inner{align-items:center;box-sizing:border-box;display:flex;gap:12px;justify-content:space-between;min-height:36px;padding:8px 20px}
.site-header__top-right{align-items:center;color:#6b7280;display:flex;gap:20px}
.site-header__contact-item{align-items:center;display:inline-flex;font-size:13px;gap:6px;transition:color .3s;text-decoration:none}
.site-header__contact-item:hover{color:var(--lc-primary)}
.site-header__contact-item--action{color:inherit;font-weight:500;text-decoration:none}
.site-header__contact-icon{color:var(--lc-primary);height:14px;opacity:.8;width:14px;display:block}
.site-header__brand{background:#fff}
.site-header__brand-inner{align-items:center;display:flex;flex-wrap:wrap;gap:24px;padding:16px 20px}
.site-header__logo{align-items:center;color:var(--lc-primary);display:flex;gap:10px;flex-shrink:0;text-decoration:none}
.site-header__logo-mark{align-items:center;display:flex;flex-shrink:0;height:48px;justify-content:flex-start;max-width:220px}
.site-header__logo-img{display:block;height:48px;max-width:100%;object-fit:contain;width:auto}
.site-header__logo-text{color:var(--lc-primary);font-size:22px;font-weight:700;letter-spacing:.06em;line-height:1.3}
.site-header__hotline{align-items:center;color:var(--lc-primary);display:inline-flex;flex-shrink:0;gap:12px;margin-left:auto;text-decoration:none}
.site-header__hotline-icon{align-items:center;background:color-mix(in srgb,var(--lc-primary) 10%,transparent);border-radius:50%;color:var(--lc-primary);display:flex;height:40px;justify-content:center;padding:8px;width:40px;box-sizing:border-box}
.site-header__hotline-icon svg{display:block;height:100%;width:100%}
.site-header__hotline-content{display:flex;flex-direction:column}
.site-header__hotline-label{color:#6b7280;font-size:12px;line-height:1;margin-bottom:6px}
.site-header__hotline-num{font-size:22px;font-weight:700;letter-spacing:.02em;line-height:1}
.site-header__nav{background:var(--lc-primary);box-shadow:0 4px 12px color-mix(in srgb,var(--lc-primary) 20%,transparent);position:relative}
.site-header__nav-inner{align-items:stretch;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-start;margin:0 auto;max-width:1200px;padding:0 20px;position:relative;box-sizing:border-box}
.site-header__nav-home,.site-header__nav-inner .yb-nav>li>a{border-radius:8px 8px 0 0;color:var(--lc-on-primary);display:block;font-size:16px;font-weight:500;margin-top:8px;opacity:.92;padding:16px 30px;position:relative;text-align:center;text-decoration:none;transition:all .3s ease;white-space:nowrap;box-sizing:border-box}
.site-header__nav-inner .yb-nav{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;list-style:none}
.site-header__nav-inner .yb-nav>li{position:relative;list-style:none;margin:0}
.site-header__nav-home:hover,.site-header__nav-inner .yb-nav>li>a:hover{background:rgba(255,255,255,.14);opacity:1}
.site-header__nav-home.on,.site-header__nav-inner .yb-nav>li.on>a{background:rgba(255,255,255,.2);color:#fff;font-weight:700;opacity:1}
.site-header__nav-inner .yb-nav__sub{display:none;position:absolute;top:100%;left:0;z-index:30;min-width:170px;margin:0;padding:8px;list-style:none;background:#fff;border:1px solid rgba(229,231,235,.9);border-radius:0 0 12px 12px;box-shadow:0 18px 44px rgba(0,0,0,.14)}
.site-header__nav-inner .yb-nav>li:hover>.yb-nav__sub{display:block}
.site-header__nav-inner .yb-nav__sub li{list-style:none}
.site-header__nav-inner .yb-nav__sub a{display:block;padding:10px 14px;border-radius:8px;color:#374151;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s ease,color .2s ease}
.site-header__nav-inner .yb-nav__sub a:hover{background:color-mix(in srgb,var(--lc-primary) 9%,#fff);color:var(--lc-primary)}
.site-header__nav-inner .yb-nav__sub .yb-nav__sub{top:0;left:100%}
/* ============================ 列表 Banner ============================ */
.lc-banner{background:linear-gradient(120deg,#1e40af 0%,#2563eb 46%,#60a5fa 78%,#3b82f6 100%);overflow:hidden;position:relative}
.lc-banner:before{background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:22px 22px;content:"";inset:0;opacity:.16;pointer-events:none;position:absolute;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0,transparent 78%);mask-image:radial-gradient(ellipse at 50% 0%,#000 0,transparent 78%)}
.lc-banner__bg{inset:0;height:100%;object-fit:cover;position:absolute;width:100%;z-index:0}
.lc-banner__mask{background:linear-gradient(90deg,rgba(37,99,235,.72) 0,rgba(59,130,246,.42) 100%);inset:0;position:absolute;z-index:1}
.lc-banner__inner{align-items:center;box-sizing:border-box;color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:320px;padding:58px 20px 48px;position:relative;text-align:center;z-index:2}
.lc-banner__title{font-size:40px;font-weight:700;letter-spacing:.05em;line-height:1.3;margin:0;text-shadow:0 6px 24px rgba(0,0,0,.18)}
.lc-banner__sub{color:#fff;font-size:18px;font-weight:400;line-height:1.6;margin:16px 0 0;max-width:760px;opacity:.92;text-shadow:0 1px 4px rgba(0,0,0,.3)}
/* ============================ 正文区：面包屑 + 页面标签 + 白色圆角内容卡 ============================ */
.lc-body{background:var(--lc-body-bg);padding:30px 0 60px}
/* 面包屑（{crumbs} + {crumb_tail}）：位于页面标签上一行，保留「首页 > 父栏目 > 当前栏目」层级 */
.lc-crumb{align-items:center;color:#9ca3af;display:flex;flex-wrap:wrap;font-size:14px;gap:2px;margin:0;padding:0 0 12px}
.lc-crumb a{color:#6b7280;text-decoration:none;transition:color .2s ease}
.lc-crumb a:hover{color:var(--lc-primary)}
.lc-crumb .sep{color:#b6c2bc;font-style:normal;margin:0 4px}
.lc-crumb__cur{color:#111827;font-weight:600}
/* 页面标签行：本页关键词胶囊，命中关键词聚合页的为链接 */
.page-tags{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:4px 0 24px}
.page-tag{background:color-mix(in srgb,var(--lc-primary) 8%,#fff);border:1px solid color-mix(in srgb,var(--lc-primary) 16%,transparent);border-radius:999px;color:var(--lc-primary);display:inline-block;font-size:12.5px;line-height:1;padding:6px 12px;transition:background .25s ease,border-color .25s ease}
a.page-tag{text-decoration:none}
a.page-tag:hover{background:color-mix(in srgb,var(--lc-primary) 18%,#fff);border-color:color-mix(in srgb,var(--lc-primary) 30%,transparent)}
.lc-filter{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.lc-filter:empty{display:none}
.lc-filter__label{color:#6b7280;font-size:14px}
.lc-pill{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:999px;color:#374151;display:inline-flex;font-size:14px;line-height:1;padding:8px 14px;text-decoration:none;transition:border-color .2s ease,color .2s ease}
.lc-pill:hover{border-color:var(--lc-primary);color:var(--lc-primary)}
.lc-card{background:#fff;border:1px solid rgba(229,231,235,.5);border-radius:20px;box-shadow:0 10px 30px -10px rgba(0,0,0,.05);padding:48px 64px;box-sizing:border-box}
/* ---- 内容区：案例卡片栅格（封面 + 标题 + 行业/地区标签 + 摘要 + 查看详情）---- */
.lc-list{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0}
.lc-list:empty{display:none}
.lc-item{background:#fff;border:1px solid #eef1f0;border-radius:16px;box-shadow:0 6px 20px -10px rgba(0,0,0,.08);color:inherit;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.lc-item:hover{border-color:color-mix(in srgb,var(--lc-primary) 30%,#eef1f0);box-shadow:0 18px 38px -14px rgba(0,0,0,.2);transform:translateY(-6px)}
.lc-item__img-wrap{aspect-ratio:16/9;background:#f8f9fa;display:block;overflow:hidden;position:relative}
.lc-item__img-wrap:empty{display:none}
.lc-item__cover{display:block;height:100%;object-fit:cover;transition:transform .55s ease;width:100%}
.lc-item:hover .lc-item__cover{transform:scale(1.06)}
.lc-item__main{display:flex;flex:1;flex-direction:column;gap:10px;min-width:0;padding:18px 20px}
.lc-item__title{color:#111827;display:-webkit-box;font-size:17px;font-weight:700;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:color .2s ease}
.lc-item:hover .lc-item__title{color:var(--lc-primary)}
.lc-item__tags{align-items:center;display:flex;flex-wrap:wrap;gap:8px}
.lc-tag{background:color-mix(in srgb,var(--lc-primary) 8%,#fff);border-radius:4px;color:var(--lc-primary);display:inline-block;font-size:12px;line-height:1;padding:4px 10px}
.lc-tag:empty{display:none}
.lc-item__summary{color:#6b7280;display:-webkit-box;font-size:13px;line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:0;overflow:hidden}
.lc-item__more{align-items:center;border-top:1px solid rgba(229,231,235,.8);color:#374151;display:flex;font-size:13px;font-weight:700;gap:6px;margin-top:auto;padding-top:10px}
.lc-item__more em{color:var(--lc-primary);font-family:monospace;font-size:16px;font-style:normal;opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .3s ease}
.lc-item:hover .lc-item__more em{opacity:1;transform:translateX(0)}
.lc-empty{color:#9ca3af;display:none;font-size:15px;margin:20px 0 4px;text-align:center}
.lc-list:empty + .lc-empty{display:block}
/* ---- 分页 ---- */
.lc-pager{display:flex;justify-content:center;margin-top:40px}
.lc-pager:empty{display:none}
.lc-pager .yb-pagination{display:inline-flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.lc-pager .yb-pagination a,.lc-pager .yb-pagination .cur{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-sizing:border-box;color:#4b5563;display:inline-flex;font-size:14px;height:36px;justify-content:center;min-width:36px;padding:0 6px;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.lc-pager .yb-pagination a:hover{border-color:var(--lc-primary);color:var(--lc-primary)}
.lc-pager .yb-pagination .cur{background:var(--lc-primary);border-color:var(--lc-primary);color:#fff;font-weight:600}
/* ============================ 页脚 ============================ */
.app-footer{box-sizing:border-box;width:100%;background-color:var(--footer-bg,#2563eb);color:var(--footer-fg,#fff)}
.footer-inner{margin:0 auto;max-width:1200px;padding:60px 20px 40px;box-sizing:border-box}
.footer-top{display:flex;flex-wrap:wrap;gap:60px;justify-content:space-between;margin-bottom:40px}
.footer-col{display:flex;flex-direction:column;min-width:0}
.footer-col--brand{flex:0 0 320px}
.footer-col--nav{flex:1;min-width:160px}
.footer-brand{align-items:center;display:flex;gap:14px;margin-bottom:24px}
.footer-brand__mark{background:rgba(255,255,255,.1);border-radius:8px;flex-shrink:0;height:56px;padding:4px;width:56px;box-sizing:border-box}
.footer-brand__logo-img{display:block;height:100%;object-fit:contain;width:100%}
.footer-name__main{color:var(--footer-fg);font-size:22px;font-weight:700;letter-spacing:.02em;line-height:1.25}
.footer-name__sub{color:var(--footer-fg);font-size:12px;letter-spacing:.06em;margin-top:6px;opacity:.7;text-transform:uppercase}
.footer-contact{color:var(--footer-fg);font-size:14px;line-height:1.8;opacity:.85}
.footer-contact p{margin:0 0 8px}
.footer-tel{color:inherit;font-weight:600;text-decoration:none;transition:opacity .3s}
.footer-tel:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.footer-col-title{color:var(--footer-fg);font-size:18px;font-weight:600;margin:0 0 24px;opacity:.9}
.footer-nav-grid .yb-nav{display:grid;gap:16px 24px;grid-template-columns:repeat(2,1fr);margin:0;padding:0;list-style:none}
.footer-nav-grid .yb-nav>li{list-style:none}
.footer-nav-grid .yb-nav a{color:var(--footer-fg);display:inline-block;font-size:14px;opacity:.78;text-decoration:none;transition:opacity .3s,transform .3s}
.footer-nav-grid .yb-nav a:hover{opacity:1;transform:translate(4px)}
.footer-nav-grid .yb-nav__sub{display:none}
.footer-links{align-items:center;display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--footer-fg);font-size:13px;margin:0;opacity:.78}
.footer-links__label{flex-shrink:0;opacity:.9}
.footer-links__list{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0;padding:0}
.footer-links__list:empty{display:none}
.footer-links:has(.footer-links__list:empty){display:none}
.footer-links__list a{color:var(--footer-fg);text-decoration:none;transition:opacity .3s}
.footer-links__list a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-divider{border:0;border-top:1px solid rgba(255,255,255,.15);height:0;margin:32px 0}
.footer-bottom{color:var(--footer-fg);font-size:13px;opacity:.62;text-align:center}
.footer-copyright{align-items:center;display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center;margin:0}
.footer-icp{color:inherit;text-decoration:none}
.footer-icp:hover{text-decoration:underline;text-underline-offset:3px}
/* ============================ 移动端导航开关 ============================ */
/* 开关是视觉隐藏的原生 checkbox（保持可聚焦）；移动端由它 + :checked 兄弟选择器展开导航抽屉，
   汉堡按钮 PC 端不渲染 —— 桌面顶栏 / 品牌行 / 主导航结构与样式完全不变 */
.site-header__nav-switch{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
.site-header__nav-toggle{display:none}
/* ============================ 响应式 ============================ */
@media(max-width:1024px){
  .lc-card{padding:32px 40px}
  .lc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media(max-width:768px){
  .container{padding:0 15px}
  /* 顶栏整体收起，热线改紧凑保留在品牌行（一键拨号入口不丢） */
  .site-header__top{display:none}
  .site-header__brand-inner{flex-wrap:nowrap;gap:10px;padding:10px 14px}
  .site-header__logo{flex:0 1 auto;min-width:0}
  .site-header__logo-mark{flex-shrink:1;height:40px;max-width:120px;min-width:0}
  .site-header__logo-img{height:40px}
  .site-header__logo-text{font-size:17px;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .site-header__hotline{gap:8px}
  .site-header__hotline-icon{height:34px;padding:7px;width:34px}
  .site-header__hotline-label{display:none}
  .site-header__hotline-num{font-size:17px}
  /* 汉堡按钮：三横条，展开时变关闭叉号 */
  .site-header__nav-toggle{align-items:center;cursor:pointer;display:flex;flex-direction:column;flex-shrink:0;gap:5px;height:40px;justify-content:center;width:40px}
  .site-header__nav-toggle-bar{background:var(--lc-primary);border-radius:2px;display:block;height:2px;transition:transform .25s ease,opacity .2s ease;width:22px}
  .site-header__nav-switch:checked~.site-header__brand .site-header__nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header__nav-switch:checked~.site-header__brand .site-header__nav-toggle-bar:nth-child(2){opacity:0}
  .site-header__nav-switch:checked~.site-header__brand .site-header__nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-header__nav-switch:focus-visible~.site-header__brand .site-header__nav-toggle{border-radius:8px;outline:2px solid var(--lc-primary);outline-offset:2px}
  /* 主导航：默认收起，勾选后展开为纵向抽屉；二级菜单同屏展开，入口不再丢失 */
  .site-header__nav{box-shadow:0 10px 24px rgba(0,0,0,.16);display:none;max-height:calc(100vh - 118px);overflow-y:auto}
  .site-header__nav-switch:checked~.site-header__nav{display:block}
  .site-header__nav-inner{flex-direction:column;flex-wrap:nowrap;gap:0;padding:0}
  .site-header__nav-home,.site-header__nav-inner .yb-nav>li>a{border-bottom:1px solid rgba(255,255,255,.14);border-radius:0;font-size:15px;margin-top:0;opacity:1;padding:14px 16px;text-align:left;white-space:normal}
  .site-header__nav-inner .yb-nav{flex-direction:column;gap:0;width:100%}
  .site-header__nav-inner .yb-nav>li{width:100%}
  .site-header__nav-inner .yb-nav__sub{background:transparent;border:0;border-radius:0;box-shadow:none;display:block;margin:0;min-width:0;padding:0;position:static}
  .site-header__nav-inner .yb-nav__sub li{border-bottom:1px solid rgba(255,255,255,.1);margin:0}
  .site-header__nav-inner .yb-nav__sub a{border-radius:0;color:var(--lc-on-primary);font-size:14px;opacity:.86;padding:12px 16px 12px 34px}
  .site-header__nav-inner .yb-nav__sub a:hover{background:rgba(255,255,255,.12);color:var(--lc-on-primary);opacity:1}
  .lc-banner__inner{min-height:220px;padding:42px 16px 36px}
  /* 窄屏下横向渐变的中段偏亮，标题居中会压底；提高浅端不透明度保证可读性 */
  .lc-banner__mask{background:linear-gradient(90deg,rgba(37,99,235,.74) 0,rgba(37,99,235,.62) 100%)}
  .lc-banner__title{font-size:28px}
  .lc-banner__sub{font-size:15px;margin-top:10px}
  .lc-body{padding:18px 0 48px}
  .lc-crumb{font-size:12.5px;padding:0 0 8px}
  .page-tags{padding:2px 0 16px;gap:6px}
  .page-tag{font-size:12px;padding:5px 11px}
  .lc-card{border-radius:14px;padding:16px 14px}
  .lc-list{grid-template-columns:1fr;gap:14px}
  .lc-item__img-wrap{aspect-ratio:16/9}
  .lc-item__main{gap:8px;padding:14px 16px}
  .lc-item__title{font-size:15px}
  .lc-item__summary{font-size:13px;line-height:1.7}
  .lc-pager{margin-top:28px}
  .lc-pager .yb-pagination{gap:6px}
  .lc-pager .yb-pagination a,.lc-pager .yb-pagination .cur{height:32px;min-width:32px;font-size:13px}
  .footer-inner{padding:26px 14px 20px}
  .footer-top{flex-direction:column;gap:40px}
  .footer-col--brand{flex:auto}
  .footer-bottom{font-size:12px;opacity:.75}
}

/* ============================ 返回顶部 ============================ */
/* 固定右侧，滚动超过一屏由脚本加 is-show 淡入；主题色跟随 --pd-primary */
.yb-gotop{align-items:center;background:var(--pd-primary,#2563eb);border:0;border-radius:50%;bottom:32px;box-shadow:0 8px 20px rgba(37,99,235,.28);color:#fff;cursor:pointer;display:flex;height:46px;justify-content:center;opacity:0;pointer-events:none;position:fixed;right:24px;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,background .25s ease;width:46px;z-index:90}
.yb-gotop.is-show{opacity:1;pointer-events:auto;transform:translateY(0)}
.yb-gotop:hover{background:var(--pd-primary-deep,#1e40af)}
.yb-gotop:focus-visible{outline:2px solid rgba(37,99,235,.45);outline-offset:2px}
.yb-gotop svg{height:20px;width:20px}
@media (max-width:768px){
  .yb-gotop{bottom:20px;height:42px;right:14px;width:42px}
}
