/* ============================================================
   DZhome 响应式覆盖层 (responsive.css)
   在 style.css 之后加载，处理各页面在 手机/平板/网页/电脑 四端的自适应。
   仅在有 @media 限定的断点内生效，不影响桌面端(>1200px)布局。
   ============================================================ */

/* ---------- 全局横向溢出保护（核心：解决"内容超出屏幕显示不了"） ---------- */
/* 注意：html 设置 overflow-x 后滚动容器会转移，必须显式允许纵向滚动，
   否则整个页面会"划不动"（首页、购物车都可能触发） */
html {
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
}
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}


/* ---------- 顶部导航栏铺满全宽（与购物车页宽度一致） ---------- */
.bor-header-container-top.container {
    max-width: 100% !important;
    width: 100% !important;
}

/* ---------- 桌面端内容容器加宽（内容占比更接近参考，中间不留大空白） ---------- */
@media (min-width: 1200px) {
    .container { max-width: 1360px; }
}

/* ---------- 平板 / 小桌面 (max 1200px) ---------- */
@media (max-width: 1200px) {
    .header-container .nav-item { padding: 0 8px; font-size: 14px; }
    .title-main .title-head, .head-top .head-title { font-size: 30px; }
}

/* ---------- 平板 (max 991px) ---------- */
@media (max-width: 991px) {
    /* 资质/合规 6 列 -> 每行 3 个 */
    .home-legalize .row .col { flex: 0 0 33.3333%; max-width: 33.3333%; }

    /* 服务 tab 导航换行，避免挤压 */
    .home-service .nav-tabs { flex-wrap: wrap; }
    .home-service .nav-tabs .nav-item { margin-bottom: 4px; }

    /* 数据机房指标 4 列 -> 每行 2 个 */
    .about-wrap .row .col-sm-3 { flex: 0 0 50%; max-width: 50%; }

    /* 文章/详情表格横向滚动，避免撑破布局 */
    .pages-contact table,
    .article-content table,
    .content table,
    .solution table,
    .w-table { display: block; overflow-x: auto; white-space: nowrap; }

    /* 新闻列表左栏(图)在平板上给固定高度，避免塌陷 */
    .home-annoucement .new-left { min-height: 220px; }
}

