/* 服务案例页面样式 - fwal.css */
/* 顶部导航 header / CTA / 页脚 footer 为全站公共样式，统一放在 style.css */

/* ==================== 首屏 ==================== */
/* 高度 / 定位 / 字号 / 按钮等结构样式统一在公共 style.css 的 .hero 系列（内页共用同一套：
   hero 560 高、文字块 @top188、标题 48px、副标题 24px、按钮 145×48 @top356），这里只定义本页背景 */
.hero {
  background: #eef3fb url('../img/fwal/61678750.jpg') 50% 50%/cover no-repeat;
}

/* ==================== 案例列表 ==================== */
/* 设计稿：标题顶 80、筛选行 180/215、卡片顶 285、分页器 1113，区块总高 1174 */
.cases {
  padding: 80px 0 2px;
  background: #fff;
}

.cases-title {
  text-align: center;
  line-height: 40px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #1d2129;
}

.filters {
  margin-top: 57px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 28px;
}

.filter-row+.filter-row {
  margin-top: 12px;
}

/* 标签盒固定 82，列表因此从容器 x110 起（同设计稿） */
.filter-label {
  width: 82px;
  flex: 0 0 82px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #8d97a8;
  white-space: nowrap;
}

/* 设计稿用连续   做间距：1 个单位 ≈ 8.5px */
.filter-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.filter-list li+li {
  margin-left: 67px;
}

.filter-list[data-group="industry"] li:nth-child(5) {
  margin-left: 63px;
}

.filter-list[data-group="biz"] li:nth-child(3),
.filter-list[data-group="biz"] li:nth-child(4) {
  margin-left: 107px;
}

.filter-list[data-group="biz"] li:nth-child(5) {
  margin-left: 102px;
}

.filter-list li {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #1d2129;
  cursor: pointer;
  transition: color .2s;
}

.filter-list li:hover {
  color: #317af7;
}

.filter-list li.active {
  color: #317af7;
  font-weight: 700;
}

/* 4×2 网格：卡 340×382、列间距 12、行间距 23 */
.case-grid {
  display: grid;
  grid-template-columns: repeat(4, 340px);
  gap: 23px 12px;
  margin-top: 48px;
  justify-content: start;
}

/* 卡片：340×382，内边距 20，封面 300×167 内缩 + 16 圆角 */
.case-item {
  position: relative;
  width: 340px;
  height: 382px;
  padding: 20px 20px 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 10px rgba(226, 234, 246, .86);
}

.case-cover {
  display: block;
  height: 167px;
  border-radius: 16px;
  overflow: hidden;
}

.case-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* case-cover-zoom：悬停整张卡片时封面图轻微放大（1 → 1.06）。
   只动 transform ⇒ 不参与布局，卡片 rect / 网格轨道 / 整页 docH 一个像素都不变；
   放大被 .case-cover 自身的圆角 + overflow:hidden 裁在封面内，不需要给 .case-item 加 overflow。
   ⚠️ 不加 will-change：会把 img 提前提为合成层，静止态的抗锯齿相位就变了。 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .case-item:hover .case-cover img {
    transform: scale(1.06);
  }
}

.case-info {
  display: block;
}

/* 标签：胶囊 30 高、最小宽 80、字号 14（设计稿卡内 y210） */
.case-tags {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.case-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 30px;
  padding: 0 12px;
  border-radius: 200px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

.case-tags span.tag--w100 {
  min-width: 100px;
}

.tag--green {
  background: rgb(236, 251, 251);
  color: #36c17a;
}

.tag--pink {
  background: rgb(250, 233, 233);
  color: #d47878;
}

.tag--cyan {
  background: rgb(236, 251, 251);
  color: #43b1f8;
}

.tag--orange {
  background: rgb(252, 229, 205);
  color: #ff9900;
}

.tag--blue {
  background: rgb(231, 241, 255);
  color: #3d63fc;
}

.tag--purple {
  background: #DDD9FF;
  color: #8078c4;
}

/* 描述：300×3 行，14px / 行高 21（设计稿卡内 y266） */
.case-info p {
  margin: 27px 0 0 1px;
  width: 300px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 14px;
  color: #636e80;
  line-height: 21px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底部一行：图标+立即咨询 靠左，了解详情 靠右（设计稿卡内 y336，右端超出内边距 12） */
.case-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  margin: 6px -12px 0 0;
}

.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  color: #317af7;
}

.mini-btn img {
  width: 18px;
  height: 18px;
  margin-left: 1px;
  object-fit: contain;
  flex-shrink: 0;
}

.mini-btn:hover {
  opacity: .85;
}

.more-link {
  width: 102px;
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  color: #317af7;
}

