/* ============================================================
   联系方式页 · 框头样式（参照参考图）
   特征：
   ① 顶部 3px 色条，整条贯穿（从左边圆角到右边圆角）
   ② 替代顶部边框（不是浮在上方）
   ③ 大圆角 16px（已有）
   ④ 扁平设计（去掉阴影）
   ⚠️ 只作用于 .contact-page
   ============================================================ */

/* ① 卡片：顶部 3px 色条 + 其余 1px 边框 + 无阴影 */
.contact-page .cbox,
.contact-page .contact-box{
  position:relative !important;
  border:1px solid #e9eef7 !important;
  border-top-width:3px !important;
  border-top-style:solid !important;
  border-radius:16px !important;
  box-shadow:none !important;
  background:#fff !important;
  overflow:hidden !important;   /* 保证色条跟随圆角 */
}
/* 三个卡片的顶边色（按参考图：深蓝色系）*/

/* ③ 卡片内边距：给色条留出视觉空间 */
.contact-page .cbox{padding:22px 22px !important}

/* ④ 标题行（h3）加分隔线，形成"框头"层次 */
.contact-page .cbox h3{
  padding-bottom:12px !important;
  border-bottom:1px solid #f0f2f6 !important;
  margin-bottom:14px !important;
}

/* ⑤ 图标容器：保持跟标题同行（联系页是"标题+图标"布局） */
.contact-page .cbox h3 .h3-ic,
.contact-page .cbox h3 > span:first-child{
  width:30px !important;
  height:30px !important;
  border-radius:9px !important;
  flex:none !important;
}

/* ⑥ hover：只变色不位移（已有规则）—— 边框色微变 */
.contact-page .cbox:hover{
  border-color:#cfdcf7 !important;
  border-top-color:#1d4ed8 !important;
}

/* ========== 移动端 ========== */
@media (max-width:900px){
  .contact-page .cbox,
  .contact-page .contact-box{
    border-top-width:3px !important;
    border-radius:14px !important;
    padding:17px 15px !important;
  }
  .contact-page .cbox h3{
    padding-bottom:10px !important;
    margin-bottom:12px !important;
  }
  .contact-page .cbox h3 .h3-ic,
  .contact-page .cbox h3 > span:first-child{
    width:26px !important;
    height:26px !important;
    border-radius:8px !important;
  }
}


/* ============================================================
   ⭐ 修：三个卡 hover 效果统一（2026-09-30）
   问题：只有「联系我们」hover 边框变蓝，右列两卡不变
   原因：右列两卡被包在 <div> 里，选择器写法不统一
   修法：用「结构选择器」精确命中三个 .cbox + 兜底 .cbox:hover
   ============================================================ */

/* 兜底：所有 cbox hover 都要有效果 */
html body.contact-page .cbox:hover,
html body.contact-page .contact-box:hover{
  border-color:#cfdcf7 !important;
  border-top-color:#1d4ed8 !important;
  box-shadow:0 4px 14px rgba(37,99,235,.11) !important;
  transform:none !important;
}

/* 精确命中：左列卡 */
html body.contact-page .contact-grid > .cbox:hover,
html body.contact-page .contact-grid > div.cbox:hover{
  border-top:3px solid #1d4ed8 !important;
  border-left:1px solid #cfdcf7 !important;
  border-right:1px solid #cfdcf7 !important;
  border-bottom:1px solid #cfdcf7 !important;
  box-shadow:0 4px 14px rgba(37,99,235,.11) !important;
}

/* 精确命中：右列两张卡 */
html body.contact-page .contact-grid > div:not(.cbox) > .cbox:hover,
html body.contact-page .contact-grid > *:nth-child(2) > .cbox:nth-child(1):hover,
html body.contact-page .contact-grid > *:nth-child(2) > .cbox:nth-child(2):hover{
  border-top:3px solid #1d4ed8 !important;
  border-left:1px solid #cfdcf7 !important;
  border-right:1px solid #cfdcf7 !important;
  border-bottom:1px solid #cfdcf7 !important;
  box-shadow:0 4px 14px rgba(37,99,235,.11) !important;
}

/* 移动端同步 */
@media (max-width:900px){
  html body.contact-page .cbox:hover,
  html body.contact-page .contact-box:hover{
    border-top:3px solid #1d4ed8 !important;
    border-color:#cfdcf7 !important;
    border-top-color:#1d4ed8 !important;
    box-shadow:0 4px 14px rgba(37,99,235,.11) !important;
  }
}