/* ==========================================================
   079 V9.1 — MOBILE SAFE AREA FINAL
   ========================================================== */


/*
 * clip 不建立新的滚动容器；
 * 相比 overflow-x:hidden 更不容易破坏 sticky header。
 */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:clip !important;
}


/* 锚点如未来使用，也给头部留位置 */

#video-experience{
    scroll-margin-top:145px;
}


@media(max-width:820px){


    /* ======================================================
       所有页面最基础安全规则
       ====================================================== */

    html,
    body{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
    }


    body{
        overflow-x:clip !important;
    }


    main{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        overflow:visible !important;
    }


    main *,
    section *,
    article *{
        min-width:0;
    }


    img,
    video{
        max-width:100% !important;
    }



    /* ======================================================
       Header继续保持完整
       ====================================================== */

    .v9-header{
        position:sticky !important;
        top:0 !important;

        width:100% !important;

        padding:
            8px 10px 0 !important;
    }


    .v9-header-inner{
        width:100% !important;
        max-width:100% !important;

        margin:
            0 auto !important;
    }



    /* ======================================================
       服务内容页面
       这是目前第三张图真正出界的位置
       ====================================================== */

    /*
     * 常见页面外层全部钳制到手机宽度。
     * 即使旧模板保存了桌面 fixed width，
     * max-width 也会把它收回来。
     */

    .service-page,
    .services-page,
    .services,
    .service-content,
    .service-section,
    .services-section,
    .service-hero,
    .services-hero,
    .page-hero,
    .page-section,
    .content-section,
    .content-wrap,
    .page-wrap,
    .wrap,
    .narrow{

        width:100% !important;
        max-width:100% !important;

        min-width:0 !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }


    /*
     * 服务页Hero中的文字，
     * 统一留18px手机安全区。
     */

    .service-hero,
    .services-hero,
    .page-hero{

        padding-left:
            18px !important;

        padding-right:
            18px !important;
    }


    /*
     * 即使旧HTML的Hero没有上述class，
     * 服务页最上面的主要标题仍不会溢出。
     */

    main h1{
        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        padding-left:0 !important;
        padding-right:0 !important;

        font-size:
            clamp(
                36px,
                10vw,
                44px
            ) !important;

        line-height:
            1.10 !important;

        letter-spacing:
            -.035em !important;

        overflow-wrap:
            break-word !important;
    }


    main p{
        max-width:100% !important;

        overflow-wrap:
            break-word !important;
    }



    /* ======================================================
       服务内容卡片
       不允许贴死屏幕左右
       ====================================================== */

    .service-card,
    .services-card,
    .price-card,
    .service-box,
    .service-panel,
    .service-delivery,
    .after-sales-box{

        width:
            calc(100% - 28px) !important;

        max-width:
            100% !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }



    /* ======================================================
       联系我们页面卡片
       统一14px安全边距
       ====================================================== */

    .contact-card,
    .contact-section,
    .contact-panel,
    .contact-block{

        width:
            calc(100% - 28px) !important;

        max-width:
            100% !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }



    /* ======================================================
       首页最后再保险：
       图片100%居中，绝不碰右边
       ====================================================== */

    .hero-image.v6-hero-art{

        width:
            min(100%,360px) !important;

        max-width:
            360px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        justify-self:
            center !important;
    }


    .hero-buttons{

        width:100% !important;

        max-width:100% !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    .hero-buttons a,
    .hero-buttons .button{

        width:100% !important;

        max-width:100% !important;

        margin-left:0 !important;
        margin-right:0 !important;
    }

}


@media(max-width:390px){

    main h1{

        font-size:
            35px !important;

    }

}