/* ==========================================================================
   广东省金禧达人力资源管理有限公司 · 官网 —— 移动端布局（≤1023px）
   --------------------------------------------------------------------------
   引入方式：各页面在 style.css / pages 样式之后加载本文件。
   ≤1023px 时 main.js 不再对 .stage 做等比缩放，由本文件把「固定 1200 画布 +
   绝对定位」的模块重排为流式/堆叠布局；≥1024px 的一切样式保持桌面复刻原样。
   例外：新闻详情 news-9032690 / 9178052 / 9246175（body.m-skip）继续整页
   等比缩放，不加载本文件。

   覆盖约定：
   · 覆盖内联/页面 CSS 的 left/top 位置 → 把元素改为 position:static（静态定位
     会忽略 left/top，内联值一并失效）；
   · 覆盖内联 width/height、页面 CSS 固定尺寸 → 显式 width/height + !important；
   · .sec 的内联高度（height:431px 等）→ height:auto !important。
   ========================================================================== */

@media (max-width: 1023px) {

  /* ---------- 0. 舞台与容器 ---------- */
  .stage { width: 100%; }
  .stage-wrap { height: auto !important; }
  .wrap { width: 100%; }
  .sec { width: auto; height: auto !important; margin: 28px auto; padding: 0 16px; }

  /* 通用大标题：桌面 34px 在手机上偏大，缩到 22px；英文副标题同步收紧 */
  .ttl-blue { font-size: 22px; line-height: 1.4; padding-bottom: 10px; }
  .ttl-blue::after { width: 36px; }
  .en-blue { margin-top: 8px; font-size: 12px; letter-spacing: 1px; }

  /* ---------- 1. 页头 ----------
     logo / 热线图标 / 标语同处一行（右侧留 58px 给汉堡按钮），标语可折行。 */
  .topbar,
  body.inner .topbar,
  body.head-home .topbar { height: auto; }
  .topbar .wrap { display: flex; align-items: center; padding: 10px 14px; padding-right: 58px; gap: 6px; }
  .topbar .logo,
  body.inner .topbar .logo,
  body.head-home .topbar .logo { position: static; flex: none; width: 132px; height: auto; }
  .topbar .logo img,
  body.inner .topbar .logo img,
  body.head-home .topbar .logo img { width: 100%; height: auto; }
  .topbar .hotline { position: static; flex: none; width: 18px; height: auto; margin-left: 2px; }
  .topbar .tagline,
  body.inner .topbar .tagline,
  body.head-home .topbar .tagline { position: static; flex: 1; width: auto; margin-top: 0; text-align: left; font-size: 11px; line-height: 1.5; }

  /* ---------- 2. 导航 ----------
     折叠态导航条高度为 0（页头下方不再出现空蓝条），汉堡按钮用负 top 浮回页头行内；
     展开时导航条从页头下方展开，高度随菜单增长，蓝底由 .bleed（height:100%）铺满。
     .navbar 必须保持 relative，否则 .bleed 的包含块会变成整个 .stage。 */
  .navbar { height: auto; min-height: 0; }
  .navbar > .bleed { top: 0; }
  .navbar .nav { display: flex; max-height: 0; overflow: hidden; padding: 0; transition: max-height .25s ease; }
  .navbar .nav.open { max-height: 1200px; padding: 8px 0; }
  .nav-toggle { top: -50px; right: 14px; border-color: var(--blue); }
  .nav-toggle span { background: var(--blue); }
  /* 子菜单常显：一级项直接跳转（点击「关于我们」进入页面），「我们的门店」直接可见 */
  .navbar .nav .subnav { display: block; }

  /* ---------- 3. 首屏轮播 / 内页顶部图 ----------
     首页 hero 图内嵌 logo 与标语：放大 185% 取图中部（文字区在原图 23%~77%），
     容器高度随图 4:1 等比，手机上标题放大近一倍、清晰可读。
     内页 banner 是纯风景图，可加高并裁切两侧。 */
  .hero { height: 46vw; }
  .hero .slide { background-size: 185% auto; background-position: 50% 50%; }
  .hero .arrow { display: none; }
  .hero .dots { bottom: 8px; }
  body:not(.inner) .hero { margin-top: 0; margin-bottom: 0; }
  .hero-honors { margin-bottom: 0; }
  .banner { height: 40vw; margin-top: 0; }
  .banner .arrow, .banner .dot { display: none; }
  .banner + .sec { margin-top: 28px; }

  /* ---------- 4. 页脚 ----------
     DOM 顺序是 蓝带 / 黑条 / 备案 / 主内容，桌面靠绝对定位摆放；
     移动端改 flex 纵向 + order，把主内容（蓝）、版权（黑）、备案（白）重排。 */
  .footer,
  body.inner:not(.head-home) .footer { height: auto !important; margin-top: 0 !important; display: flex; flex-direction: column; }
  .footer .bleed.ft-blue { display: none; }
  .footer .bleed.ft-black,
  .footer .bleed.ft-icp { position: static; width: auto; height: auto; margin: 0; }
  .footer .bleed.ft-black { order: 2; }
  .footer .bleed.ft-icp { order: 3; }
  .footer .ft-main,
  body.inner .footer .ft-main { order: 1; height: auto; background: var(--blue); padding: 26px 16px 22px; }
  /* logo 图左侧蓝色留白比右侧多约 9px，居中后再左移补偿，使图内图形视觉居中 */
  .footer .ft-logo { position: static; width: 240px; height: auto; margin: 0 auto; transform: translateX(-9px); }
  .footer .ft-title,
  body.inner .footer .ft-title { position: static; margin-top: 20px; text-align: center; }
  .footer .ft-contact,
  body.inner .footer .ft-contact { position: static; margin-top: 10px; text-align: center; font-size: 13px; line-height: 2; }
  .footer .ft-qr { position: static; width: 120px; height: auto; margin: 18px auto 0; }
  .footer .ft-line { display: none; }

  /* ---------- 5. 首页 ---------- */
  /* 5.1 公司简介：标题+正文 → 配图（图文上下紧邻） */
  .sec-intro .intro-txt { position: static; width: auto; }
  .sec-intro .intro-para { line-height: 26px; }
  .sec-intro .intro-img { position: static; width: 100%; height: auto; margin-top: 18px; }

  /* 5.2 企业文化理念：与公司简介保持同一顺序——标题+列表 → 配图（不再让图跑到标题前） */
  .sec-culture { display: flex; flex-direction: column; }
  .sec-culture .culture-txt { position: static; width: auto; order: 1; }
  .sec-culture .culture-img { position: static; width: 100%; height: auto; order: 2; margin-top: 20px; }
  .sec-culture .culture-list { margin-top: 16px; }

  /* 5.3 五大服务优势：5 张卡片改自动列网格（窄屏 2 列、极致窄屏 1 列） */
  .sec-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .sec-services .svc-head { position: static; grid-column: 1 / -1; }
  .sec-services .card-svc { position: static; width: auto; height: auto; padding-bottom: 16px; }
  .sec-services .card-svc img { width: 100%; height: auto; }
  .sec-services .card-svc .ttl { margin-top: 12px; }
  .sec-services .card-svc .txt { margin: 8px 10px 0; }

  /* 5.4 合作品牌：5 列 logo 墙改自动列网格 */
  .sec-brand .brand-head { position: static; }
  .sec-brand .brand-grid {
    position: static; width: auto; margin-top: 20px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); row-gap: 14px;
  }
  .sec-brand .brand-grid img { width: 100%; height: auto; }

  /* ---------- 6. 关于我们 ---------- */
  .sec-profile .ph { position: static; width: 100%; height: auto; overflow: visible; }
  /* 容器改 3:2（更贴近两张原图比例），避免把照片横向裁得太紧 */
  .sec-profile .ph-track { position: relative; width: 100%; height: 0; padding-bottom: 66.67%; overflow: hidden; }
  .sec-profile .ph-slide { width: auto; height: auto; inset: 0; }
  .sec-profile .ph-slide.s1,
  .sec-profile .ph-slide.s2 { background-size: cover; background-position: 50% 50%; }
  .sec-profile .ph-arrow { display: none; }
  /* 圆点是 span 内联元素，必须转块级后才能 text-align 居中 */
  .sec-profile .ph-dots { display: block; position: static; left: auto; top: auto; margin-top: 10px; text-align: center; }
  .sec-profile .ph-dots i { width: 26px; height: 26px; margin: 0 5px; font-size: 12px; line-height: 26px; }
  .sec-profile .txt-box { position: static; width: auto; margin-top: 20px; }
  .sec-profile .name { font-size: 18px; line-height: 1.5; }
  .sec-profile .para { margin-top: 14px; line-height: 26px; }

  /* ---------- 7. 案例展示 ---------- */
  .sec-cases .case-list {
    position: static; width: auto; height: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
  }
  .sec-cases .case-item { position: static; width: auto; height: auto; overflow: visible; }
  .sec-cases .case-pic { position: static; width: 100%; height: auto; aspect-ratio: 276 / 168; }
  .sec-cases .case-pic img { position: static; width: 100% !important; height: 100% !important; object-fit: cover; }
  .sec-cases .case-ttl {
    position: static; width: auto; height: auto; margin-top: 8px;
    font-size: 13px; line-height: 20px; -webkit-line-clamp: 2;
  }
  .sec-cases .pager-case { position: static; width: auto !important; margin-top: 6px; text-align: center !important; }
  .sec-cases .pager-case .pg { position: static; display: inline-block; top: auto; margin: 0 4px; }

  /* ---------- 8. 新闻中心 ---------- */
  .sec-news .news-list { display: flex; flex-direction: column; gap: 16px; }
  .sec-news .news-card { position: static; width: auto; height: auto; padding: 24px 20px; }
  .sec-news .news-card:hover { transform: none; background-color: #fff; }
  .sec-news .news-card:hover .nc-date,
  .sec-news .news-card:hover .nc-desc { color: #989898; }
  .sec-news .news-card:hover .nc-title { color: #262626; }
  .sec-news .news-card:hover .nc-btn { color: #4dadf7; }
  .sec-news .news-card .nc-title { -webkit-line-clamp: 2; padding-top: 14px; }
  .sec-news .news-card .nc-desc { height: auto; -webkit-line-clamp: 2; padding-top: 12px; }
  .sec-news .news-card .nc-btn { padding-top: 18px; }
  .sec-news .pager { position: static; width: auto; margin-top: 24px; }
  .sec-news .pager ul { flex-wrap: wrap; justify-content: center; }

  /* ---------- 9. 企业服务 ---------- */
  .sec-svc .svc-head { position: static; width: auto; margin-bottom: 24px; }
  .sec-svc .svc-head .en { font-size: 26px; line-height: 1.6; }
  .sec-svc .svc-line { display: none; }
  .sec-svc .svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .sec-svc .svc-card { position: static; width: auto; height: auto; }
  .sec-svc .svc-card img { width: 100%; height: auto; }
  .sec-svc .svc-card .bar { display: none; }
  /* 桌面版标题是白字白底（原站如此，实测不可见）；移动端按设计意图补蓝底使标题可读 */
  .sec-svc .svc-card .ttl {
    position: static; padding: 0 10px; height: 44px;
    background: var(--blue); font-size: 15px; line-height: 44px;
  }

  /* ---------- 10. 我们的门店 ---------- */
  .sec-stores { padding: 8px 16px 32px; }
  .sec-stores .stores-area { font-size: 26px; }
  .sec-stores .stores-area::before,
  .sec-stores .stores-area::after { width: 28px; }
  .sec-stores .store-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .sec-stores .store-card { flex-direction: column; }
  .sec-stores .store-card .pic { width: 100%; height: auto; aspect-ratio: 240 / 152; }
  /* 门店照片多为竖构图，必须按横图比例裁切，否则会把卡片撑高 */
  .sec-stores .store-card .pic img { height: auto; aspect-ratio: 240 / 152; object-fit: cover; }
  .sec-stores .store-card .info { padding: 16px 18px 20px; }

  /* ---------- 11. 联系我们 ---------- */
  .sec-contact { padding: 0 16px 32px; }
  /* ct-bg 是 z-index:0 的定位元素，会盖住 static 排版的正文，压到负层去 */
  .sec-contact > .ct-bg { z-index: -1; }
  .sec-contact .ct-card { display: none; }
  .sec-contact .ct-title,
  .sec-contact .ct-sub,
  .sec-contact .ct-rule,
  .sec-contact .ct-rows,
  .sec-contact .ct-map { position: static; width: auto; height: auto; }
  .sec-contact .ct-title { padding-top: 32px; overflow: visible; }
  .sec-contact .ct-title-en { font-size: 40px; }
  .sec-contact .ct-sub { margin-top: 14px; overflow: visible; }
  .sec-contact .ct-sub-cn { font-size: 18px; }
  .sec-contact .ct-rule-gray { display: none; }
  .sec-contact .ct-rule-blue { margin: 16px 0 4px; }
  .sec-contact .ct-rule-blue i { position: static; display: block; margin: 0; }
  .sec-contact .ct-rows { margin-top: 16px; overflow: visible; }
  .sec-contact .ct-lh2 { line-height: 1.9; }
  .sec-contact .ct-row { font-size: 15px; }
  .sec-contact .ct-map { width: 100%; height: 300px; margin-top: 24px; }

  /* ---------- 12. 招聘岗位 ---------- */
  .zp-list { position: static; width: auto; }
  .zp-list .zp-row { height: auto; padding-bottom: 14px; }
  .zp-list .zp-row .views { position: static; justify-content: flex-start; margin-top: 6px; }
  .zp-pager { position: static; width: auto; padding-left: 0; margin-top: 20px; }

  /* ---------- 13. 长图页（发展历程 / 团队风采 / 金禧达荣誉） ---------- */
  .sec-pic,
  .sec-honors { padding: 0; }
  .sec-pic .a,
  .sec-honors .pic { position: static; width: 100%; height: auto; margin: 0; }

  /* ---------- 14. 详情页（案例 / 岗位） ---------- */
  /* 14.1 面包屑与标题 */
  .pd-crumbs,
  .sd-crumbs { position: static; left: auto; padding-top: 4px; }
  .pd-crumbs a, .pd-crumbs span,
  .sd-crumbs a, .sd-crumbs span { line-height: 1.8; }

  /* 14.2 图片轮播（600×400 → 全宽 3:2 比例盒） */
  .gallery { position: static; width: auto !important; height: auto !important; margin: 14px 0 4px; }
  .gallery .g-mask { position: relative; width: 100% !important; height: 0 !important; padding-bottom: 66.67%; overflow: hidden; }
  .gallery .g-slide,
  .gallery .g-slide.g-next,
  .gallery .g-slide.park-l,
  .gallery .g-slide.park-r { left: 0 !important; transform: none !important; inset: 0; width: auto !important; height: auto !important; }
  .gallery .g-slide img { max-width: 100% !important; max-height: 100% !important; }
  .gallery .g-dots { position: static; width: auto; top: auto; margin-top: 8px; }

  /* 14.3 案例详情正文 */
  .pd-title { position: static; width: auto; margin: 10px 0 12px; font-size: 18px; line-height: 1.5; }
  .pd-content { position: static; width: auto; font-size: 15px; line-height: 1.9; }
  .pd-content .lead { margin-top: 0; font-size: 16px; line-height: 1.6; }
  .pd-content p > img { width: 100% !important; max-width: 100% !important; height: auto !important; }
  .pd-nav { position: static; width: auto; margin-top: 8px; text-align: left; }
  .pd-nav.next { text-align: left; }

  /* 14.4 新闻/岗位详情正文 */
  .sd-title { position: static; width: auto; margin: 12px 0 8px; font-size: 19px; line-height: 1.5; }
  .sd-meta { position: static; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 2px 16px; }
  .sd-meta .date, .sd-meta .time,
  .sd-meta .hits, .sd-meta .fav { position: static; left: auto; }
  .sd-body { position: static; width: auto; font-size: 15px; line-height: 1.9; }
  .sd-nav { position: static; width: auto; margin-top: 8px; }
}

/* ---------- 15. 极窄屏（≤359px）---------- */
@media (max-width: 359px) {
  .topbar .logo,
  body.inner .topbar .logo,
  body.head-home .topbar .logo { width: 108px; }
  .topbar .wrap { padding-right: 54px; }
  .topbar .tagline,
  body.inner .topbar .tagline,
  body.head-home .topbar .tagline { font-size: 10px; }
}