/*
 * yongding 主题桥接样式
 * 作用：把 v487 模板样式（skin/whir/css/whir.css）与本站原有头部（skin/css/style.css）缝合，
 *       让顶部导航的渲染保持改版前完全一致。
 *
 * 加载顺序（必须）：
 *   skin/css/style.css  ->  animate.min.css  ->  swiper.min.css  ->  whir.css  ->  bridge.css
 */

/* ------------------------------------------------------------------
 * 1. 顶部导航字号基准还原
 * whir.css 把 body 的 font-size 改成了 14px，而本站头部的字号大量使用
 * 0.75em / 0.875em / 1.5em 等相对单位，基准一变字号就整体变小。
 * 这里把头部容器的基准显式钉回 16px，等同改版前的渲染结果。
 * ------------------------------------------------------------------ */
#topBar,
#header { font-size: 16px; }

/* whir.css 的 img{vertical-align:top} 会改变 logo 行盒高度 */
#logo img { vertical-align: baseline; }

/* ------------------------------------------------------------------
 * 2. 首页「关于我们」区块：视频播放
 * 原模板为 <video> + 封面遮罩（点击封面播放）。本站沿用同结构：
 *   封面 = 栏目配图 [sort:pic]，视频 = skin/whir/video/company.mp4
 * whir.css 已定义 .Video a.play 的绝对定位遮罩与 .playbtn 按钮，此处只补
 * 视频与封面裁切，保证 552x450 框内不变形。
 * ------------------------------------------------------------------ */
.HomeAbout .Video img,
.HomeAbout .Video video { object-fit: cover; }

/* ------------------------------------------------------------------
 * 3. 不依赖 JS 也保证内容可见
 * 模板原逻辑是 common.js 先把这几块 hide() 再 show() 第一组，
 * 脚本未生效时整块会消失。这里补上兜底显示，JS 正常时不冲突
 * （hide() 写的是行内样式，优先级更高）。
 * ------------------------------------------------------------------ */
.AllPro .probox { display: block; }
.HomeNews .slide { display: block; }

/* ------------------------------------------------------------------
 * 4. 正文图片约束（沿用老主题的 #maximg 约定）
 * ------------------------------------------------------------------ */
#maximg img,
.wenben img,
.SinglePage img { max-width: 100%; height: auto !important; }

/* ------------------------------------------------------------------
 * 5. 类名隔离：v487 的 .nav  ->  .aboutnav
 * 本站 skin/css/style.css（default 主题头部样式）定义了全局 .nav：
 *     .nav            { margin-left:272px; margin-right:28px; }
 *     .nav ul         { float:right; }
 *     .nav li         { font-size:18px; float:left; line-height:100px; position:relative; }
 *     .nav li a       { display:block; padding:0 20px; position:relative; z-index:2; }
 *     @media(max-width:1000px) .nav { position:fixed; left:-230px; width:230px; ... }
 * v487 首页「关于我们」里也用 <div class="nav clearfix">，被同名污染：
 *     .nav 可用宽度被压成 288px -> li{width:25%} 只剩 72px -> "公司简介"折行。
 * 更隐蔽的是 skin/js/js.js 里 $('.nav-btn').click() 会给 $('.nav') 加 .open，
 * 移动端点汉堡菜单会把这一块变成全屏侧滑栏。
 * 因此模板内改名为 .aboutnav，并把 whir.css 中 .HomeAbout .Info .nav* 的
 * 规则按新类名在此重建（whir.css 保持原样，便于与原站逐行对照）。
 * ------------------------------------------------------------------ */
