/* AI车牌识别与智慧停车系统详情页专属样式：4 个 sections（本页无 JS；main 全局 common.css 先行，home.css 管轮播公告） */

/* ============ parking 字体：阿里普惠体按字重映射（族在 common.css 注册） ============ */
[class*="pk-"] {
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ============ 通用区块头 .section-head（parking 复用结构；几何走 inline） ============ */
.section-head {
  margin: 0;
  padding: 0;
}

.section-head__title {
  margin: 0 auto;
  padding: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.section-head__sub {
  margin: 14px auto 0;
  padding: 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.section-head__line {
  height: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  padding: 0;
}

/* ============ 滚动显现 reveal（同站最小一次性方案，由 common.js 全局 Observer 驱动加 .in） ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ Banner pk-banner（区间[696,1346]高650） ============ */
/* 去图层化：section min-height:650＋overflow:hidden；bg 盒定宽 1920 居中（背景定则 B，
   center/cover 不动，1920 下逐像素一致，窄屏对称裁边）；stage 100%+max-width:1920px 直挂文案
   （标题左对齐 left:195px，top 不变）；无 z-index；无断点 */
.pk-banner {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;  scroll-margin-top: 88px; /* 首页产品直达锚：吸顶 72＋16 */
}

.pk-banner__bg {
  position: absolute;
  left: max(0px, calc(50% - 960px));
  top: 0;
  width: 1920px;
  height: 650px;
  background: url('/images/parking/pkg-banner-4806.jpg') center / cover no-repeat;
}

/* v2 坐标统一：底图与 stage 同用 max(0px, 50% - 960px)——>=1920 居中，<1920 左缘贴视口只裁右边，
   两层同一坐标原点，文案不再随浏览器宽度相对底图漂移 */
.pk-banner__stage {
  position: relative;
  width: 1920px;
  min-height: 650px;
  margin-left: max(0px, calc(50% - 960px));
}

/* 标题：(195,235) 669×68，56px #FFF 左 */
.pk-banner__title {
  position: absolute;
  left: 195px;
  top: 235px;
  width: 669px;
  height: 68px;
  margin: 0;
  font-size: 56px;
  line-height: 68px;
  font-weight: 400;
  color: #fff;
  text-align: left;
  white-space: nowrap;
}

/* 副标题：(195,341) 609×27，22px #8AB4F8 左 */
.pk-banner__sub {
  position: absolute;
  left: 195px;
  top: 341px;
  width: 609px;
  height: 27px;
  margin: 0;
  font-size: 22px;
  line-height: 27px;
  font-weight: 400;
  color: #8ab4f8;
  text-align: left;
  white-space: nowrap;
}

/* ============ 通行流程 pk-process（区间[1346,1779]高433，底 #F8F9FC） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0a1128／线 432×4 #3b82f6／缝 12，无副标题），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 57；
   白卡改正常流（relative＋1200 居中，margin-top:60 即 184−124）；
   板内四步改 flex 横排（padding 左右各 80，列缝 141；第三缝 142 差 1px 可忽略），
   箭头三图循环相对板不动；步内圆/标题/描述相对步不动（居中 translate 沿用）；
   stage 去 min-height；section 保 min-height:433；reveal 由 common.js 驱动；
   hover 步骤圆上浮（白板/箭头不动）；无 z-index；无断点 */
.pk-process {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 433px;
  padding-top: 67px;
  background: #f8f9fc;
}

.pk-process__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* 白卡：1200×217 r16 投影（缓存 3px 淡影不可见，按要求取 8px/24px 黑影） */
.pk-process__panel {
  position: relative;
  display: flex;
  column-gap: 141px;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  padding: 32px 80px 0;
  height: 217px;
  margin: 60px auto 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* 步骤：154×154 圆 #EFF6FF */
.pk-process__step {
  position: relative;
  flex: 0 0 auto;
  width: 154px;
  height: 154px;
  transition: transform 0.3s ease;
}

.pk-process__step:hover {
  transform: translateY(-4px);
}

.pk-process__circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 154px;
  height: 154px;
  border-radius: 50%;
  background: #eff6ff;
}

.pk-process__step-title {
  position: absolute;
  top: 51px;
  left: 50%;
  transform: translateX(-50%);
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #1e40af;
  text-align: center;
  white-space: nowrap;
}

.pk-process__step-desc {
  position: absolute;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  height: 20px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
}

.pk-process__arrow {
  position: absolute;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* ============ 功能矩阵 pk-matrix（区间[1779,2776]高997；底带 #EBF3FF） ============ */
/* 去图层化：头换 sectionHead（标题 32 #0a1128／线 256×4 #3b82f6／缝 8，无副标题），
   body 改正常流（relative＋1200 居中），section 加 box-sizing＋padding-top:36（原标题 top），头高 51；
   四横卡改 grid 2 列 550px、列缝 100、行缝 32，卡片区 margin-top:60（147−87）；
   卡改 relative；卡内方块/图标/VIP/标题/描述相对卡不动；
   内容止于 379，下方留白系原案带底（997−379）；stage 去 min-height；section 保 min-height:997；
   reveal 由 common.js 驱动；hover 卡上浮（图标不动）；无 z-index；无断点 */
.pk-matrix {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 997px;
  padding-top: 36px;
  overflow: hidden;
  background: #ebf3ff;
}

.pk-matrix__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.pk-matrix__body {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.pk-matrix__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 550px);
  column-gap: 100px;
  row-gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 60px auto 0;
}

/* 横卡：550×100 白底 r12 */
.pk-matrix__card {
  position: relative;
  width: 550px;
  height: 100px;
  background: #fff;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pk-matrix__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(37, 99, 200, 0.25);
}

/* 图标位：24,25 50×50 #EFF6FF r10 */
.pk-matrix__thumb {
  position: absolute;
  left: 24px;
  top: 25px;
  width: 50px;
  height: 50px;
  background: #eff6ff;
  border-radius: 10px;
}

.pk-matrix__icon {
  position: absolute;
  object-fit: contain;
}

/* VIP 徽标：18px #3B82F6（无图卡空方块保留） */
.pk-matrix__vip {
  position: absolute;
  left: 33px;
  top: 39px;
  width: 31px;
  height: 22px;
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  color: #3b82f6;
  text-align: center;
  white-space: nowrap;
}

/* 卡标题：90,26 20px #1E293B 左；描述 90,57 14px/20px #64748B pre-line */
.pk-matrix__card-title {
  position: absolute;
  left: 90px;
  top: 26px;
  height: 26px;
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  color: #1e293b;
  text-align: left;
  white-space: nowrap;
}

.pk-matrix__desc {
  position: absolute;
  left: 90px;
  top: 57px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #64748b;
  text-align: left;
  white-space: pre-line;
}

/* 看板图：831×500 r16，落矩阵下半区（margin-top:64 即原板顶 443−卡底 379），居中；
   原手搭 DOM 已删，黑空已裁，字不可选已知悉 */
.pk-matrix__board {
  display: block;
  width: 831px;
  height: 500px;
  margin: 64px auto 0;
  border-radius: 16px;
  object-fit: cover;
}

.pk-matrix__board text {
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ============ 生态 pk-eco（区间[2776,3406]高630） ============ */
/* 去图层化：看板已换成图落到矩阵下半区（见 pk-matrix__board），本区只留场景；
   场景区改正常流（relative＋1200 居中）：
   头手写左对齐（标题 34 #0a1128／线 476×4 #3b82f6，内容列内 margin-left:362，缝 12，头高 57），
   section 加 box-sizing＋padding-top:67（原场景 top）；
   四卡改 grid 4 列 280px、列缝 26（缝 26/26/28，末缝差 2px 可忽略），卡片区 margin-top:60（117−57）；
   卡改 relative；卡内图/标题/双描述相对卡不动（left/宽走数据；图框无圆角裁剪沿用原案）；
   stage 去 min-height；section 保 min-height:630；reveal 由 common.js 驱动；
   hover 卡上浮＋图缩放（看板区不动）；无 z-index；无断点 */
.pk-eco {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 630px;
  padding-top: 67px;
  background: #f4f7fc;
}

.pk-eco__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* 看板图落矩阵下半区，见 pk-matrix__board；eco 只留场景 */

/* 场景区 (360,67,1200×467)：头左对齐＋四卡循环 */
.pk-eco__scenarios {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 标题：内容列(362,0) 476×41，34px #0A1128 左 */
.pk-eco__title {
  margin: 0 0 0 362px;
  font-size: 34px;
  line-height: 41px;
  font-weight: 400;
  color: #0a1128;
  text-align: left;
  white-space: nowrap;
}

/* 蓝线：内容列(362,53) 476×4 #3B82F6 */
.pk-eco__line {
  width: 476px;
  height: 4px;
  margin: 12px 0 0 362px;
  background: #3b82f6;
}

.pk-eco__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 280px);
  column-gap: 26px;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 60px auto 0;
}

/* 场景卡：280×350 白底 r16（图框无圆角裁剪沿用原案；内改 flex 流：盖＋标题＋双行居中栈，纵缝 33/19/11；
 * 数据源 12 盒全收 140 中心，居中零漂移） */
.pk-eco__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  height: 350px;
  background: #fff;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pk-eco__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(37, 99, 200, 0.25);
}

.pk-eco__pic {
  flex: none;
  width: 280px;
  height: 150px;
  object-fit: cover;
  display: block;
}

.pk-eco__card-title {
  margin: 33px 0 0;
  font-size: 22px;
  line-height: 27px;
  font-weight: 400;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
}

.pk-eco__desc {
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
}

.pk-eco__desc--l1 { margin-top: 19px; }
.pk-eco__desc--l2 { margin-top: 11px; }