/* =========================================================
   儿童桌椅招商（/join/kids）  前缀：jk-
   共用组件（卡片轮播、表单、背景图、图标）见 join_common.css
   ========================================================= */

/* ---------- 我们的优势：编号卡片 ---------- */
.jk-adv { background-color: #eef1f4; }
.jk-adv-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: .2rem; }
.jk-adv-item { position: relative; overflow: hidden; min-height: 3.3rem; padding: .44rem .3rem 1.2rem; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .94); transition: background .4s, color .4s, transform .4s var(--ease); }
.jk-adv-item h3 { position: relative; z-index: 1; font-size: .24rem; margin-bottom: .16rem; }
.jk-adv-item p { position: relative; z-index: 1; font-size: .16rem; line-height: 1.8; color: var(--c-text-2); transition: color .4s; }
.jk-adv-no { position: absolute; right: .2rem; bottom: -.14rem; font-family: Arial, sans-serif; font-size: 1.2rem; font-weight: 800; line-height: 1; color: #ececec; transition: color .4s; }
.jk-adv-item:hover { background: var(--c-primary); color: #fff; transform: translateY(-.06rem); }
.jk-adv-item:hover p { color: rgba(255, 255, 255, .72); }
.jk-adv-item:hover .jk-adv-no { color: rgba(255, 255, 255, .12); }

/* ---------- 招商政策：结构化网格 ---------- */
.jk-policy-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: .24rem; }
.jk-policy-item { padding: .4rem .36rem .44rem; border-radius: var(--radius-lg); background: var(--c-bg-gray); transition: background .4s, color .4s, transform .4s var(--ease); }
.jk-policy-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .34rem; }
.jk-policy-icon { width: .76rem; height: .76rem; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: .36rem; transition: background .4s, color .4s; }
.jk-policy-icon img { max-width: 60%; max-height: 60%; }
.jk-policy-no { font-family: Arial, sans-serif; font-size: .4rem; font-weight: 800; line-height: 1; color: #dcdcdc; transition: color .4s; }
.jk-policy-item h3 { font-size: .24rem; margin-bottom: .1rem; }
.jk-policy-item p { font-size: .16rem; line-height: 1.8; color: var(--c-text-2); transition: color .4s; }
.jk-policy-item:hover { background: var(--c-primary); color: #fff; transform: translateY(-.06rem); }
.jk-policy-item:hover .jk-policy-icon { background: #fff; color: var(--c-text); }
.jk-policy-item:hover .jk-policy-no { color: rgba(255, 255, 255, .25); }
.jk-policy-item:hover p { color: rgba(255, 255, 255, .72); }

/* ---------- 加盟要求：深色背景 + 细边框卡片 ---------- */
.jk-req { background: var(--c-dark); }
.jk-req-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.jk-req-item { padding: .56rem .36rem .5rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-lg); text-align: center; transition: background .4s, border-color .4s; }
.jk-req-item:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.jk-req-icon { width: .7rem; height: .7rem; font-size: .6rem; color: #fff; }
.jk-req-icon .ico { stroke-width: 1.2; }
.jk-req-line { display: block; width: .4rem; height: 2px; margin: .26rem auto .26rem; background: #fff; opacity: .8; }
.jk-req-item h3 { font-size: .26rem; margin-bottom: .14rem; }
.jk-req-item p { font-size: .16rem; line-height: 1.85; color: rgba(255, 255, 255, .7); text-wrap: balance; }

/* ---------- 合作流程：PC 横向时间轴（上下交错） ---------- */
.jk-flow-slider { padding: 0 .9rem; }
.jk-flow-slider .swiper { position: relative; }
.jk-flow-slider .swiper::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 50%; height: 1px; background: #cfcfcf; }
.jk-flow-slider .jk-flow-item { position: relative; height: 4.6rem; }
.jk-flow-dot { position: absolute; z-index: 1; left: 50%; top: 50%; width: .18rem; height: .18rem; margin: -.09rem 0 0 -.09rem; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 .07rem rgba(0, 0, 0, .08); transition: transform .3s; }
.jk-flow-stem { position: absolute; left: 50%; width: 1px; height: .36rem; background: #cfcfcf; }
.jk-flow-box { position: absolute; left: .04rem; right: .04rem; text-align: center; }
.is-down .jk-flow-stem { top: calc(50% + .12rem); }
.is-down .jk-flow-box { top: calc(50% + .56rem); }
.is-up .jk-flow-stem { bottom: calc(50% + .12rem); }
.is-up .jk-flow-box { bottom: calc(50% + .56rem); }
.jk-flow-no { font-family: Arial, sans-serif; font-size: .5rem; font-weight: 800; line-height: 1; color: var(--c-text); }
.jk-flow-box h3 { margin: .14rem 0 .08rem; font-size: .24rem; }
.jk-flow-box p { font-size: .16rem; line-height: 1.7; color: var(--c-text-2); text-wrap: balance; }
.jk-flow-item:hover .jk-flow-dot { transform: scale(1.3); }
.jk-flow-btn { position: absolute; z-index: 2; top: 50%; margin-top: -.28rem; }
.jk-flow-prev { left: 0; }
.jk-flow-next { right: 0; }

/* 手机：竖向时间线 */
.jk-flow-v { position: relative; padding-left: .6rem; }
.jk-flow-v::before { content: ""; position: absolute; left: .13rem; top: .2rem; bottom: .3rem; width: 1px; background: #bdbdbd; }
.jk-flow-v-item { position: relative; padding-bottom: .46rem; }
.jk-flow-v-item:last-child { padding-bottom: 0; }
.jk-flow-v-item .jk-flow-dot { left: -.47rem; top: .2rem; width: .2rem; height: .2rem; margin: -.1rem 0 0 -.1rem; }
.jk-flow-v-item h3 { margin: .1rem 0 .06rem; font-size: .32rem; }
.jk-flow-v-item p { font-size: .26rem; line-height: 1.7; color: var(--c-text-2); }
.jk-flow-v-item .jk-flow-no { font-size: .4rem; }

/* ---------- 重点招商区域 ---------- */
.jk-region-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); gap: .3rem; }
.jk-region-card { display: flex; flex-direction: column; padding: .48rem .44rem .4rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; transition: border-color .3s, box-shadow .3s, transform .4s var(--ease); }
.jk-region-card:hover { border-color: var(--c-primary); box-shadow: 0 .14rem .4rem rgba(0, 0, 0, .07); transform: translateY(-.06rem); }
.jk-region-head { display: flex; align-items: center; gap: .12rem; margin-bottom: .28rem; font-size: .32rem; }
.jk-region-head h3 { font-size: .3rem; }
.jk-region-cities { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .1rem; }
.jk-region-cities span { padding: .05rem .16rem; border-radius: .4rem; background: var(--c-bg-gray); font-size: .15rem; line-height: 1.6; color: var(--c-text-2); }
.jk-region-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .12rem .2rem; margin-top: .36rem; padding-top: .28rem; border-top: 1px solid var(--c-line); }
.jk-region-contact { display: inline-flex; align-items: center; gap: .08rem; font-size: .16rem; color: var(--c-text-2); }
.jk-region-contact .ico { font-size: .2rem; }
.jk-region-tel { display: inline-flex; align-items: center; gap: .08rem; font-family: Arial, sans-serif; font-size: .22rem; font-weight: 700; transition: color .3s; }
.jk-region-tel .ico { font-size: .22rem; }
.jk-region-tel:hover { color: var(--c-accent); }

/* ---------- 平板（761~1199） ---------- */
@media (max-width: 1199px) {
  .jk-adv-list { grid-template-columns: repeat(3, 1fr); }
  .jk-adv-item p, .jk-policy-item p, .jk-req-item p, .jk-flow-box p { font-size: .18rem; }
  .jk-policy-item { padding: .32rem .26rem .36rem; }
  .jk-req-list { gap: .2rem; }
  .jk-req-item { padding: .44rem .22rem .4rem; }
  .jk-region-cities span { font-size: .17rem; }
}

/* ---------- 手机 ---------- */
@media (max-width: 760px) {
  .jk-adv-list { grid-template-columns: repeat(2, 1fr); gap: .2rem; }
  .jk-adv-item { min-height: 2.9rem; padding: .36rem .3rem 1rem; }
  .jk-adv-item:last-child:nth-child(odd) { grid-column: span 2; min-height: 2.2rem; }
  .jk-adv-item h3 { font-size: .3rem; margin-bottom: .12rem; }
  .jk-adv-item p { font-size: .24rem; line-height: 1.7; }
  .jk-adv-no { font-size: 1.1rem; right: .2rem; bottom: -.12rem; }
  .jk-adv-item:hover { background: rgba(255, 255, 255, .94); color: var(--c-text); transform: none; }
  .jk-adv-item:hover p { color: var(--c-text-2); }
  .jk-adv-item:hover .jk-adv-no { color: #ececec; }

  .jk-policy-list { grid-template-columns: repeat(2, 1fr); gap: .2rem; }
  .jk-policy-item { padding: .32rem .28rem .36rem; }
  .jk-policy-head { margin-bottom: .26rem; }
  .jk-policy-icon { width: .8rem; height: .8rem; font-size: .38rem; }
  .jk-policy-no { font-size: .4rem; }
  .jk-policy-item h3 { font-size: .3rem; margin-bottom: .08rem; }
  .jk-policy-item p { font-size: .23rem; line-height: 1.65; }
  .jk-policy-item:hover { background: var(--c-bg-gray); color: var(--c-text); transform: none; }
  .jk-policy-item:hover .jk-policy-icon { background: var(--c-primary); color: #fff; }
  .jk-policy-item:hover .jk-policy-no { color: #dcdcdc; }
  .jk-policy-item:hover p { color: var(--c-text-2); }

  .jk-req-list { grid-template-columns: repeat(2, 1fr); gap: .2rem; }
  .jk-req-item { padding: .44rem .2rem .4rem; }
  .jk-req-icon { width: .8rem; height: .8rem; font-size: .68rem; }
  .jk-req-line { margin: .22rem auto; }
  .jk-req-item h3 { font-size: .3rem; margin-bottom: .1rem; }
  .jk-req-item p { font-size: .23rem; line-height: 1.65; }

  .jk-region-list { grid-template-columns: 1fr; gap: .24rem; }
  .jk-region-card { padding: .4rem .36rem .36rem; }
  .jk-region-card:hover { transform: none; box-shadow: none; border-color: var(--c-line); }
  .jk-region-head { font-size: .4rem; margin-bottom: .24rem; }
  .jk-region-head h3 { font-size: .36rem; }
  .jk-region-cities { gap: .12rem; }
  .jk-region-cities span { padding: .06rem .2rem; font-size: .24rem; }
  .jk-region-foot { margin-top: .3rem; padding-top: .26rem; }
  .jk-region-contact { font-size: .26rem; }
  .jk-region-contact .ico { font-size: .3rem; }
  .jk-region-tel { font-size: .32rem; }
  .jk-region-tel .ico { font-size: .32rem; }
}