/* =============================================================================
 * huabote 主题补丁样式（本主题唯一新增的 CSS：规范 §6「禁止自创样式；确需补充时只允许追加最小补丁」）
 *
 * 现网 CSS（assets/css/*.css，全量引入）已覆盖 header/footer/首页区块/详情页/联系我们/招聘等全部视觉。
 * 本文件只补「现网 CSS 没有、而静态化后必须补」的四类，逐段原因见注释：
 *   A. 运行时提示 toast（现网用 element-ui Message，静态页无 element-ui）
 *   B. 首屏不渲染、由 JS 生成/显示的元素兜底（[hidden] 压过现网 display:flex/block）
 *   C. Swiper 由 JS 承担的部分（过渡时长；容器/滑块状态类现网也有，已在模板里落盘）
 *   D. 未实现模板的兜底观感（.hb-* 通用区块/列表/单页，由 home/blocks/generic.vm、list/*.vm 使用，
 *      后续批次逐个替换为 1:1 模板后可整体删除）
 *   E. 窄屏回退（现网是桌面站：.header.fixed{min-width:1200px}、.g-box{width:1200px}）
 * 说明：主题模板里的 DOM/类名一律来自现网（Header.vue / kf-footer.vue / views/**），本文件不新增任何类名。
 * ========================================================================== */