.more-link:hover {
  text-decoration: underline;
}

/* 分页样式已统一收归 css/style.css（.pager），此处不再重复定义 */

/* ==================== 合作品牌 ==================== */
.partners {
  padding: 60px 0 80px;
  background: #f7faff url('../img/fwal/61252337.png') 50% 50%/100% 100% no-repeat;
}

.partners .sec-title {
  margin-bottom: 40px;
}

/* ========== 合作品牌 logo「无缝」循环滚动 ==========
   结构：.logo-wall 可视窗口（两侧硬边收口，不做渐隐）
           ├ .logo-band 第一 / 第三排的内缩窗口（宽 = 整窗 6/7、水平居中）
           │    └ .logo-row 轨道（width:max-content，内放 N 份相同 logo 组）
           ├ .logo-row  第二排轨道（铺满整窗）
           └ .logo-band └ .logo-row
   做法：轨道整体移动恰好一份（-100% / var(--logo-copies)），移满一份后与起点逐像素重合 ⇒ 首尾严丝合缝。
        N 与动画时长由 fwal.js 按实测宽度写入；位移是纯 CSS 动画走合成层，无需第三方滚动插件。
   ⚠️ 关键帧的百分比以 .logo-row 自身宽度为基准 ⇒ 不能用 px 写死位移。
   ⚠️ 收窄必须另加一层 .logo-band：轨道一旦被写 width/max-width，-100% 的基准就从轨道总宽缩成限宽后的盒子，位移不再等于一份。
   ⚠️ 有了 band，纵向间距改用 .logo-wall > * + *（.logo-row + .logo-row 的兄弟关系被隔断）。 */
.logo-wall {
  overflow: hidden;
}

/* 第一 / 第三排的内缩窗口：宽 = 6/7（照设计稿 1200 / 1400），水平居中。
   band 只负责「变窄 + 居中 + 裁切」这一件事，轨道自身仍是 max-content，
   所以上面那套「-100% / N」的无缝位移公式完全不受影响。 */
.logo-band {
  width: calc(100% / 7 * 6);
  margin: 0 auto;
  overflow: hidden;
}

.logo-row {
  --logo-copies: 2;
  /* 轨道里 logo 组的份数（fwal.js 按窗口宽度写入） */
  --logo-dur: 40s;
  /* 移动一份所需时间（fwal.js 按组宽写入，保证各排速度一致） */
  display: flex;
  align-items: center;
  width: max-content;
  height: 107px;
  animation: logo-marquee var(--logo-dur) linear infinite;
}

@keyframes logo-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-100% / var(--logo-copies)), 0, 0);
  }
}

/* 中排反向（向右）滚动：从「−一份」走到 0，起止两端同样相差整数份，接缝照旧严丝合缝 */
.logo-row--reverse {
  animation-direction: reverse;
}

/* 尊重「减少动态效果」偏好：停住不动，此时轨道停在起点，与静态排版完全一致 */
@media (prefers-reduced-motion: reduce) {
  .logo-row {
    animation: none;
  }
}

.logo-wall>*+* {
  margin-top: 11px;
}

/* logo 图尺寸取自原站轮播配置：$SlideWidth 190 + $SlideSpacing 10 ⇒ 排列周期 200px。
   ⚠️ 宽高必须成对给：素材 248×134（1.851），只写 width 时 object-fit:contain 会受高度限制、图仍是原来那么大；
      高度 = 宽 / 1.851（190→103 / 154→83 / 124→67），contain 才会真正按宽度铺满。
   ⚠️ margin: 0 5px（左右合计 10px）即原站 $SlideSpacing，各断点一致，不再分档覆写。 */
.logo-row img {
  width: 190px;
  height: 103px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 5px;
  filter: grayscale(.1);
}


/* ==================== 陪伴式服务 ==================== */
/* 陪伴式服务的组件样式已抽到公共 style.css（与首页「新媒体服务」共用 .newmedia / .nm-*）
   本页只覆盖区块背景图，素材取自本页的 img/fwal 目录 */
.newmedia {
  background-image: url('../img/fwal/61252542.jpg');
}

/* 陪伴式服务「四张服务项」进入动效（与首页「新媒体服务」同一套参数）：
   · 待命位挂在 html.js 下 ⇒ 无 JS 时整段不生效，内容照常可见且不闪。
   · 只动 opacity / translateY：不参与布局，.nm-item 的尺寸与位置一律不变。
   · 尊重「减少动态效果」：包在 no-preference 里，系统开启时不隐藏、不播放。
   · 4 张依次错开 0/.1/.2/.3s；窄屏 2 列时自然形成第一行 0/.1、第二行 .2/.3。
   · .is-in 由 fwal.js 的 revealOnEnter() 在区块进入视口时挂到 .nm-grid 上。 */
