/*
 * ========================================================
 * HC PROVIDER PROFILE V2
 * ========================================================
 *
 * 仅用于认证人员公开主页。
 * 不影响 apply.php / providers.php。
 */

html,
body{
    margin:0 !important;
    padding:0 !important;
    width:100%;
    min-height:100%;
}

body.hc-provider-profile-v2{
    margin:0 !important;
    padding:0 !important;
    width:100%;
    min-width:0;
    min-height:100vh;
    overflow-x:hidden;
    background:#f5f7f6;
}


/* --------------------------------------------------------
 * Global header full bleed
 * -------------------------------------------------------- */

body.hc-provider-profile-v2 .eco-global-header{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box;
}


/* --------------------------------------------------------
 * Main page
 * -------------------------------------------------------- */

body.hc-provider-profile-v2 .hc-sp-page{
    width:100% !important;
    max-width:none !important;
    min-height:calc(100vh - 90px);
    margin:0 !important;

    padding:
        34px
        clamp(18px,3.2vw,56px)
        100px !important;

    box-sizing:border-box;
}


/* --------------------------------------------------------
 * Main profile layout
 * -------------------------------------------------------- */

body.hc-provider-profile-v2 .hc-sp-profile{
    width:100%;
    max-width:1680px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(300px,360px)
        minmax(0,1fr);

    gap:26px;

    align-items:stretch;
}


/* --------------------------------------------------------
 * Cards
 * -------------------------------------------------------- */

body.hc-provider-profile-v2 .hc-sp-profile-side,
body.hc-provider-profile-v2 .hc-sp-profile-main{
    min-width:0;

    padding:30px !important;

    border-radius:22px;

    border:1px solid
        rgba(28,54,34,.08);

    background:#fff;

    box-shadow:
        0 12px 34px
        rgba(20,45,26,.06);

    box-sizing:border-box;
}


body.hc-provider-profile-v2 .hc-sp-profile-main{
    padding:
        34px
        clamp(28px,3vw,48px)
        44px !important;
}


/* --------------------------------------------------------
 * Identity card
 * -------------------------------------------------------- */

body.hc-provider-profile-v2 .hc-sp-avatar{
    width:108px !important;
    height:108px !important;

    font-size:40px !important;

    border-radius:50%;

    overflow:hidden;
}

body.hc-provider-profile-v2 .hc-sp-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}


body.hc-provider-profile-v2 .hc-sp-profile-name{
    margin:20px 0 7px !important;

    font-size:30px;
    line-height:1.25;
}


body.hc-provider-profile-v2 .hc-sp-badge{
    display:inline-flex;
    align-items:center;

    min-height:34px;

    padding:0 13px;

    border-radius:999px;

    background:#edf7e8;

    color:#4c7d2b;

    font-weight:700;

    line-height:34px;
}


/* --------------------------------------------------------
 * Information rows
 * -------------------------------------------------------- */

body.hc-provider-profile-v2 .hc-sp-info-row{
    padding:16px 0 !important;

    font-size:16px;
    line-height:1.7;

    border-bottom:
        1px solid
        rgba(0,0,0,.055);
}

body.hc-provider-profile-v2 .hc-sp-info-row:last-child{
    border-bottom:0;
}


body.hc-provider-profile-v2 .hc-sp-profile-main h2{
    margin:
        0
        0
        20px;

    font-size:27px;
    line-height:1.3;
}


/* --------------------------------------------------------
 * Contact / credit components
 * -------------------------------------------------------- */

body.hc-provider-profile-v2 .hc-contact-unlock-root,
body.hc-provider-profile-v2 #hc-provider-credit-license-root{
    margin-top:20px;
}


/* --------------------------------------------------------
 * Tablet
 * -------------------------------------------------------- */

@media(max-width:1100px){

    body.hc-provider-profile-v2 .hc-sp-page{
        padding:
            26px
            22px
            80px !important;
    }

    body.hc-provider-profile-v2 .hc-sp-profile{
        grid-template-columns:
            minmax(260px,320px)
            minmax(0,1fr);

        gap:20px;
    }
}


/* --------------------------------------------------------
 * Mobile
 * -------------------------------------------------------- */

@media(max-width:768px){

    body.hc-provider-profile-v2 .hc-sp-page{
        padding:
            16px
            14px
            70px !important;
    }

    body.hc-provider-profile-v2 .hc-sp-profile{
        display:grid;

        grid-template-columns:1fr;

        gap:14px;
    }

    body.hc-provider-profile-v2 .hc-sp-profile-side,
    body.hc-provider-profile-v2 .hc-sp-profile-main{
        width:100%;

        padding:22px !important;

        border-radius:18px;
    }

    body.hc-provider-profile-v2 .hc-sp-avatar{
        width:88px !important;
        height:88px !important;

        font-size:34px !important;
    }

    body.hc-provider-profile-v2 .hc-sp-profile-name{
        font-size:25px;
    }

    body.hc-provider-profile-v2 .hc-sp-profile-main h2{
        font-size:23px;
    }

    body.hc-provider-profile-v2 .hc-sp-info-row{
        font-size:15px;
        padding:14px 0 !important;
    }
}


/*
 * ========================================================
 * HC_PROVIDER_PUBLIC_CASE_SHARE_V1
 * ========================================================
 */