/* ---------------------------------------------------------------- A. 运行时提示（现网 element-ui Message） */
.hb-toast {
  position: fixed;
  left: 50%;
  top: 24px;
  z-index: 999;
  max-width: 80vw;
  padding: 10px 22px;
  transform: translate(-50%, -12px);
  border-radius: 4px;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.hb-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 提交中态（scripts.vm 给触发元素加 is-loading，现网 element-ui 用 loading 图标） */
.btn.is-loading { opacity: .7; cursor: default; pointer-events: none; }

/* ---------------------------------------------------------------- B. JS 生成/显示元素的兜底 */
/* 浮窗栏：现网 v-if="numshows"（滚动 650px 后才在 DOM 里），静态页常驻 + hidden 切换 */
.slide-bars[hidden] { display: none; }
/* 招聘专线弹窗：现网 v-if="winStatus"；.rec-win{display:flex} 会压过 [hidden] 的 UA 规则，故显式压回 */
.rec-win[hidden] { display: none; }
.rec-hd-btn { user-select: none; }

/* ---------------------------------------------------------------- C. 轮播（原生实现承担 Swiper 的 JS 部分） */
/* 现网 chunk-vendors 已有 .swiper-wrapper{transition-property:transform}，但默认 duration 0s，需补过渡时长 */
.home-banner .swiper-wrapper { transition-duration: .5s; }
/* .__video 现网是 video.js 外壳（kf-video），静态页用原生 <video> 撑满外壳 */
.p-home_banner .__video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- D. 富文本内嵌资源（详情页/兜底模板通用防御） */
.left_text img,
.hb-single-content img,
.hb-block-item-content img,
.hb-list-copy img { max-width: 100%; height: auto; }
.left_text table,
.hb-single-content table,
.hb-block-item-content table { max-width: 100%; }

/* ---------------------------------------------------------------- E. 窄屏回退（现网无移动端布局，不改桌面观感）
 * 移动端导航是「纯 CSS 回退」，**刻意不做**汉堡按钮 + 遮罩（.hb-nav-toggle / .hb-nav-mask 一律不得引入）：
 *   1) 现网首屏 DOM 没有对应节点（sig-live-home.json 无此类），加节点会让 §10.4 的「DOM 结构树差异行数 = 0」失守；
 *   2) 自创 hb-* 前缀类名违反规范 §10.3 红线 1，且 HuaboteThemeSmokeTest.homeHasNoInventedClasses()
 *      断言整页不得出现任何 hb-* 类名（测试是 Java，改不了）。
 * 因此这里只调整现网已有元素：解除 1200px 定宽 + 一级导航横向可滚动；≥1201px 桌面端不命中本段，零差异。 */
@media (max-width: 1200px) {
  html, body { overflow-x: hidden; }
  .header.fixed { min-width: 0; }
  .header .g-box { width: auto; padding: 0 14px; box-sizing: border-box; }
  /* 现网一级导航是 flex 定宽；窄屏改为可横向滚动（不新增类名/DOM） */
  .header-nave { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .header-nave-item { padding: 0 14px; }
  .menu-make { display: none; }
  /* 内容区：单列化，避免 1200px 定宽在窄屏横向溢出 */
  .g-box { width: auto; padding: 0 16px; box-sizing: border-box; }
  .website-news { height: auto; padding-bottom: 40px; }
  .website-news .news-title { padding-top: 46px; }
  .website-news .news-title .tt { font-size: 34px; line-height: 42px; }
  .website-news .news-title .tit .name { font-size: 26px; }
  .website-news .news-con { padding-top: 24px; }
  .website-news .news-con .item { width: 100%; margin-right: 0; }
  .website-news .news-con .item-mid .tit { width: auto; }
  .website-business .content { display: block; padding-bottom: 50px; }
  .website-business .content .item { width: 100%; margin-right: 0; margin-top: 40px; }
  .website-business .content .item .top { height: auto; width: 100%; }
  .vocation-cop { height: auto; padding: 60px 0; }
  .vocation-cop .content { display: block; }
  .vocation-cop .content .con-le { margin-right: 0; }
  .vocation-cop .content .con-le .tit { font-size: 40px; line-height: 50px; }
  .vocation-cop .content .con-le .cope { font-size: 28px; line-height: 36px; }
  .vocation-cop .content .con-le .con { width: auto; }
  .vocation-cop .content .con-ri img.img { width: 100%; height: auto; margin-top: 30px; }
  .p-home_banner { min-height: 0; }
  .p-home_banner .ban-img { position: static; height: auto; }
  .contactUs { height: auto; }
  .contactUs .concat { padding: 40px 0; }
  .contactUs .concat-con { display: block; padding: 24px; }
  .contactUs .concat-con .le { width: auto; padding-right: 0; }
  .contactUs .concat-con .le .tit { font-size: 30px; }
  .contactUs .concat-con .le .phone { font-size: 34px; padding-top: 28px; }
  .contactUs .concat-con .line { width: 100%; height: 1px; margin: 26px 0; }
  .contactUs .concat-con .ri { width: auto; padding-left: 0; }
  .contactUs .concat-con .ri .item .ipt { width: 100%; }
  .contactUs .concat-con .ri .btn { margin-left: 0; width: 100%; }
  .word-list11 .head { font-size: 30px; letter-spacing: 8px; }
  .rec-list .list-hd-tab,
  .rec-list .list-tab { width: 33.33%; }
  .rec-list .list-item-bd { padding: 0 16px 24px; }
  .kf-footer .__bd { display: block; }
  .footer-bt { padding: 14px 12px; text-align: center; flex-wrap: wrap; }
  .slide-bars { right: 8px; bottom: 60px; }
  .slide-bars .item .inner { width: 300px; height: auto; padding: 20px; right: 66px; bottom: 0; }
  .slide-bars .item .inner .phone { width: 100%; }
  .slide-bars .item .inner .info { flex-direction: column; }
  .slide-bars .item .inner .info .info-item .ipt { width: 100%; }
  .slide-bars .item .inner .message .textarea { width: 100%; }
  .slide-bars .item .inner .btn { width: 100%; }
  .rec-win-box { width: 90%; }
}

/* ---------------------------------------------------------------- F. 未实现模板的兜底观感（.hb-*，见段首说明 D） */
.hb-page { background: #fff; padding-bottom: 80px; }
.hb-page-head {
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0030aa;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
}
.hb-page-head-cap { font-size: 44px; letter-spacing: 12px; color: #fff; }
.hb-page-head-en { margin-top: 10px; font-size: 16px; color: rgba(255, 255, 255, .75); letter-spacing: 2px; }
.hb-block { padding: 50px 0 10px; }
.hb-block-head { margin-bottom: 26px; text-align: center; }
.hb-block-en { font-size: 40px; line-height: 1.2; color: rgba(0, 47, 167, .12); letter-spacing: 2px; }
.hb-block-cap { margin-top: -18px; font-size: 30px; color: #002fa7; }
.hb-block-bd { display: block; }
.hb-block-item { margin-bottom: 24px; line-height: 1.8; color: #656878; }
.hb-block-cover { display: block; max-width: 100%; height: auto; margin: 0 auto 18px; }
.hb-block-item-title { font-size: 22px; color: #282828; line-height: 1.5; margin: 0 0 8px; }
.hb-block-item-title a { color: inherit; text-decoration: none; }
.hb-block-item-summary { margin: 0 0 10px; font-size: 16px; color: #656878; }
.hb-block-item-content { font-size: 16px; color: #333; line-height: 1.9; }
.hb-single { max-width: 980px; margin: 0 auto; padding: 40px 0 0; }
.hb-single-title { margin: 0 0 14px; font-size: 30px; line-height: 1.5; color: #222; }
.hb-single-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid #eee; color: #999; font-size: 13px; }
.hb-single-cover { display: block; max-width: 100%; height: auto; margin: 0 auto 20px; }
.hb-single-summary { font-size: 16px; color: #656878; line-height: 1.9; }
.hb-single-content { font-size: 16px; color: #333; line-height: 1.9; }
.hb-list { display: grid; gap: 20px; }
.hb-list-item { display: flex; gap: 20px; padding: 20px; border: 1px solid #eee; transition: box-shadow .2s; }
.hb-list-item:hover { box-shadow: 0 6px 20px rgba(0, 47, 167, .08); }
.hb-list-cover { flex: none; width: 220px; height: 140px; object-fit: cover; }
.hb-list-copy { min-width: 0; }
.hb-list-copy time { color: #a8aab8; font-size: 13px; }
.hb-list-copy h3 { margin: 6px 0 8px; font-size: 18px; color: #282828; }
.hb-list-copy p { margin: 0; font-size: 14px; color: #979797; line-height: 1.8; }
.hb-card { display: block; padding: 16px; background: #fff; border: 1px solid #eee; }
.hb-card-cover { display: block; width: 100%; height: 200px; object-fit: cover; margin-bottom: 12px; }
.hb-card-copy time { color: #a8aab8; font-size: 13px; }
.hb-card-copy h3 { margin: 6px 0 8px; font-size: 17px; color: #282828; }
.hb-card-copy p { margin: 0; font-size: 14px; color: #979797; line-height: 1.8; }
.hb-block-bd > .hb-card { margin-bottom: 16px; }
.hb-empty { padding: 40px 0; color: #a8aab8; text-align: center; font-size: 15px; }
.hb-page-head-cap a { color: inherit; text-decoration: none; }
@media (min-width: 900px) {
  .hb-block-bd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .hb-block-bd:has(> .hb-empty) { display: block; }
}

/* ---------------------------------------------------------------- C2. 轮播 / 发展历程的现网实测基线（2026-10-14，**仅注释，不改任何样式**）
 * 来源：https://www.huabote.com/home，Playwright 逐帧取样（viewport 1440×900）：
 *   · C 段的 .home-banner .swiper-wrapper{transition-duration:.5s} 只是「无 JS 兜底」；现网并无这条规则
 *     （静止态 inline transition-duration:0s、切换期 inline .3s）。layout/scripts.vm 的 initBanner 已按现网
 *     写成 inline 0ms/300ms —— inline 优先，本段兜底值在 JS 正常时不再生效。
 *   · 发展历程区块现网是**横向**无缝跑马灯（不是竖向）：滚动视口 div[overflow:hidden]（高度由单份内容撑出，
 *     本页实测 609）内两份 float:left 并排，轨道 inline width:3229px、transform:translate(Xpx,0px) 以 90px/s 左移。
 *     宽度与位移由 layout/scripts.vm 的 initDevelopHistory 运行时注入，本文件不需要补样式，也不要再给
 *     .web-develop/.develop-items 加固定高度或 overflow（会与现网几何不一致）。
 */