.HomeAbout .Info .aboutnav { border-top: 1px solid #eceef0; margin-top: 10px; padding: 32px 0 45px; }
.HomeAbout .Info .aboutnav li { width: 25%; text-align: center; float: left; }
.HomeAbout .Info .aboutnav li a { font-size: 15px; color: #666666; }
.HomeAbout .Info .aboutnav li a:hover { font-size: 15px; color: #0558a2; }
.HomeAbout .Info .aboutnav li a i { margin-right: 10px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; background: url(../images/aboutico.png) no-repeat; }
.HomeAbout .Info .aboutnav li.l1 a i { background-position: 0px top; }
.HomeAbout .Info .aboutnav li.l2 a i { background-position: -20px top; }
.HomeAbout .Info .aboutnav li.l3 a i { background-position: -40px top; }
.HomeAbout .Info .aboutnav li.l4 a i { background-position: -60px top; }
.HomeAbout .Info .aboutnav li.l1:hover a i { background-position: 0px -20px; }
.HomeAbout .Info .aboutnav li.l2:hover a i { background-position: -20px -20px; }
.HomeAbout .Info .aboutnav li.l3:hover a i { background-position: -40px -20px; }
.HomeAbout .Info .aboutnav li.l4:hover a i { background-position: -60px -20px; }

@media (max-width: 640px) {
  .HomeAbout .Info .aboutnav { margin-top: 15px; padding: 20px 0; }
  .HomeAbout .Info .aboutnav li { width: 23%; float: none; display: inline-block; zoom: 1; }
  .HomeAbout .Info .aboutnav li a i { margin: 0 auto; display: block; }
}

/* ------------------------------------------------------------------
 * 6. 首页「业务板块」图标行居中
 * whir.css 里 .HomeBusiness li{width:16.6666%} 是按「每行 6 个子栏目」写死的
 * （1200px 容器 / 6 = 200px 一格）。本站业务板块只有 4 个子栏目 ⇒
 * 4×200px = 800px，右侧 400px 全空，整行看起来"偏左"。
 * 这里把 ul 改成 flex 并整行居中：
 *   - 4 个时整行居中，保留原设计的 200px 列距与 140px 图标尺寸
 *   - 以后补到 5~6 个时自动铺满整行，仍然居中
 *   - 用 flex 而不是 inline-block：避免标签之间的空白符把每行挤到换行
 * ------------------------------------------------------------------ */
.HomeBusiness .s1 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.HomeBusiness .s1 ul > li {
  float: none;
  flex: 0 0 16.6666%;
  max-width: 16.6666%;
}


/* ==================================================================
 * §7 复刻 v487 头部：联系方式位置 + 导航链接 hover 配色
 * ------------------------------------------------------------------
 * 参照量测（v487 @1440，Chromium 计算样式）：
 *   .Header .tel { text-align:right; padding-top:16px; line-height:29px;
 *                  color:#08539b }  —— 右缘与「末个导航项文字」右缘齐平
 *   .MainNav li:hover span a { color:#4073d2 }（与 .onnav 当前项同色）
 *   两行文字实际位置（相对 header 顶部）：联系方式 ink 约 22~38，
 *   导航 ink 约 69~86；两行 ink 高度相同（均 16px 字号）
 *
 * 本站头部是单行 18px / line-height:100px，故做法是：
 *   · .headtel 绝对定位到右上，字号/行高/颜色照抄 v487
 *   · 导航项 a 加 padding-top:55px（不缩短可点区域，仍是满 header 高），
 *     文字 ink 落到 68.5~86.5 —— 与 v487 的 69.5~85.5 基本重合
 *   · 导航下拉 ul 的静态位置仍承接在 a 之后 = y:100，与改动前一致
 * 注意：只作用于一级导航链接；子菜单（.nav li ul）保持原样。
 * ================================================================== */
#header .headtel {
  position: absolute;
  right: 48px;          /* = .nav 的 margin-right:28px + 末项 a 的 padding-right:20px */
  top: 16px;
  z-index: 3;
  font-size: 16px;
  line-height: 29px;
  color: #08539b;
  white-space: nowrap;
}
#header .headtel span {
  color: #08539b;
}
/* 导航文字下移：55(padding) + 45(line-height) = 100，header 总高不变 */
#header .nav > ul > li {
  line-height: 45px;
}
#header .nav > ul > li > a {
  padding-top: 55px;
  padding-bottom: 0;
}
/* 链接 hover 配色（v487: #4073d2） */
#header .nav > ul > li > a:hover {
  color: #4073d2;
}

@media (max-width: 1280px) {
  /* 该断点下 .nav li a 的左右 padding 变为 15px */
  #header .headtel { right: 43px; }
}
@media (max-width: 1024px) {
  /* ≤1024px 导航变侧滑抽屉（style.css 接管）；联系方式隐藏
     —— v487 在 ≤998px 同样把 .Toper 整块 display:none */
  #header .headtel { display: none; }
  #header .nav > ul > li { line-height: 1.75em; }
  #header .nav > ul > li > a { padding-top: 10px; padding-bottom: 10px; }
}

/* ------------------------------------------------------------------
 * §7.1 当前栏目高亮：红 -> 蓝
 * style.css 里是 `.nav li.on > a, .nav li.cur > a { color:#f00 }`，
 * v487 则是 `.MainNav li.onnav span a { color:#4073d2 }`（与 hover 同色）。
 * 用 ID 前缀提高优先级覆盖，不改 style.css（保持原主题文件可比对）。
 * 该规则不加媒体查询：≤1024px 侧滑抽屉里也一并变蓝（原来那里也是红色）。
 * ------------------------------------------------------------------ */
#header .nav > ul > li.cur > a,
#header .nav > ul > li.on > a {
  color: #4073d2;
}


/* ------------------------------------------------------------------
 * §7.2 搜索图标下移，与导航文字同行
 * ------------------------------------------------------------------
 * style.css 里 `.search-btn{ top:50%; margin-top:-12px }` 是相对**整个 header**
 * 垂直居中，实测中心 y=51；而 §7 把导航文字的 ink 中心移到了 55+45/2 = 77.5
 * ⇒ 图标比导航文字高 26.5px，看起来卡在「联系方式」与导航之间的缝里。
 *
 * 做法：把 .search-btn 的定位区改成与导航 a 完全相同的 55px + 45px，
 * 图标在其中垂直居中 ⇒ 中心 77.5，与导航文字 ink 中心重合。
 * 只在 >1024px 生效：≤1024px 导航变侧滑抽屉、header 高度规则不同，
 * 那里仍按 style.css 的 `top:50%` 居中（原本就是对的）。
 * ------------------------------------------------------------------ */
