/* ============================================================
   案例库 cases.html / case-detail.html
   前缀 kc-（避免与 main.css / subpage.css 全局类冲突）
   图片统一 16:9
   ============================================================ */

/* ---------------- 分类色板（品牌蓝紫为主，辅以青绿） ---------------- */
.kc-card[data-cat="AI 营销获客"] .kc-thumb, .kc-shot[data-cat="AI 营销获客"] { background-image: linear-gradient(135deg, #3aa9ff 0%, #1a73e8 100%); }
.kc-card[data-cat="AI 客服与数字员工"] .kc-thumb, .kc-shot[data-cat="AI 客服与数字员工"] { background-image: linear-gradient(135deg, #6c7df5 0%, #4a5bd8 100%); }
.kc-card[data-cat="工业制造与物联网"] .kc-thumb, .kc-shot[data-cat="工业制造与物联网"] { background-image: linear-gradient(135deg, #1a73e8 0%, #0e9f6e 100%); }
.kc-card[data-cat="智慧园区与城市"] .kc-thumb, .kc-shot[data-cat="智慧园区与城市"] { background-image: linear-gradient(135deg, #32c5ff 0%, #0e9f6e 100%); }
.kc-card[data-cat="智能硬件与设备"] .kc-thumb, .kc-shot[data-cat="智能硬件与设备"] { background-image: linear-gradient(135deg, #5e76f2 0%, #32a6ff 100%); }
.kc-card[data-cat="行业软件平台"] .kc-thumb, .kc-shot[data-cat="行业软件平台"] { background-image: linear-gradient(135deg, #2f8cf0 0%, #5e76f2 100%); }
/* 第二张图用倒置角度，两张并排时略有区分 */
.kc-shot.kc-shot--alt { background-image: linear-gradient(115deg, #1a73e8 0%, #32a6ff 55%, #6c7df5 100%); }

/* ---------------- 列表页：标题区（无大图 hero） ---------------- */
.kc-list { padding-top: calc(var(--header-h, 64px) + 44px); }
.kc-list-head {
  margin-bottom: 38px;
}
.kc-list-title {
  margin: 0;
  display: block;
  line-height: 1.12;
}
.kc-list-title .kc-list-strong {
  display: block;
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(115deg, #16264a 0%, #1a73e8 64%, #32a6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kc-count { color: var(--ink-2); font-size: 15px; margin-top: 14px; letter-spacing: 0.01em; }
.kc-count b { color: var(--brand); font-weight: 700; }

/* ---------------- 列表页：网格 ---------------- */
.kc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.kc-card {
  display: flex; flex-direction: column; padding: 10px; background: #fff;
  border: 1px solid rgba(27, 39, 53, 0.07); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
  text-decoration: none; color: inherit;
}
.kc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); border-color: rgba(26, 115, 232, 0.22); }

/* 16:9 图框（后续直接放图即可，比例不变） */
.kc-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background-color: #1a73e8; background-size: cover; background-position: center;
}
.kc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 无图占位：编号 + 分类字样 */
.kc-ph-mark {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px 18px; color: rgba(255, 255, 255, 0.92);
}
.kc-ph-mark::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .3;
  background-image: linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(circle at 72% 18%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 72% 18%, #000 0%, transparent 70%);
}
.kc-ph-no {
  position: relative; z-index: 1; font-size: 34px; font-weight: 800; line-height: 1;
  letter-spacing: -1px; color: rgba(255, 255, 255, 0.3);
}
.kc-ph-cat {
  position: relative; z-index: 1; align-self: flex-start; font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(4px);
}

/* hover 浮层：项目简介 */
.kc-hover {
  position: absolute; inset: 0; z-index: 2; padding: 20px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  background: linear-gradient(180deg, rgba(12, 28, 56, 0) 0%, rgba(10, 24, 50, 0.74) 42%, rgba(9, 20, 44, 0.94) 100%);
  color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}
.kc-hover p {
  font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, 0.92);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kc-hover span { font-size: 13px; font-weight: 700; color: #7cc0ff; }
@media (hover: hover) {
  .kc-card:hover .kc-hover { opacity: 1; transform: translateY(0); }
}
/* 无 hover 的设备（移动端）：简介常显在卡片下方；有 hover 的桌面端由浮层承担 */
.kc-card .kc-summary-m {
  font-size: 13px; line-height: 1.8; color: var(--ink-2); margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (hover: hover) { .kc-card .kc-summary-m { display: none; } }

/* 动态渲染卡片的入场（无需依赖滚动观察，避免白屏） */
@keyframes kcFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.kc-grid .kc-card { animation: kcFadeIn .55s cubic-bezier(.22, .61, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .kc-grid .kc-card { animation: none; } }

/* 卡片正文 */
.kc-body { padding: 15px 8px 8px; display: flex; flex-direction: column; flex: 1 1 auto; }
/* 分类徽章：标题上方 / 卡片顶部，实心渐变胶囊（全站分类统一这一个形式） */
.kc-cat {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--brand-grad);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.22);
}
.kc-card h3 {
  font-size: clamp(19px, 1.5vw, 21px); font-weight: 800; line-height: 1.45; color: var(--ink); margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.kc-tags li {
  font-size: 12px; color: var(--ink-3); background: #f4f6fb; border-radius: 6px; padding: 3px 9px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* 空态 / 加载中 */
.kc-empty { padding: 60px 0; text-align: center; color: var(--ink-3); font-size: 15px; }

/* ---------------- 详情页 ---------------- */
.kc-detail { padding-top: calc(var(--header-h, 64px) + 40px); }
.kc-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.kc-crumb a { color: var(--ink-3); }
.kc-crumb a:hover { color: var(--brand); }
.kc-crumb i { font-style: normal; opacity: .5; }

.kc-detail-head { margin-bottom: 30px; }
.kc-detail-head h1 { font-size: clamp(25px, 3.2vw, 38px); font-weight: 700; line-height: 1.32; color: var(--ink); }
.kc-detail-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
/* 标签：白底胶囊 + 品牌渐变圆点，统一、精致 */
.kc-detail-tags li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--ink-2); background: #fff;
  border: 1px solid rgba(27, 39, 53, 0.1); border-radius: 999px;
  padding: 6px 15px 6px 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease, color .24s ease;
}
.kc-detail-tags li::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-grad);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}
.kc-detail-tags li:hover {
  color: var(--brand); border-color: rgba(26, 115, 232, 0.32);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.14); transform: translateY(-1px);
}

/* 两张 16:9 并排 */
.kc-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 38px; }
.kc-shot {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-2); background-color: #1a73e8; background-size: cover; background-position: center;
}
.kc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-shot .kc-ph-mark { padding: 20px 22px; justify-content: flex-end; }

/* 内容块 + 图标 */
.kc-block { margin-bottom: 34px; }
.kc-block-t {
  display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700;
  color: var(--ink); margin-bottom: 16px;
}
.kc-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand);
}
.kc-ic svg { width: 18px; height: 18px; }
.kc-ic--sm { width: 28px; height: 28px; border-radius: 9px; }
.kc-ic--sm svg { width: 16px; height: 16px; }

/* 方案概览：项目概述 + 核心能力 + 业务价值 整合为一卡 */
.kc-brief {
  background: #fff;
  border: 1px solid rgba(27, 39, 53, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  margin-bottom: 34px;
}
.kc-brief-body { padding: 28px 30px 30px; }
.kc-brief-sec + .kc-brief-sec {
  margin-top: 26px; padding-top: 26px;
  border-top: 1px dashed rgba(27, 39, 53, 0.12);
}
.kc-brief-t {
  display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800;
  color: var(--ink); margin-bottom: 14px;
}
.kc-lead {
  font-size: 16px; line-height: 1.9; color: var(--ink-2);
  background: linear-gradient(180deg, #f7faff, #f2f6fd);
  border: 1px solid rgba(26, 115, 232, 0.10);
  border-radius: 12px; padding: 20px 24px;
}
.kc-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* 核心能力：图标左 + 正文右（横排），避免「图标在上、文字悬空」的重心不稳 */
.kc-point {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fbfcff; border: 1px solid rgba(27, 39, 53, 0.07);
  border-radius: 14px; padding: 20px 22px;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.kc-point:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--shadow-2); border-color: rgba(26, 115, 232, 0.22); }
.kc-point-ic {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px; margin-top: 1px;
  background: linear-gradient(115deg, #32a6ff, #1a73e8); color: #fff;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.28);
  transition: transform .28s ease;
}
.kc-point:hover .kc-point-ic { transform: scale(1.06); }
.kc-point-ic svg { width: 17px; height: 17px; }
.kc-point p {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.5px; line-height: 1.8; color: var(--ink-2);
}
/* 业务价值：整合卡底部通栏蓝条，与卡左右齐平 */
.kc-value {
  display: flex; align-items: center; gap: 18px; padding: 24px 30px;
  background: linear-gradient(115deg, #123a7a 0%, #1a73e8 58%, #5e76f2 100%); color: #fff;
}
.kc-value-ic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.kc-value-ic svg { width: 22px; height: 22px; }
.kc-value-txt { min-width: 0; }
.kc-value-lab {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.92); margin-bottom: 6px;
}
.kc-value p { font-size: 19px; font-weight: 700; line-height: 1.6; letter-spacing: .01em; }
/* 业务价值底条右侧「联系我们」按钮 */
.kc-value-btn {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; white-space: nowrap;
  background: #fff; color: var(--brand); border: none;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.kc-value-btn svg { width: 17px; height: 17px; }
.kc-value-btn:hover { transform: translateY(-2px); background: #eef4ff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); }
.kc-value-btn:active { transform: translateY(0); }

/* 相关案例 + 上下篇 */
.kc-related { margin-top: 46px; }
.kc-pager { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.kc-pager a {
  flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px;
  background: #fff; border: 1px solid rgba(27, 39, 53, 0.08); border-radius: 14px;
  font-size: 14px; color: var(--ink); transition: all .25s ease; min-width: 0;
}
.kc-pager a:hover { border-color: rgba(26, 115, 232, 0.35); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.kc-pager span { font-size: 12px; color: var(--ink-3); }
.kc-pager b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-pager a.is-next { text-align: right; align-items: flex-end; }
.kc-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; font-size: 14px; color: var(--brand); font-weight: 600; }
.kc-back svg { width: 16px; height: 16px; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1200px) {
  .kc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .kc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .kc-list { padding-top: calc(var(--header-h, 64px) + 28px); }
  .kc-list-head { margin-bottom: 26px; }
  .kc-card h3 { min-height: 0; }
  .kc-shots { gap: 14px; margin-bottom: 30px; }
}
@media (max-width: 640px) {
  .kc-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .kc-points { grid-template-columns: minmax(0, 1fr); }
  .kc-shots { grid-template-columns: minmax(0, 1fr); }
  .kc-lead { font-size: 15.5px; padding: 18px 20px; }
  .kc-brief-body { padding: 22px 20px 24px; }
  .kc-brief-sec + .kc-brief-sec { margin-top: 20px; padding-top: 20px; }
  .kc-value { gap: 14px; padding: 20px; flex-wrap: wrap; }
  .kc-value p { font-size: 17px; }
  .kc-value-btn { margin-left: 0; width: 100%; justify-content: center; }
  .kc-pager a { flex: 1 1 100%; }
  .kc-pager a.is-next { text-align: left; align-items: flex-start; }
}