/* ---------- 手机 (max 768px) ---------- */
@media (max-width: 768px) {
    /* 资质/合规 2 个一行 */
    .home-legalize .row .col { flex: 0 0 50%; max-width: 50%; padding: 8px; }

    /* 首页大字标题缩放 */
    .title-main .title-head, .head-top .head-title,
    .main-header .main-title { font-size: 24px; line-height: 1.3; }
    .title-main .sub-head, .head-top .head-subtitle { font-size: 14px; }

    /* 轮播 slogan 缩放 */
    .home-swiper .container p.slogan { font-size: 24px !important; line-height: 1.3 !important; }
    .home-swiper .container p { font-size: 14px !important; }
    .home-swiper .container .btn { font-size: 14px; }

    /* 轮播：手机端整体降低高度（上下各截一些，其他端不变） */
    .home-swiper { height: 360px; }
    .home-swiper .swiper-slide { height: 360px; padding: 80px 15px 0; background-size: auto 360px; }

    /* 手机端头部高度收窄，main 预留间距同步（消除头部与轮播之间的空白行） */
    main { margin-top: 46px; }

    /* 按钮在手机上收紧内边距，避免"肿大" */
    .btn { padding: .4rem .8rem; font-size: 14px; line-height: 1.4; white-space: normal; }
    .product-recommend-btns .btn { height: 34px; line-height: 34px; padding: 0 10px; }

    /* 四大卖点图标块 2 个一行 */
    .home-event .event-items .col-sm-3 { flex: 0 0 50%; max-width: 50%; }
    .home-event .event-item { padding: 12px 8px; }

    /* 产品卡片内标签换行 */
    .product-detail-list-tags { flex-wrap: wrap; }
    .product-detail-list-tags .product-detail-list-tag { margin-bottom: 4px; }

    /* 服务 tab 内容行内边距 */
    .home-service .tab-content .row > .col-sm-6 { padding: 0; margin-bottom: 1.5rem; }
    .program-item-image img { width: 100%; height: auto; }

    /* 机房地图数据区不再强制平铺，避免溢出 */
    .intl-map-data { display: none; }
    .intl-map-object { width: 100%; }

    /* 底部联系方式列宽自适应 */
    .footer-top .row > div { margin-bottom: 1.5rem; }

    /* 新闻公告图文堆叠留白 */
    .home-annoucement .new-left, .home-annoucement .content-left { margin-bottom: 1rem; }

    /* 首页云产品推介：手机端只显示前 6 个，其余隐藏 */
    .product-detail-lists .product-detail-list-hide-mobile { display: none !important; }

    /* 专属管家服务 tab：手机端三个选项一行并排（覆盖 991px 的 wrap 与 column-reverse） */
    .home-service .nav-tabs { flex-wrap: nowrap !important; flex-direction: row !important; }
    .home-service .nav-tabs .nav-item { flex: 1 1 0 !important; margin-bottom: 0 !important; text-align: center; }
    .home-service .nav-tabs .nav-link { display: block; padding: 8px 4px !important; font-size: 13px !important; white-space: nowrap; }

    /* 首页顶部轮播：手机端文案与按钮整体居中（对齐参考版式） */
    .home-swiper .swiper-slide .container { text-align: center; }
    .home-swiper .swiper-slide .container .btn { margin-left: auto; margin-right: auto; }

    /* 首页四大服务板块：手机端一行两个、排成两行 */
    .home-event .event-items .row .col-sm-3 { flex: 0 0 50% !important; max-width: 50% !important; padding: 0 8px; }
    .home-event .event-item { background-size: 150px !important; background-position-x: 120% !important; }

    /* 手机端四卡片：缩小字体与图标（其他端不变） */
    .home-event .event-item { height: 84px; }
    .home-event .event-item-icon { width: 44px; height: 44px; margin-right: 12px; background-size: 44px; }
    .home-event .event-item-info h3 { font-size: 13px; line-height: 18px; margin-bottom: 2px; }
    .home-event .event-item-info p { font-size: 11px; line-height: 15px; }
}

/* 返回顶部按钮 */
.dz-back-top {
    position: fixed; right: 24px; bottom: 80px; width: 44px; height: 44px;
    border-radius: 50%; background: #2b6cff; color: #fff; display: flex;
    align-items: center; justify-content: center; cursor: pointer; z-index: 999;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all .3s ease; box-shadow: 0 4px 12px rgba(43,108,255,.35);
}
.dz-back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.dz-back-top:hover { background: #1f56d8; }
@media (max-width: 768px) {
    .dz-back-top { right: 16px; bottom: 70px; width: 38px; height: 38px; }
}

/* ---------- 小屏手机 (max 576px) ---------- */
@media (max-width: 576px) {
    /* 资质/合规保持 2 个一行，但缩小内边距 */
    .home-legalize .row .col { padding: 6px; }
    .home-legalize .row .col .text { font-size: 13px; }

    /* 卖点 2 个一行保持，内容对齐 */
    .home-event .event-item { display: flex; text-align: left; }

    /* 轮播标题继续缩小 */
    .home-swiper .container p.slogan { font-size: 20px !important; }

    /* 页首标题字号 */
    .head-top .head-title { font-size: 20px; }

    /* 数据机房指标 1 个一行在小屏更清晰 */
    .about-wrap .row .col-sm-3 { flex: 0 0 50%; max-width: 50%; }
}

/* ---------- 超小屏 (max 420px) ---------- */
@media (max-width: 420px) {
    .title-main .title-head, .head-top .head-title,
    .main-header .main-title { font-size: 20px; }
    .home-legalize .row .col { flex: 0 0 50%; max-width: 50%; }
    .product-detail-list-hd h3.product-detail-list-title { font-size: 15px; white-space: normal; }
}