.hc-provider-vip-badge{
    display:inline-flex;
    margin-top:15px;
    padding:8px 13px;
    border-radius:999px;
    background:#fff4d6;
    color:#936b08;
    font-weight:800;
}

.hc-provider-public-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:18px 0;
}

.hc-provider-public-actions button{
    border:1px solid rgba(27,62,42,.16);
    border-radius:10px;
    padding:9px 13px;
    cursor:pointer;
    background:#fff;
    color:#244b34;
    font-weight:700;
}

.hc-provider-case-section{
    margin-top:32px;
    padding-top:28px;
    border-top:1px solid rgba(0,0,0,.07);
}

.hc-provider-case-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.hc-provider-case-item{
    border:0;
    padding:0;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    background:#f4f6f4;
}

.hc-provider-case-item img{
    display:block;
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:transform .18s ease;
}

.hc-provider-case-item:hover img{
    transform:scale(1.025);
}

.hc-provider-case-empty{
    padding:30px 16px;
    text-align:center;
    border-radius:14px;
    background:#f5f7f5;
    color:#778078;
}

.hc-provider-modal{
    position:fixed;
    z-index:99999;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.72);
}

.hc-provider-modal[hidden]{
    display:none;
}

.hc-provider-modal-inner{
    position:relative;
    max-width:95vw;
    max-height:92vh;
}

.hc-provider-modal-inner img{
    display:block;
    max-width:95vw;
    max-height:88vh;
    object-fit:contain;
    border-radius:14px;
}

.hc-provider-modal-close{
    position:absolute;
    z-index:2;
    top:8px;
    right:10px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    font-size:26px;
    line-height:38px;
    cursor:pointer;
}

.hc-provider-qr-card{
    position:relative;
    width:min(92vw,360px);
    padding:28px;
    border-radius:20px;
    background:#fff;
    text-align:center;
}

#hcProviderQrBox{
    display:flex;
    justify-content:center;
    padding:14px 0;
}

@media(max-width:768px){

    .hc-provider-case-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

/* ========================================================
 * HC_PROVIDER_CASE_GRID_FINAL_V1_START
 *
 * 绘城Mall
 * 公共服务人员主页案例统一排版
 *
 * designer / worker / construction_manager /
 * supervisor / material_provider / freight_driver /
 * 其他服务角色全部共用
 * ======================================================== */

.hc-provider-profile-v2 .hc-sp-profile-main{
    min-width:0;
}

.hc-provider-profile-v2 .hc-provider-case-section{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-top:26px;
}

.hc-provider-profile-v2 .hc-provider-case-section > h2{
    margin:0 0 18px;
}


/*
 * PC固定三列。
 *
 * 不使用 auto-fit / auto-fill，
 * 避免只有1张图片时自动拉伸占满整行。
 */
.hc-provider-profile-v2 .hc-provider-case-grid{
    display:grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap:18px !important;

    width:100%;
    max-width:100%;
    min-width:0;

    align-items:start;
    justify-items:stretch;
}


/*
 * 每一个案例都是统一尺寸卡片。
 */
.hc-provider-profile-v2 .hc-provider-case-item{
    display:block !important;

    position:relative;

    width:100% !important;
    min-width:0 !important;

    aspect-ratio:4 / 3;

    margin:0 !important;
    padding:0 !important;

    border:1px solid #e7ebe7 !important;
    border-radius:14px;

    overflow:hidden;

    background:#f4f6f4;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;

    box-sizing:border-box;

    box-shadow:
        0 2px 10px
        rgba(20,40,20,.05);

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


/*
 * 强制案例图片填充卡片。
 *
 * 无论原图：
 * - 横图
 * - 竖图
 * - 手机照片
 * - 施工现场照片
 * - 设计效果图
 *
 * 都不能再把页面高度无限撑开。
 */
.hc-provider-profile-v2
.hc-provider-case-item > img{

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    position:absolute;
    inset:0;

    object-fit:cover !important;
    object-position:center;

    margin:0 !important;
    padding:0 !important;

    border:0;

    transition:
        transform .28s ease;
}


/* PC悬停效果 */
@media (hover:hover){

    .hc-provider-profile-v2
    .hc-provider-case-item:hover{

        transform:translateY(-2px);

        border-color:#cfd9cf !important;

        box-shadow:
            0 8px 24px
            rgba(20,40,20,.10);
    }

    .hc-provider-profile-v2
    .hc-provider-case-item:hover > img{

        transform:scale(1.035);
    }

}


/*
 * 平板
 */
@media (max-width:1100px){

    .hc-provider-profile-v2
    .hc-provider-case-grid{

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:15px !important;
    }

}


/*
 * 手机
 */
@media (max-width:680px){

    .hc-provider-profile-v2
    .hc-provider-case-section{

        margin-top:22px;
    }

    .hc-provider-profile-v2
    .hc-provider-case-grid{

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:14px !important;
    }

    .hc-provider-profile-v2
    .hc-provider-case-item{

        border-radius:12px;
    }

}


/*
 * 极窄手机保护
 */
@media (max-width:380px){

    .hc-provider-profile-v2
    .hc-provider-case-grid{

        gap:12px !important;
    }

}

/* HC_PROVIDER_CASE_GRID_FINAL_V1_END */