/* ==========================================================
   绘城官网
   本地空间生态 V2

   结构：
   1. 全国地图全宽
   2. 当前城市
   3. 材料商横排
   4. 施工团队横排

   不再使用左右双栏
   不再使用内部纵向滚动
   ========================================================== */


/* ==========================================================
   SECTION
   ========================================================== */

#local-ecosystem{
    overflow:hidden;
}


/*
 * 打破官网原有 wrap 最大宽度。
 *
 * 内容接近全屏，只保留少量页面安全边距。
 */
#local-ecosystem-content{
    position:relative;

    width:calc(100vw - 36px);
    max-width:none;

    left:50%;
    transform:translateX(-50%);

    margin:0;
    padding:0;

    box-sizing:border-box;
}


#local-ecosystem .eco-layout{
    width:100%;
    max-width:none;
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:18px;

    box-sizing:border-box;
}


/* ==========================================================
   全国地图
   ========================================================== */

#local-ecosystem .eco-map{
    width:100%;
    max-width:none;
    min-width:0;

    margin:0;
    padding:22px;

    background:#fff;

    border:1px solid #edf0f2;
    border-radius:20px;

    box-shadow:
        0 14px 38px
        rgba(15,23,42,.07);

    box-sizing:border-box;

    overflow:hidden;
}


/* 地图顶部标题 */

#local-ecosystem .eco-map-head{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin:0 0 16px;

    box-sizing:border-box;
}


#local-ecosystem .eco-map-eyebrow{
    display:block;

    margin:0 0 4px;

    color:#7c8790;

    font-size:11px;
    line-height:1.3;
    font-weight:800;

    letter-spacing:1.4px;
}


#local-ecosystem .eco-map-head h3{
    margin:0;

    color:#15191d;

    font-size:24px;
    line-height:1.3;
    font-weight:800;
}


#local-ecosystem .eco-map-status{
    flex:0 0 auto;

    padding:8px 14px;

    border-radius:999px;

    background:#f4f7f5;

    color:#68746f;

    font-size:13px;
    font-weight:700;
}


/* ==========================================================
   MAP FRAME
   ========================================================== */

#local-ecosystem .eco-map-frame-shell{
    position:relative;

    width:100%;

    height:680px;

    margin:0;

    border-radius:16px;

    background:#fff;

    overflow:hidden;

    box-sizing:border-box;
}


#local-ecosystem .eco-map-frame{
    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    border:0;

    background:#fff;

    overflow:hidden;

    /*
     * 固定地图。
     *
     * 用户不能拖动 iframe，
     * 不能滚轮缩放，
     * 不能在地图内部滚动。
     *
     * 页面本身依然可以正常上下滚动。
     */
    pointer-events:none;
}


/* ==========================================================
   本地资源区域
   ========================================================== */

#local-ecosystem .eco-local{
    width:100%;
    max-width:none;

    height:auto;
    min-height:0;
    max-height:none;

    margin:0;
    padding:0;

    background:transparent;

    border:0;
    border-radius:0;

    box-shadow:none;

    overflow:visible;

    box-sizing:border-box;
}


/* 当前城市 */

#local-ecosystem .eco-location{
    width:100%;

    min-height:54px;

    display:flex;
    align-items:center;

    gap:7px;

    margin:0;
    padding:0 20px;

    background:#fff;

    border:1px solid #edf0f2;
    border-radius:16px;

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.045);

    color:#5c666d;

    font-size:14px;
    line-height:1.5;

    box-sizing:border-box;
}


#local-ecosystem .eco-location-icon{
    font-size:16px;
}


#local-ecosystem .eco-location strong{
    color:#171b1f;
    font-size:15px;
}


/* ==========================================================
   资源主体
   ========================================================== */

#local-ecosystem .eco-grid{
    width:100%;
    max-width:none;

    display:block;

    margin:0;

    padding:0;

    overflow:visible;

    box-sizing:border-box;
}


/* ==========================================================
   材料商 / 施工团队 大卡片
   ========================================================== */

#local-ecosystem .eco-box{
    width:100%;
    max-width:none;

    margin:16px 0 0;

    padding:22px;

    background:#fff;

    border:1px solid #edf0f2;
    border-radius:20px;

    box-shadow:
        0 12px 32px
        rgba(15,23,42,.055);

    box-sizing:border-box;
}


/* 大标题行 */

#local-ecosystem .eco-box-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin:0 0 18px;
}


#local-ecosystem .eco-box-head > div > span{
    display:block;

    margin:0 0 4px;

    color:#8a949b;

    font-size:10px;
    line-height:1.3;
    font-weight:800;

    letter-spacing:1.2px;
}


#local-ecosystem .eco-box-head h3{
    margin:0;

    color:#1a1f23;

    font-size:21px;
    line-height:1.35;
    font-weight:800;
}


