/* 客户案例（khal 模块）列表页 + 详情页样式，中英文站共用 */

/* ========== 列表页 ========== */
/* 没有上传栏目大图时，banner 用主题色渐变兜底 */
._caseList_ .inner-banner .img-wrap .img-box {
  background: linear-gradient(120deg, #2f8f3a 0%, var(--themeColor) 55%, #7fcf6f 100%);
}
/* 浅色背景图上的白色标题加一点阴影，保证可读 */
._caseList_ .inner-banner .text-wrap ._content_ .inner-title,
._caseList_ .inner-banner .text-wrap ._content_ .inner-des {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
._caseList_ .caseList-intro {
  padding: 2rem 0 6rem;
}
._caseList_ .caseList-intro-text {
  max-width: 110rem;
  margin: 0 auto;
  color: #333;
  font-size: var(--fz-18, 16px);
  line-height: 1.9;
  text-align: center;
}
/* 列表图只有一张：取消前后两张图的翻转效果，图片铺满 */
._caseList_ .serviceList-main ._content_ .list > li .item .img-wrap-container .img-wrap.single {
  display: block;
  background-color: #eef3ee;
}
._caseList_ .serviceList-main ._content_ .list > li .item .img-wrap-container .img-wrap.single .img-box.front,
._caseList_ .serviceList-main ._content_ .list > li .item .img-wrap-container .img-wrap.single:hover .img-box.front {
  clip-path: none;
  transform: none;
  overflow: hidden;
}
._caseList_ .serviceList-main ._content_ .list > li .item .img-wrap-container .img-wrap.single .img-box.front .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform .6s ease-out;
}
._caseList_ .serviceList-main ._content_ .list > li .item .img-wrap-container .img-wrap.single:hover .img-box.front .img {
  transform: scale(1.05);
}
._caseList_ .serviceList-main ._content_ .list > li.caseList-empty {
  padding: 8rem 0;
  color: #999;
  font-size: 16px;
  text-align: center;
}
._caseList_ .caseList-pages {
  margin-top: var(--block-gap, 7.5rem);
}


/* ========== 详情页（按《客户案例详情页排版》：场景图 → 标题 → 痛点深色块 → 解决方案左文右图 → 应用成效左图右文 → 合作复购小深色条 → 产品色块） ========== */
._caseDetail_ {
  --case-dark: #535444;   /* 参考稿深色块 */
  --case-accent: #c9eaa2; /* 深色块图标 */
  --case-cream: #f5f4f0;  /* 参考稿浅色块 */
  color: #333;
}
._caseDetail_ ._container_,
._caseList_ .caseList-intro ._container_ {
  width: 160rem;
  max-width: calc(100% - 30px);
}
._caseDetail_ ._container_ ._content_ {
  display: block;
}
@media screen and (max-width: 1024px) {
  ._caseDetail_ ._container_,
  ._caseList_ .caseList-intro ._container_ {
    width: 100%;
    max-width: none;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* 富文本通用 */
._caseDetail_ .caseDetail-rich {
  font-size: max(20.8px, 2.86rem);
  font-weight: 400;
  line-height: 1.8;
}
._caseDetail_ .caseDetail-rich p {
  margin: 0 0 1em;
}
._caseDetail_ .caseDetail-rich > :last-child {
  margin-bottom: 0;
}
._caseDetail_ .caseDetail-rich ul,
._caseDetail_ .caseDetail-rich ol {
  margin: 0 0 1em;
  padding-left: 1.2em;
}
._caseDetail_ .caseDetail-rich ul {
  list-style: disc;
}
._caseDetail_ .caseDetail-rich ol {
  list-style: decimal;
}
._caseDetail_ .caseDetail-rich li {
  margin-bottom: .5em;
}
._caseDetail_ .caseDetail-rich strong,
._caseDetail_ .caseDetail-rich b {
  font-weight: 700;
}
._caseDetail_ .caseDetail-rich img {
  max-width: 100%;
  height: auto;
}

/* 配图组：统一裁切比例；1 张 4:3，2 张并排，3 张一大两小，4 张田字格 */
._caseDetail_ .caseDetail-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
._caseDetail_ .caseDetail-img {
  position: relative;
  height: 0;
  padding-top: 75%;
  overflow: hidden;
  background: rgba(0, 0, 0, .06);
}
._caseDetail_ .caseDetail-img .img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._caseDetail_ .caseDetail-media.n-1 {
  grid-template-columns: 1fr;
}
._caseDetail_ .caseDetail-media.n-2 .caseDetail-img {
  padding-top: 120%;
}
._caseDetail_ .caseDetail-media.n-3 .caseDetail-img:first-child {
  grid-column: 1 / -1;
  padding-top: 50%;
}
/* 上文下图：一行排开 */
._caseDetail_ .caseDetail-media.is-row {
  grid-template-columns: repeat(3, 1fr);
}
._caseDetail_ .caseDetail-media.is-row.n-1 {
  grid-template-columns: 1fr;
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
}
._caseDetail_ .caseDetail-media.is-row.n-1 .caseDetail-img {
  padding-top: 56.25%;
}
._caseDetail_ .caseDetail-media.is-row.n-2 {
  grid-template-columns: repeat(2, 1fr);
}
._caseDetail_ .caseDetail-media.is-row.n-4 {
  grid-template-columns: repeat(4, 1fr);
}
._caseDetail_ .caseDetail-media.is-row.n-2 .caseDetail-img,
._caseDetail_ .caseDetail-media.is-row.n-3 .caseDetail-img,
._caseDetail_ .caseDetail-media.is-row.n-4 .caseDetail-img,
._caseDetail_ .caseDetail-media.is-row.n-many .caseDetail-img {
  grid-column: auto;
  padding-top: 75%;
}

/* 1. 场景图 */
._caseDetail_ .caseDetail-hero .img-box {
  position: relative;
  height: 0;
  padding-top: 50%;
  overflow: hidden;
  background: #eee;
}
._caseDetail_ .caseDetail-hero .img-box .img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2. 标题居中；客户背景 + 使用场景文字居左 */
._caseDetail_ .caseDetail-intro {
  padding: 10rem 0 11rem;
  text-align: center;
}
._caseDetail_ .caseDetail-tag {
  display: inline-block;
  padding: .8rem 2.4rem;
  margin-bottom: 3.6rem;
  background: var(--themeColor);
  color: #fff;
  font-size: 19.5px;
  font-weight: 600;
  letter-spacing: .06em;
}
._caseDetail_ .caseDetail-title {
  max-width: 150rem;
  text-wrap: balance;
  margin: 0 auto;
  color: #333;
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 1.2;
}
._caseDetail_ .caseDetail-subtitle {
  text-wrap: balance;
  margin-top: 1.4rem;
  color: #333;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.35;
}
._caseDetail_ .caseDetail-intro-text {
  max-width: 128rem;
  margin: 5.6rem auto 0;
  color: #333;
  font-size: max(20.8px, 3.12rem);
  text-align: left;
  line-height: 1.85;
}
._caseDetail_ .caseDetail-intro-text p {
  margin-bottom: .8em;
}

/* 深色块通用（客户痛点 / 持续合作与复购）
   客户痛点、解决方案、应用成效三块按参考站 cardwellcreative.com 的固定尺寸：
   标题 34px、正文 20.8px（原 16px 放大 30%）、内容宽 1160px（左右各 555px，间距 50px），不随屏幕放大 */
._caseDetail_ .caseDetail-band {
  background: var(--case-dark);
  color: #fff;
}
._caseDetail_ .caseDetail-band-icon {
  display: block;
  width: 76px;
  height: 38px;
  margin: 0 auto 16px;
  color: var(--case-accent);
}
._caseDetail_ .caseDetail-band-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
._caseDetail_ .caseDetail-band-title {
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
}
._caseDetail_ .caseDetail-challenge .caseDetail-rich,
._caseDetail_ .caseDetail-split .caseDetail-rich {
  font-size: 20.8px;
  line-height: 1.5;
}
._caseDetail_ .caseDetail-band .caseDetail-rich {
  color: rgba(255, 255, 255, .92);
}
._caseDetail_ .caseDetail-band .caseDetail-rich li {
  font-weight: 600;
  color: #fff;
}

/* 3. 客户痛点 */
._caseDetail_ .caseDetail-challenge {
  padding: 125px 0;
}
._caseDetail_ .caseDetail-challenge .caseDetail-band-head {
  text-align: center;
}
/* 无图 / 上文下图：左标题 右文字（参考站 Challenge：218px + 30px + 714px） */
._caseDetail_ .caseDetail-challenge.is-text .caseDetail-challenge-main,
._caseDetail_ .caseDetail-challenge.is-stack .caseDetail-challenge-main {
  display: grid;
  grid-template-columns: 218px minmax(0, 714px);
  gap: 30px;
  align-items: start;
  justify-content: center;
  max-width: 962px;
  margin: 0 auto;
}
/* 左边文字 + 右边图片 */
._caseDetail_ .caseDetail-challenge.is-side ._content_ {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
}
._caseDetail_ .caseDetail-challenge.is-side .caseDetail-band-head {
  margin-bottom: 20px;
  text-align: left;
}
._caseDetail_ .caseDetail-challenge.is-side .caseDetail-band-icon {
  margin-left: 0;
}
/* 上面文字 + 下面图片 */
._caseDetail_ .caseDetail-challenge.is-stack .caseDetail-media {
  max-width: 962px;
  margin: 60px auto 0;
}

/* 4/5. 解决方案（左文右图）、应用成效（左图右文） */
._caseDetail_ .caseDetail-split {
  padding: 60px 0;
  background: #fff;
}
._caseDetail_ .caseDetail-band + .caseDetail-split,
._caseDetail_ .caseDetail-intro + .caseDetail-split {
  padding-top: 120px;
}
._caseDetail_ .caseDetail-result {
  padding-bottom: 120px;
}
._caseDetail_ .caseDetail-split ._content_ {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
}
._caseDetail_ .caseDetail-split.is-reverse ._content_ > .caseDetail-media {
  order: -1;
}
._caseDetail_ .caseDetail-split ._content_ > .caseDetail-split-text:only-child {
  grid-column: 1 / -1;
  max-width: 760px;
}
._caseDetail_ .caseDetail-split-title {
  margin-bottom: 20px;
  color: #333;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
}
._caseDetail_ .caseDetail-split .caseDetail-rich {
  color: #333;
}
/* 三块里的配图组间距同步缩小 */
._caseDetail_ .caseDetail-challenge .caseDetail-media,
._caseDetail_ .caseDetail-split .caseDetail-media {
  gap: 12px;
}

/* 6. 持续合作与复购：深色小条（一句话） */
._caseDetail_ .caseDetail-coop {
  padding: 56px 0;
  text-align: center;
}
._caseDetail_ .caseDetail-coop .caseDetail-band-icon {
  width: 60px;
  height: 30px;
  margin-bottom: 12px;
}
._caseDetail_ .caseDetail-coop .caseDetail-band-title {
  font-size: 28px;
}
._caseDetail_ .caseDetail-coop-text {
  max-width: 860px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .92);
  font-size: 23.4px;
  line-height: 1.6;
}

/* 7. 对应产品介绍链接（浅色色块，一行显示、左右切换） */
._caseDetail_ .caseDetail-products {
  padding: 90px 0 100px;
  background: var(--case-cream);
  text-align: center;
}
._caseDetail_ .caseDetail-products-title {
  color: #333;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
}
._caseDetail_ .caseDetail-products-des {
  margin-top: 12px;
  color: #666;
  font-size: 20.8px;
}
._caseDetail_ .caseDetail-products-box {
  position: relative;
  max-width: 1160px;
  margin: 44px auto 0;
}
._caseDetail_ .caseDetail-products-list {
  --gap: 24px;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
._caseDetail_ .caseDetail-products-list::-webkit-scrollbar {
  display: none;
}
._caseDetail_ .caseDetail-products-list > li {
  flex: 0 0 calc((100% - var(--gap) * 3) / 4);
  scroll-snap-align: start;
}
/* 不足一行时居中（用 auto 外边距，溢出时不会被裁掉） */
._caseDetail_ .caseDetail-products-list > li:first-child {
  margin-left: auto;
}
._caseDetail_ .caseDetail-products-list > li:last-child {
  margin-right: auto;
}
._caseDetail_ .caseDetail-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 18px 18px 24px;
  background: #fff;
  color: #333;
  transition: box-shadow .3s ease;
}
._caseDetail_ .caseDetail-product:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
}
._caseDetail_ .caseDetail-product .img-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  background: #f5f5f5;
}
._caseDetail_ .caseDetail-product .img-box .img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
._caseDetail_ .caseDetail-product:hover .img-box .img {
  transform: scale(1.04);
}
._caseDetail_ .caseDetail-product .name {
  flex: 1;
  margin: 16px 0 14px;
  font-size: 20.8px;
  font-weight: 700;
  line-height: 1.4;
}
._caseDetail_ .caseDetail-product .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 22px;
  border-radius: 99px;
  background: var(--themeColor);
  color: #fff;
  font-size: 18.2px;
  font-weight: 600;
}
._caseDetail_ .caseDetail-product .btn .ld-iconfont {
  font-size: 15.6px;
}
/* 左右切换按钮 */
._caseDetail_ .caseDetail-products-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-top: -22px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
._caseDetail_ .caseDetail-products-btn.prev {
  left: -66px;
}
._caseDetail_ .caseDetail-products-btn.next {
  right: -66px;
}
._caseDetail_ .caseDetail-products-btn:hover {
  border-color: var(--themeColor);
  background: var(--themeColor);
  color: #fff;
}
._caseDetail_ .caseDetail-products-btn .ld-iconfont {
  font-size: 16px;
}
._caseDetail_ .caseDetail-products-btn.is-disabled {
  opacity: .35;
  pointer-events: none;
}
._caseDetail_ .caseDetail-products-box.no-scroll .caseDetail-products-btn {
  display: none;
}