@media (prefers-reduced-motion: no-preference) {
  .js .nm-item {
    opacity: 0;
    transform: translateY(40px);
  }

  .js .nm-grid.is-in .nm-item {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  }

  .js .nm-grid.is-in .nm-item:nth-child(2) {
    transition-delay: .1s;
  }

  .js .nm-grid.is-in .nm-item:nth-child(3) {
    transition-delay: .2s;
  }

  .js .nm-grid.is-in .nm-item:nth-child(4) {
    transition-delay: .3s;
  }
}

/* ==================== 响应式适配 ==================== */
@media (max-width: 1399px) {
  .hero {
    background-position: 62% 50%;
  }

  .cases-title {
    font-size: 32px;
  }

  .case-grid {
    grid-template-columns: repeat(3, 340px);
  }

  .case-info p {
    font-size: 12px;
  }

}

@media (max-width: 1199px) {
  .case-grid {
    grid-template-columns: repeat(2, 340px);
    justify-content: center;
  }
}

@media (max-width: 991px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .9) 34%, rgba(255, 255, 255, .6)),
      url('../img/fwal/61678750.jpg');
    background-position: 50% 50%, 68% 50%;
    background-size: cover, cover;
  }

  .case-grid {
    grid-template-columns: repeat(2, 340px);
    justify-content: center;
  }
}

@media (max-width: 767px) {

  .cases {
    padding: 44px 0 40px;
  }

  .cases-title {
    font-size: 22px;
  }

  .filters {
    margin-top: 24px;
  }

  .filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
  }

  /* 桌面档用 margin-left 手工摆位（67/63/107/102，模拟两端对齐），窄屏换行后这些值
     会让每行首项缩进一大截、6 项裂成 3 行 → 一律归零，改由 gap 统一控制 */
  .filter-list li+li,
  .filter-list[data-group="industry"] li:nth-child(5),
  .filter-list[data-group="biz"] li:nth-child(3),
  .filter-list[data-group="biz"] li:nth-child(4),
  .filter-list[data-group="biz"] li:nth-child(5) {
    margin-left: 0;
  }

  .filter-list {
    gap: 9px;
  }

  /* 胶囊化：手机端触控目标更清晰；激活态由「蓝字加粗」升级为「蓝底白字」 */
  .filter-list li {
    padding: 5px 13px;
    background: #eef4fd;
    border-radius: 14px;
    font-size: 14px;
    line-height: 18px;
    color: #55617a;
  }

  .filter-list li.active {
    background: #317af7;
    color: #fff;
    font-weight: 500;
  }

  .filter-label {
    width: auto;
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 18px;
  }

  .case-grid {
    grid-template-columns: 340px;
    justify-content: center;
    gap: 20px;
    margin-top: 24px;
  }

  .case-info p {
    -webkit-line-clamp: 4;
    font-size: 13px;
  }

  .partners {
    padding: 40px 0 52px;
    background-size: cover;
  }

}

@media (max-width: 479px) {
  .case-grid {
    grid-template-columns: 1fr;
  }

  .filter-list {
    gap: 8px;
  }

  /* 窄屏卡片改为流式（设计稿定尺 340 放不下） */
  .case-item {
    width: 100%;
    height: auto;
    padding-bottom: 20px;
  }

  .case-cover {
    height: auto;
    aspect-ratio: 300 / 167;
  }

  .case-tags {
    margin-top: 16px;
  }

  .case-info p {
    width: auto;
  }

  .case-links {
    margin-right: 0;
  }

  .more-link {
    width: auto;
    text-align: right;
  }
}

/* logo-row-narrow */
/* 「合作品牌」logo 三档尺寸（≥992 / ≤991 / ≤479）：原站 $SlideWidth 190 起的等比阶梯 190 / 154 / 124（高 = 宽 ÷ 1.851），
   行高紧跟图高 107 / 84 / 68，排间距 = 各档「排距节拍 − 行高」。
   ⚠️ 本块必须放在文件末尾：同优先级下靠后的媒体查询才能压过前面区块里的旧声明。 */
@media (max-width: 991px) {
  .logo-row {
    height: 84px;
  }

  .logo-wall>*+* {
    margin-top: 8px;
  }

  .logo-row img {
    width: 154px;
    height: 83px;
  }
}

@media (max-width: 479px) {
  .logo-row {
    height: 68px;
  }

  .logo-wall>*+* {
    margin-top: 6px;
  }

  .logo-row img {
    width: 124px;
    height: 67px;
  }
}