/* ==========================================================================
   台宝泵业 · 案例展示（9 个行业栏目页列表 + 首页成功案例模块）
   独立文件，避免与 site.css 并行编辑冲突；全部硬编码取值，不依赖 CSS 变量
   配套模板：template/taibao2026/pc/lists_case.htm、index.htm（#tbCases）
   ========================================================================== */

/* ---------- 通用：图片 + 标题卡片网格 ---------- */
.casegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.casegrid__card{
  display:block;overflow:hidden;background:#fff;
  border:1px solid #E7EAF0;border-radius:14px;
  transition:.24s cubic-bezier(.22,.7,.28,1);
}
.casegrid__card:hover{
  border-color:#2E78FF;transform:translateY(-4px);
  box-shadow:0 22px 44px -24px rgba(11,34,80,.34);
}
.casegrid__img{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:4/3;background:#F0F2F6;
}
.casegrid__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.7,.28,1);
}
.casegrid__card:hover .casegrid__img img{transform:scale(1.045)}
.casegrid__t{
  margin:0;padding:14px 16px 16px;
  font-size:14px;line-height:1.55;font-weight:600;color:#0E1726;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:58px;
}
.casegrid__card:hover .casegrid__t{color:#0846C4}

@media(max-width:1024px){
  .casegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media(max-width:640px){
  .casegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .casegrid__t{padding:11px 12px 13px;font-size:12.5px;line-height:1.5;min-height:50px}
}

/* ---------- 首页：成功案例模块 ---------- */
.tcases__wrap{display:grid;grid-template-columns:236px 1fr;gap:28px;align-items:start}
.tcases__side{
  position:sticky;top:96px;padding:22px;
  border:1px solid #E7EAF0;border-radius:14px;background:#F6F8FB;
}
.tcases__side-t{font-size:12px;font-weight:700;letter-spacing:.08em;color:#8B95A7;margin-bottom:14px}
.tcases__tags{display:flex;flex-direction:column;gap:8px}
.tcases__tag{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border:1px solid #E7EAF0;border-radius:10px;background:#fff;
  font-size:13.5px;font-weight:600;color:#0E1726;transition:.2s cubic-bezier(.22,.7,.28,1);
}
.tcases__tag span{font-size:11.5px;font-weight:400;color:#8B95A7}
.tcases__tag:hover{border-color:#2E78FF;background:#EEF4FF;color:#0846C4}
.tcases__tag:hover span{color:#0B5CFF}

@media(max-width:1024px){
  .tcases__wrap{grid-template-columns:1fr;gap:20px}
  .tcases__side{position:static}
  .tcases__tags{flex-direction:row;flex-wrap:wrap}
  .tcases__tag{padding:9px 14px}
  .tcases__tag span{display:none}
}
/* ---------- 首页：行业 tab 点击切换（不跳转） ---------- */
.tcases__tag{
  cursor:pointer;text-decoration:none;
  -webkit-user-select:none;user-select:none;
}
.tcases__tag.is-on{
  border-color:#2E78FF;background:#2E78FF;color:#fff;
  box-shadow:0 12px 26px -14px rgba(11,92,255,.72);
}
.tcases__tag.is-on b{color:#fff}
.tcases__tag.is-on:hover{border-color:#1E6BF5;background:#1E6BF5;color:#fff}
/* 右侧所有行业面板叠在同一格：容器高度自动取最高的那组，
   切换行业时高度恒定，不跳动（无需写死魔法数字） */
.tcases__main{display:grid;align-items:start}
.tcases__panel{
  grid-area:1/1;
  animation:tcFade .28s cubic-bezier(.22,.7,.28,1);
}
.tcases__panel[hidden]{
  display:block;visibility:hidden;pointer-events:none;animation:none;
}
@keyframes tcFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tcases__more{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:13px;font-weight:600;color:#0B5CFF;
}
.tcases__more:hover{color:#0846C4}
.tcases__more i{
  width:17px;height:17px;border-radius:50%;background:currentColor;
  position:relative;flex:none;
}
.tcases__more i::after{
  content:"";position:absolute;left:5.5px;top:6px;width:4px;height:4px;
  border-top:1.4px solid #fff;border-right:1.4px solid #fff;
  transform:rotate(45deg);
}

/* 移动端/平板：不叠放，正常流式排列（横向 tab，切到哪个看哪个） */
@media(max-width:1024px){
  .tcases__main{display:block}
  .tcases__panel[hidden]{display:none;visibility:hidden}
}
@media(prefers-reduced-motion:reduce){
  .casegrid__card,.casegrid__img img{transition:none}
  .casegrid__card:hover{transform:none}
  .tcases__panel{animation:none}
}