/* ============================================================
   掌上团奢 / TOBRT 客户案例页
   套用 28jw.cn/case 结构与视觉：subpage-banner + sCase-nav
   + sCase-list 四角描边卡片 + sCase-tail
   暗色头部/底部 + 浅色内容区，保持品牌一致
   ============================================================ */

.case-page { font-family: "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif; color: #2a2620; background: #f4f1ea; }

/* ---------- 头部（暗色，保持品牌） ---------- */
.case-header { background: #15110b; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 18px rgba(0,0,0,.25); }
.case-header__inner { max-width: 1200px; margin: 0 auto; height: 72px; display: flex; align-items: center; padding: 0 24px; }
.case-logo img { height: 38px; width: auto; display: block; }
.case-nav { flex: 1; display: flex; justify-content: center; gap: 30px; }
.case-nav__link { color: rgba(255,255,255,.78); font-size: 15px; text-decoration: none; position: relative; padding: 6px 0; transition: color .3s; }
.case-nav__link:hover { color: #fff; }
.case-nav__link.is-active { color: #d4af37; }
.case-nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #d4af37; }
.case-cta { background: linear-gradient(135deg,#d4af37,#b8893a); color: #1a140a; font-size: 14px; font-weight: 700; padding: 9px 20px; border-radius: 22px; text-decoration: none; transition: transform .3s, box-shadow .3s; }
.case-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(212,175,55,.35); }

/* ---------- subpage 容器 ---------- */
.subpage { position: relative; }
.subpage-banner { position: relative; height: 460px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.subpage-banner .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.subpage-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,9,6,.62), rgba(12,9,6,.74)); z-index: 1; }
.subpage-banner .contain { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 20px; max-width: 920px; }
.subpage-banner .dt .fzx72 { font-size: 54px; font-weight: 800; letter-spacing: 6px; margin: 0 0 14px; }
.subpage-banner .dt .fzx72 i { font-style: normal; display: inline-block; }
.subpage-banner .dt .fzx56 { font-size: 22px; font-weight: 400; letter-spacing: 2px; margin: 0; color: rgba(255,255,255,.92); }
.subpage-banner .dt .fzx56 i { font-style: normal; }
.subpage-banner .hr { width: 64px; height: 2px; background: #d4af37; margin: 26px auto; }
.subpage-banner .dd .p1 { font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.8); margin: 0; }

.subpage-banner--detail { height: 360px; }
.subpage-banner--detail .dt .fzx56 { font-size: 34px; font-weight: 700; }

.TopLine { height: 0; border-top: 1px solid rgba(0,0,0,.06); }

.subpage-main { max-width: 1200px; margin: 0 auto; padding: 56px 24px 80px; }

/* ---------- 分类筛选 ---------- */
.sCase-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; margin-bottom: 46px; }
.sCase-nav .btn { font-size: 15px; color: #6b6052; text-decoration: none; padding: 9px 22px; border-radius: 24px; cursor: pointer; transition: all .3s; white-space: nowrap; }
.sCase-nav .btn:hover { color: #1a140a; background: rgba(212,175,55,.12); }
.sCase-nav .btn.on { color: #1a140a; background: linear-gradient(135deg,#d4af37,#b8893a); font-weight: 700; box-shadow: 0 6px 16px rgba(212,175,55,.3); }
.sCase-nav .divide { width: 1px; height: 18px; background: rgba(0,0,0,.12); margin: 0 6px; }

/* ---------- 案例列表 ---------- */
.sCase-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 26px; }
.sCase-list.cle::after { content: ""; display: block; clear: both; }
.sCase-list .item { width: calc((100% - 52px) / 3); margin-bottom: 8px; }
.sCase-list .itemInner { position: relative; }

.sCase-list .link.pic { display: block; position: relative; overflow: hidden; border-radius: 6px; background: #1a140a; text-decoration: none; }
.sCase-list .link.pic img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.sCase-list .link.pic:hover img { transform: scale(1.07); }

/* 四角描边悬停（套用 28jw .css3 .border 效果） */
.sCase-list .link.pic .css3 { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sCase-list .link.pic .css3 .border { position: absolute; background: #d4af37; opacity: 0; transition: all .55s cubic-bezier(.16,1,.3,1); }
.sCase-list .link.pic .css3 .b_t,
.sCase-list .link.pic .css3 .b_b { left: 16px; height: 1.5px; width: 0; }
.sCase-list .link.pic .css3 .b_t { top: 16px; }
.sCase-list .link.pic .css3 .b_b { bottom: 16px; }
.sCase-list .link.pic .css3 .b_l,
.sCase-list .link.pic .css3 .b_r { top: 16px; width: 1.5px; height: 0; }
.sCase-list .link.pic .css3 .b_l { left: 16px; }
.sCase-list .link.pic .css3 .b_r { right: 16px; }
.sCase-list .link.pic:hover .css3 .border { opacity: 1; }
.sCase-list .link.pic:hover .css3 .b_t,
.sCase-list .link.pic:hover .css3 .b_b { width: calc(100% - 32px); }
.sCase-list .link.pic:hover .css3 .b_l,
.sCase-list .link.pic:hover .css3 .b_r { height: calc(100% - 32px); }

/* 标题浮现 */
.sCase-list .link.pic .contain { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 22px 20px; background: linear-gradient(transparent, rgba(10,8,6,.82)); }
.sCase-list .link.pic .contain h3 { margin: 0; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .5px; transform: translateY(8px); opacity: .9; transition: transform .45s, opacity .45s; }
.sCase-list .link.pic:hover .contain h3 { transform: translateY(0); opacity: 1; }

/* ---------- 底部咨询 CTA ---------- */
.sCase-tail { margin-top: 70px; text-align: center; background: #fff; border-radius: 12px; padding: 48px 24px; box-shadow: 0 12px 40px rgba(0,0,0,.06); }
.sCase-tail .dt h2 { font-size: 24px; font-weight: 700; color: #1a140a; margin: 0 0 22px; }
.sCase-tail .consultBtn { display: inline-block; background: linear-gradient(135deg,#d4af37,#b8893a); color: #1a140a; font-weight: 700; text-decoration: none; padding: 13px 34px; border-radius: 26px; transition: transform .3s, box-shadow .3s; }
.sCase-tail .consultBtn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(212,175,55,.35); }
.sCase-tail .dd { display: flex; gap: 22px; margin-top: 38px; }
.sCase-tail .dd .link { flex: 1; display: block; position: relative; border-radius: 10px; overflow: hidden; text-decoration: none; min-height: 150px; }
.sCase-tail .dd .link .pic { height: 150px; overflow: hidden; }
.sCase-tail .dd .link .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.sCase-tail .dd .link:hover .pic img { transform: scale(1.06); }
.sCase-tail .dd .link .contain { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10,8,6,.5); color: #fff; }
.sCase-tail .dd .link .contain p { margin: 2px 0; font-size: 18px; font-weight: 600; }

/* ---------- 详情页 ---------- */
.case-detail__media { border-radius: 12px; overflow: hidden; margin-bottom: 40px; box-shadow: 0 16px 50px rgba(0,0,0,.12); }
.case-detail__media img { width: 100%; max-height: 520px; object-fit: cover; display: block; }
.case-detail__body { max-width: 820px; margin: 0 auto 60px; text-align: center; }
.case-detail__cat { display: inline-block; font-size: 13px; color: #b8893a; border: 1px solid rgba(184,137,58,.4); padding: 4px 14px; border-radius: 14px; margin-bottom: 16px; }
.case-detail__title { font-size: 34px; font-weight: 800; color: #1a140a; margin: 0 0 18px; }
.case-detail__desc { font-size: 16px; line-height: 2; color: #5a5145; margin: 0 0 28px; }
.case-detail__back { display: inline-flex; align-items: center; gap: 8px; color: #1a140a; text-decoration: none; font-weight: 600; border: 1px solid rgba(0,0,0,.15); padding: 11px 26px; border-radius: 24px; transition: all .3s; }
.case-detail__back:hover { background: #1a140a; color: #fff; border-color: #1a140a; }
.case-detail__more { margin-top: 30px; }
.case-detail__more h3 { font-size: 20px; color: #1a140a; text-align: center; margin: 0 0 28px; }
.case-detail__more .sCase-list .item { width: calc((100% - 52px) / 3); }
.case-detail__empty { text-align: center; padding: 80px 20px; }
.case-detail__empty h1 { font-size: 30px; color: #1a140a; margin: 0 0 12px; }
.case-detail__empty p { color: #6b6052; margin: 0 0 24px; }

/* ---------- 底部 ---------- */
.case-footer { background: #15110b; padding: 26px 24px; }
.case-footer__inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.case-footer__inner p { margin: 0; color: rgba(255,255,255,.6); font-size: 13px; }
.case-footer__inner a { color: rgba(255,255,255,.75); text-decoration: none; }
.case-footer__inner a:hover { color: #d4af37; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .sCase-list .item, .case-detail__more .sCase-list .item { width: calc((100% - 26px) / 2); }
  .subpage-banner { height: 380px; }
  .subpage-banner .dt .fzx72 { font-size: 40px; }
}
@media (max-width: 640px) {
  .case-nav { display: none; }
  .sCase-list .item, .case-detail__more .sCase-list .item { width: 100%; }
  .subpage-banner { height: 300px; }
  .subpage-banner .dt .fzx72 { font-size: 30px; letter-spacing: 3px; }
  .subpage-banner .dt .fzx56 { font-size: 16px; }
  .sCase-tail .dd { flex-direction: column; }
  .subpage-main { padding: 36px 16px 60px; }
}