/* ============================================================
   well.youliyun.cn —— 全局响应式补缺样式（v1）
   说明：本文件在 </head> 末尾注入，优先级高于各页哈希 CSS。
   原站响应式是按「模块实例 ID」逐一生成的，且部分规则混有未替换的
   builder 占位属性（display-radio / font_radio 等），导致真机在
   手机端仍有 Banner 溢出、产品标题截断、个别区块横向溢出等问题。
   本文件用「通用类」做兜底，覆盖全站所有页面，不影响已正常的桌面布局。
   ============================================================ */

/* ---------- 基础盒模型 / 媒体流体 ---------- */
*, *::before, *::after { box-sizing: border-box; }

img, video, iframe, svg, canvas, .p_img img, .e_image img {
    max-width: 100% !important;
    height: auto !important;
}

/* 防横向滚动：任何写死宽度的元素导致的溢出都被裁剪，不再出现横向滚动条 */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 通用外层容器兜底：强制流式，不再被固定像素撑破 */
.main,
.e_container-13, .e_container-14, .e_container-2, .e_container-1,
.p_gridbox, .e_wrapper,
[class*="e_container"],
[class*="s_layout"] {
    max-width: 100% !important;
}

/* ============================================================
   手机端（≤768px）
   ============================================================ */
@media screen and (max-width: 768px) {

    /* 1) 所有网格单元堆叠为整行（覆盖原按实例 ID 的生成规则，兜底全站） */
    .p_gridCell,
    [class*="d_gridCell"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        clear: left;
    }

    /* 2) 通用循环列表（产品/新闻等，排除 swiper 轮播）：两列网格 */
    .e_loop > .p_loopitem:not(.swiper-slide),
    .e_loop .p_loopitem:not(.swiper-slide),
    .p_loopitem:not(.swiper-slide) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        margin: 0 0 12px 0 !important;
    }

    /* 3) 文字不被截断：标题/正文允许换行 */
    .p_loopitem .p_title,
    .p_loopitem .e_text,
    .p_loopitem .p_btitle,
    .p_title, .e_title, .p_btitle, .e_h1, .e_h2, .e_h3,
    .e_richText, .p_summary, .e_text {
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
    }

    /* 4) Banner：图文区满宽居中，图片自适应，去掉固定高度 */
    .e_bannerA-2 .p_info,
    .e_bannerA-2 .p_img {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        text-align: center !important;
    }
    .e_bannerA-2 .swiper-slide { width: 100% !important; height: auto !important; }
    .e_bannerA-2 .p_img img { width: 100% !important; height: auto !important; }

    /* 4b) 通用 swiper：移动端容器与滑块宽度跟随视口，不再被桌面内联宽度撑破 */
    .swiper-container, .swiper, .swiper-wrapper,
    .honoRBox, .honoRBoxBB {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .swiper-slide {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* 产品/案例轮播：移动端固定两列，杜绝整条溢出 */
    .honoRBox .swiper-slide,
    .e_loop-8 .swiper-slide,
    [class*="e_loop"] .swiper-slide {
        width: 50% !important;
        max-width: 50% !important;
    }

    /* 5) 导航汉堡按钮确保可见、可点（原生成规则可能因占位属性失效） */
    .e_navigationA-16 .p_navButton {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
    }
    .e_navigationA-16 .p_openIcon { display: block !important; }
    /* 滑出菜单内的关闭按钮也固定可见 */
    .e_navigationA-16 .p_navContent .p_navButton {
        position: fixed !important;
        top: 0;
        right: 0;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        z-index: 100;
    }

    /* 6) 表格在小屏可横向滚动而非撑破 */
    table { width: 100% !important; max-width: 100% !important; }
    .table-responsive, .e_table, form table { display: block; overflow-x: auto; }

    /* 7) 表单/容器不溢出 */
    form, .e_form, .e_form-19, .p_container { max-width: 100% !important; }
    input, textarea, select { max-width: 100% !important; box-sizing: border-box; }
}

/* ============================================================
   超小屏（≤480px）：循环列表改为单列，间距收紧
   ============================================================ */
@media screen and (max-width: 480px) {
    .e_loop > .p_loopitem:not(.swiper-slide),
    .e_loop .p_loopitem:not(.swiper-slide),
    .p_loopitem:not(.swiper-slide) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 标题字号适度收敛，避免一行挤爆 */
    .e_h1, .e_h1-23, .e_h1-6, .e_h1-11 { font-size: 22px !important; }

    /* 超小屏：轮播也改为单列，彻底消除横向溢出 */
    .honoRBox .swiper-slide,
    .e_loop-8 .swiper-slide,
    [class*="e_loop"] .swiper-slide {
        width: 100% !important;
        max-width: 100% !important;
    }
}