/* 上一个 / 下一个 */
._caseDetail_ .caseDetail-pager {
  padding: 4rem 0;
  border-top: 1px solid #eee;
}
._caseDetail_ .caseDetail-pager-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  font-size: 19.5px;
}
._caseDetail_ .caseDetail-pager-inner .prev,
._caseDetail_ .caseDetail-pager-inner .next {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._caseDetail_ .caseDetail-pager-inner .next {
  text-align: right;
}
._caseDetail_ .caseDetail-pager-inner a {
  color: #444;
}
._caseDetail_ .caseDetail-pager-inner a:hover {
  color: var(--themeColor);
}
._caseDetail_ .caseDetail-pager-inner .back {
  flex-shrink: 0;
  padding: 1rem 2.8rem;
  border-radius: 99rem;
  background: var(--themeColor);
  color: #fff;
}
._caseDetail_ .caseDetail-pager-inner .back:hover {
  color: #fff;
  opacity: .9;
}

/* 窄屏：相关产品左右按钮收进内容区 */
@media screen and (max-width: 1320px) {
  ._caseDetail_ .caseDetail-products-box {
    padding: 0 56px;
  }
  ._caseDetail_ .caseDetail-products-btn.prev {
    left: 0;
  }
  ._caseDetail_ .caseDetail-products-btn.next {
    right: 0;
  }
  ._caseDetail_ .caseDetail-products-box.no-scroll {
    padding: 0;
  }
}

/* 平板 / 手机 */
@media screen and (max-width: 1024px) {
  ._caseDetail_ .caseDetail-hero .img-box {
    padding-top: 62.5%;
  }
  ._caseDetail_ .caseDetail-intro {
    padding: 5rem 0 6rem;
  }
  ._caseDetail_ .caseDetail-title {
    font-size: 3.2rem;
  }
  ._caseDetail_ .caseDetail-subtitle {
    font-size: 2.2rem;
  }
  ._caseDetail_ .caseDetail-intro-text {
    margin-top: 3.2rem;
    text-align: left;
  }
  ._caseDetail_ .caseDetail-band-title,
  ._caseDetail_ .caseDetail-split-title,
  ._caseDetail_ .caseDetail-products-title {
    font-size: 26px;
  }
  ._caseDetail_ .caseDetail-challenge {
    padding: 56px 0;
  }
  ._caseDetail_ .caseDetail-split,
  ._caseDetail_ .caseDetail-band + .caseDetail-split,
  ._caseDetail_ .caseDetail-intro + .caseDetail-split {
    padding: 28px 0;
  }
  ._caseDetail_ .caseDetail-band + .caseDetail-split {
    padding-top: 56px;
  }
  ._caseDetail_ .caseDetail-result {
    padding-bottom: 56px;
  }
  ._caseDetail_ .caseDetail-products {
    padding: 56px 0;
  }
  ._caseDetail_ .caseDetail-challenge.is-text .caseDetail-challenge-main,
  ._caseDetail_ .caseDetail-challenge.is-stack .caseDetail-challenge-main,
  ._caseDetail_ .caseDetail-challenge.is-side ._content_,
  ._caseDetail_ .caseDetail-split ._content_ {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  ._caseDetail_ .caseDetail-challenge .caseDetail-band-head,
  ._caseDetail_ .caseDetail-challenge.is-side .caseDetail-band-head {
    margin-bottom: 0;
    text-align: left;
  }
  ._caseDetail_ .caseDetail-challenge .caseDetail-band-icon {
    width: 60px;
    height: 30px;
    margin-left: 0;
  }
  ._caseDetail_ .caseDetail-challenge.is-stack .caseDetail-media {
    margin-top: 24px;
  }
  ._caseDetail_ .caseDetail-split.is-reverse ._content_ > .caseDetail-media {
    order: 0;
  }
  ._caseDetail_ .caseDetail-split-title {
    margin-bottom: 14px;
  }
  ._caseDetail_ .caseDetail-media.is-row,
  ._caseDetail_ .caseDetail-media.is-row.n-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  ._caseDetail_ .caseDetail-coop {
    padding: 40px 0;
  }
  ._caseDetail_ .caseDetail-coop .caseDetail-band-title {
    font-size: 22px;
  }
  ._caseDetail_ .caseDetail-coop-text {
    font-size: 20.8px;
  }
  ._caseDetail_ .caseDetail-products-box,
  ._caseDetail_ .caseDetail-products-box.no-scroll {
    margin-top: 28px;
    padding: 0;
  }
  ._caseDetail_ .caseDetail-products-list {
    --gap: 12px;
  }
  ._caseDetail_ .caseDetail-products-list > li {
    flex-basis: calc((100% - var(--gap)) / 2);
  }
  ._caseDetail_ .caseDetail-products-btn {
    width: 36px;
    height: 36px;
    margin-top: -18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  }
  ._caseDetail_ .caseDetail-products-btn.prev {
    left: -6px;
  }
  ._caseDetail_ .caseDetail-products-btn.next {
    right: -6px;
  }
  ._caseDetail_ .caseDetail-product {
    padding: 12px 12px 16px;
  }
  ._caseDetail_ .caseDetail-product .name {
    margin: 12px 0 10px;
    font-size: 19.5px;
  }
  ._caseDetail_ .caseDetail-pager-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
  }
  ._caseDetail_ .caseDetail-pager-inner .next {
    text-align: left;
  }
  ._caseDetail_ .caseDetail-pager-inner .back {
    align-self: center;
  }
}