/*
 * 联系我们-联系方式页专属样式（contact.html）
 * 设计稿：1:4846「联系我们-联系方式-定」（1920×3296，底色 #F2F2F2）
 * 结构：banner(700) → 二级菜单 2 项(联系方式[激活]/地址导航) →
 *       联系方式三卡（1517 宽：地址/电话/邮箱，默认透明底，hover 蓝底反白 385×500）→ 免费获取优惠报价表单
 * 二级菜单复用 .subnav（common.css）
 */

/* ---------- 二级菜单（2 项 805 宽规格，同新闻/下载/服务页） ---------- */
.ct-subnav-item {
  max-width: 805px;
}

/* ---------- 联系方式三卡（设计稿 组1508：三列，图标 100 圆 + 标题 36 + 文字 24 Light） ---------- */
.ct-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.ct-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 24px;
}
@media (min-width: 1024px) {
  .ct-cards {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 100px;         /* 设计稿 1517 区内三列分布 */
  }
  /* 三卡统一 385×500 尺寸，保证 hover 变蓝时布局不跳动 */
  .ct-card {
    padding: 87px 0;
    width: 385px;
    height: 500px;
  }
}

/* hover 统一为原地址卡效果（设计稿 矩形232：蓝底 + 阴影 + 反白） */
.ct-card {
  transition: background-color 0.25s, box-shadow 0.25s;
}
.ct-card:hover {
  background: #0971CE;        /* paint_1:3311 */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3); /* effect_1:3375 */
}
.ct-card-title,
.ct-card-text {
  transition: color 0.25s;
}
.ct-card:hover .ct-card-title,
.ct-card:hover .ct-card-text {
  color: #FFFFFF;
}
/* hover 时图标加反色滤镜：brightness(0)+invert(1) 把图形整体翻白（纯 invert 会把品牌蓝反成橙色），
   透明底不受影响；地址卡的白圆同样翻白，保持圆形轮廓 */
.ct-card img {
  transition: filter 0.25s;
}
.ct-card:hover img {
  filter: brightness(0) invert(1);
}

/* 电话白圆（设计稿 圆形10：白底 + 2px 蓝描边，内嵌 60×60 图标） */
.ct-phone-badge {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 2px solid #0971CE;
  border-radius: 50%;
}
.ct-phone-badge img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .ct-phone-badge { width: 100px; height: 100px; }
}

/* 卡片标题 / 文字（font_1:4945：36 Regular；font_1:4940：24 Light 行高 48） */
.ct-card-title {
  margin-top: 32px;
  font-size: 24px;
  line-height: 40px;
  color: #333333;
}
.ct-card-text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 32px;
  font-weight: 300;
  color: #3D3D3D;
}
@media (min-width: 1024px) {
  .ct-card-title { margin-top: 40px; font-size: 36px; }
  .ct-card-text  { margin-top: 20px; font-size: 24px; line-height: 48px; }
}

/* ---------- 免费获取优惠报价（设计稿 1:4852） ---------- */
.ct-quote {
  margin-top: 50px;
  text-align: center;
}
.ct-quote-title {
  font-size: 26px;
  line-height: 45px;
  font-weight: 700;           /* font_1:4856（42 Bold） */
  color: #0971CE;
}
.ct-quote-tip {
  margin-top: 14px;
  font-size: 15px;
  line-height: 28px;
  color: #666666;             /* font_1:4289（20 Regular L3） */
}
.ct-quote-tip em {
  color: #FF0000;             /* 必填红星 */
  font-style: normal;
}
@media (min-width: 1024px) {
  .ct-quote { margin-top: 100px; }
  .ct-quote-title { font-size: 42px; }
  .ct-quote-tip { margin-top: 20px; font-size: 20px; line-height: 40px; }
}

/* 表单白卡（设计稿 矩形228：1600×710） */
.ct-quote-form {
  margin-top: 30px;
  padding: 24px 20px 40px;
  background: #FFFFFF;
  text-align: left;
}
.ct-form-row--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.ct-field {
  margin-bottom: 20px;
}
.ct-field label {
  display: block;
  font-size: 16px;
  line-height: 34px;
  color: #666666;             /* font_1:3936（24 Regular） */
}
.ct-field label em {
  color: #FF0000;
  font-style: normal;
}
.ct-field input,
.ct-field textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #D8D8D8;
  border-radius: 5px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}
.ct-field textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  font-family: inherit;
}
.ct-field input:focus,
.ct-field textarea:focus {
  border-color: #0971CE;
}
.ct-submit {
  display: block;
  margin: 10px auto 0;
  width: 150px;
  height: 50px;
  border-radius: 80px;
  background: #F18903;        /* paint_1:3218 */
  color: #FFFFFF;
  font-size: 18px;            /* font_1:3535（20 Regular） */
  transition: opacity 0.2s;
}
.ct-submit:hover { opacity: 0.9; }
@media (min-width: 1024px) {
  .ct-quote-form {
    margin-top: 40px;
    padding: 60px 125px 90px; /* 设计稿 表单区 x=125 / 首行 y=60 */
  }
  .ct-form-row--3 {
    grid-template-columns: repeat(3, 1fr); /* 3×350 + 间隔 150 */
    column-gap: 150px;
  }
  .ct-field { margin-bottom: 40px; }
  .ct-field label { font-size: 24px; line-height: 34px; }
  .ct-field input,
  .ct-field textarea {
    height: 60px;
    font-size: 18px;
  }
  .ct-submit { margin-top: 20px; }
}