@media (min-width: 1025px) {
  #header .search-btn {
    top: 55px;            /* 与 §7 的 #header .nav > ul > li > a 的 padding-top 一致 */
    height: 45px;         /* 与 §7 的 #header .nav > ul > li 的 line-height 一致 */
    line-height: 45px;
    margin-top: 0;
  }
  #header .search-btn i {
    vertical-align: middle;
    /* vertical-align:middle 是按「父基线 + x-height/2」对齐，不是行盒中心，
       实测图标 ink 中心比导航文字低 3px（80 vs 77），这里拉回同一水平线 */
    position: relative;
    top: -3px;
  }
}


/* ------------------------------------------------------------------
 * §8 去掉头部与下方 banner 之间的 20px 空隙
 * ------------------------------------------------------------------
 * 症状：首页 banner 顶边与 #header 底边之间有 20px 浅灰带（body 背景 #f5f6f9）。
 *
 * 根因：宿主 skin/css/style.css 第 30 行
 *         #header .inner { position:relative; margin-bottom:20px; }
 *       而 #header 自身没有 padding / border / overflow:hidden，
 *       子元素的 margin-bottom 会「穿透父元素」折叠到外侧
 *       ⇒ 表现为 #header 之后多出 20px 外边距（header 自身框高仍是 102px）。
 *       实测：header 底部 y=102，banner 顶部 y=122，elementFromPoint 落在 body 上。
 *
 * 做法：把该 margin 归零即可。header 框高与内部布局完全不变（仍 102px），
 *       banner 顶边由 y=122 回到 y=102，空隙消失。
 *       不改 style.css —— 回滚主题（theme=default）时宿主行为原样保留。
 *       本规则不加媒体查询：内页 banner、移动端同款空隙一并消除，全站一致。
 * ------------------------------------------------------------------ */
#header .inner {
  margin-bottom: 0;
}


/* ------------------------------------------------------------------
 * §9 页面底色改回白色（v487 原设计）
 * ------------------------------------------------------------------
 * 症状：整页底色是浅灰 #F5F6F9，「关于我们」「案例展示」「新闻资讯」
 *       三个区块看上去都是灰底，与原站（白底）不一致。
 *
 * 根因：whir.css 第 3 行本来就写着 body{ ... background:#fff; }（全局、无媒体查询），
 *       但本主题下实际生效的是宿主 skin/css/style.css 第 7 行
 *       body{ background-color:#F5F6F9; }（两处同为 body 选择器，优先级相同）。
 *
 * 做法：bridge.css 是本主题最后加载的一张，这里显式覆盖回白色。
 *       不改 whir.css / style.css —— 回滚主题（theme=default）时宿主灰底原样保留。
 * ------------------------------------------------------------------ */
body {
  background: #fff;
}


/* ------------------------------------------------------------------
 * §10 移动端「业务板块」改为行优先 3×2 网格
 * ------------------------------------------------------------------
 * 症状：≤768px 时业务板块顺序错乱。第 1 行显示
 *       「挖掘机出售 / 挖掘机维修 / 市政工程」，
 *       第 2 行才是「挖掘机出租 / 挖掘工程承接 / 土石方工程」，
 *       横向读下来与栏目顺序对不上。
 *
 * 根因：whir.css 在 ≤768px 用 .s2（独立 Swiper）取代 .s1（桌面 flex 行），
 *       而 index.html 的初始化是
 *         new Swiper('.HomeBusiness .s2', { slidesPerView:3, slidesPerColumn:2 })
 *       slidesPerColumn=2 让 Swiper 把 6 个 slide 按「先列后行」切成 3 列 × 2 行
 *       ⇒ 顺序变成列优先。且 Swiper 会给 wrapper/slide 写内联 width、transform，
 *       单靠 CSS 覆盖不稳定，必须同时去掉那处初始化（见 index.html）。
 *
 * 做法：去掉 .s2 的 Swiper 初始化后，这里把 wrapper 改成三列 CSS 网格
 *       ⇒ 行优先、一屏 6 个全部可见、无需滑动。
 *       列宽 = (100% - 两侧 15px)/3 = 120px @390，与原 3 列几何一致，视觉不变。
 *       桌面端 .s2 本来就是 display:none，不受影响；
 *       #homeban / .sp1 的 Swiper 各自独立，不受牵连。
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .HomeBusiness .s2 .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    transform: none !important;      /* 防御：万一日后有人再给 .s2 加初始化 */
  }

  .HomeBusiness .s2 .swiper-slide {
    width: auto !important;
    margin-right: 0 !important;
  }
}