#local-ecosystem .eco-box-head > strong{
    flex:0 0 auto;

    color:#768078;

    font-size:13px;
    font-weight:700;
}


/* ==========================================================
   横向资源卡
   ========================================================== */

#local-ecosystem .eco-card-row{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px,1fr)
        );

    gap:14px;

    margin:0;
    padding:0;

    box-sizing:border-box;
}


/* 单张材料商 / 工人 */

#local-ecosystem .eco-card{
    width:100%;
    min-width:0;

    min-height:122px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    margin:0;
    padding:18px;

    background:#fafbfb;

    border:1px solid #edf0f2;
    border-radius:15px;

    box-sizing:border-box;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


#local-ecosystem .eco-card:hover{
    transform:translateY(-2px);

    border-color:#dfe5e2;

    box-shadow:
        0 10px 25px
        rgba(15,23,42,.065);
}


#local-ecosystem .eco-card h4{
    margin:0 0 8px;

    color:#191e22;

    font-size:15px;
    line-height:1.45;
    font-weight:800;

    overflow-wrap:anywhere;
}


#local-ecosystem .eco-card p{
    margin:3px 0;

    color:#69727a;

    font-size:13px;
    line-height:1.55;

    overflow-wrap:anywhere;
}


#local-ecosystem .eco-card .eco-card-type{
    color:#4d5b54;
    font-weight:600;
}


/* 无数据 */

#local-ecosystem .eco-empty-card{
    min-height:100px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:#fafbfb;

    border:1px dashed #dfe4e2;
    border-radius:15px;

    color:#8a949b;

    font-size:14px;

    box-sizing:border-box;
}


/* 加载错误 */

#local-ecosystem .eco-load-error{
    width:100%;

    padding:36px;

    background:#fff;

    border:1px solid #edf0f2;
    border-radius:18px;

    text-align:center;

    color:#7b858c;
}


/* ==========================================================
   大屏
   ========================================================== */

@media(min-width:1600px){

    #local-ecosystem-content{
        width:calc(100vw - 64px);
    }

    #local-ecosystem .eco-map-frame-shell{
        height:700px;
    }

    #local-ecosystem .eco-card-row{
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(250px,1fr)
            );
    }

}


/* ==========================================================
   平板
   ========================================================== */

@media(max-width:1024px){

    #local-ecosystem-content{
        width:calc(100vw - 28px);
    }

    #local-ecosystem .eco-map{
        padding:18px;
        border-radius:18px;
    }

    #local-ecosystem .eco-map-frame-shell{
        height:560px;
    }

    #local-ecosystem .eco-card-row{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* ==========================================================
   手机
   ========================================================== */

@media(max-width:600px){

    #local-ecosystem-content{
        width:calc(100vw - 16px);
    }


    #local-ecosystem .eco-layout{
        gap:10px;
    }


    #local-ecosystem .eco-map{
        padding:12px;

        border-radius:14px;
    }


    #local-ecosystem .eco-map-head{
        align-items:flex-start;

        margin-bottom:10px;
    }


    #local-ecosystem .eco-map-head h3{
        font-size:18px;
    }


    #local-ecosystem .eco-map-status{
        display:none;
    }


    /*
     * 手机地图保持固定比例，
     * 不需要左右拖动。
     */
    #local-ecosystem .eco-map-frame-shell{
        height:390px;

        border-radius:10px;
    }


    #local-ecosystem .eco-location{
        min-height:48px;

        padding:0 14px;

        border-radius:13px;

        font-size:13px;
    }


    #local-ecosystem .eco-location strong{
        font-size:13px;
    }


    #local-ecosystem .eco-box{
        margin-top:10px;

        padding:15px 12px;

        border-radius:14px;
    }


    #local-ecosystem .eco-box-head{
        margin-bottom:12px;
    }


    #local-ecosystem .eco-box-head h3{
        font-size:17px;
    }


    /*
     * 手机：
     * 卡片横向滑动。
     *
     * 不把卡片压成很窄的小格子。
     */
    #local-ecosystem .eco-card-row{
        display:flex;

        flex-wrap:nowrap;

        gap:10px;

        overflow-x:auto;
        overflow-y:hidden;

        padding:
            0
            2px
            5px;

        scroll-snap-type:x proximity;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }


    #local-ecosystem .eco-card-row::-webkit-scrollbar{
        display:none;
    }


    #local-ecosystem .eco-card{
        flex:
            0
            0
            min(78vw,300px);

        width:auto;

        min-height:112px;

        padding:15px;

        border-radius:13px;

        scroll-snap-align:start;
    }

}

/* ==========================================================
   HC ECOSYSTEM MAP V2.1
   地图固定，但保留城市节点点击能力
   ========================================================== */

#local-ecosystem .eco-map-frame{
    pointer-events:auto !important;
}