/* 服务案例页面样式 - 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; }
.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; }
/* 描述：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; }

.pager {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: 41px; min-height: 59px;
}
.pager-btn, .pager-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 34px; padding: 0 12px;
  border: 1px solid #e3e9f2; border-radius: 6px; background: #fff;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 14px; color: #636e80;
}
.pager-num.active { background: #317af7; border-color: #317af7; color: #fff; }
.pager-btn.disabled { color: #c3cad6; cursor: not-allowed; }
a.pager-btn:hover, a.pager-num:hover { border-color: #317af7; color: #317af7; }
a.pager-num:hover { background: #f2f7ff; }

/* ==================== 合作品牌 ==================== */
.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-wall { overflow: hidden; }
.logo-row {
  display: flex; align-items: center; width: max-content; height: 92px;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-row + .logo-row { margin-top: 12px; }
.logo-row img {
  width: 150px; height: 76px; object-fit: contain; flex-shrink: 0; margin: 0 14px;
  background: #fff; border-radius: 10px; padding: 10px;
}

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

/* ==================== 响应式适配 ==================== */
@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-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: 13px; 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: 13px; 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; }
  .pager { margin-top: 30px; }

  .partners { padding: 40px 0 52px; background-size: cover; }
  .logo-row { height: 72px; }
  .logo-row img { width: 110px; height: 58px; margin: 0 8px; padding: 8px; }

}

@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; }
}