/* =========================================
   PEOPLE YOU MAY KNOW
========================================= */

.mi-widget-card{
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 4px 18px rgba(0,0,0,0.05);
}

.mi-widget-header{
    padding:22px 24px;
    border-bottom:1px solid #f1f3f4;
}

.mi-widget-header h5{
    font-size:1.3rem;
    font-weight:700;
    margin:0;
}

.mi-widget-body{
    padding:14px 20px 20px;
}

.mi-suggestion-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 0;
    border-bottom:1px solid #f3f4f6;
}

.mi-suggestion-item:last-child{
    border-bottom:none;
}

.mi-suggestion-user{
    display:flex;
    align-items:center;
    gap:15px;
    min-width:0;
    flex:1;
}

.mi-suggestion-avatar{
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    border:3px solid #f3f4f6;
}

.mi-suggestion-info{
    min-width:0;
}

.mi-suggestion-name{
    font-size:1.12rem;
    font-weight:700;
    color:#202124;
    line-height:1.3;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mi-suggestion-headline{
    font-size:1rem;
    color:#6b7280;
    line-height:1.6;
    margin-top:5px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.mi-connect-btn{
    border-radius:999px;
    padding:10px 22px;
    font-size:1rem;
    font-weight:700;
    flex-shrink:0;
}

/* =========================================
   PROFILE PROGRESS WIDGET
========================================= */

.profile-progress-widget{
    padding-top:18px;
    border-top:1px solid #f1f1f1;
}

.profile-progress-widget p{
    font-size:1rem;
}

.profile-progress-bar{
    height:12px;
    border-radius:999px;
    overflow:hidden;
    background:#edf2f7;
}

/* =========================================
   TRENDING WIDGET
========================================= */

.mi-trending-widget{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,0.04);
    border:1px solid #f1f3f5;
}

.mi-trending-top{
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #f5f5f5;
}

.mi-trending-title{
    font-size:1.35rem;
    font-weight:800;
    margin-bottom:6px;
    color:#202124;
}

.mi-trending-subtitle{
    margin:0;
    font-size:1rem;
    color:#6b7280;
}

.mi-trending-fire{
    width:52px;
    height:52px;
    border-radius:16px;
    font-size:1.3rem;
}

.mi-trending-list{
    padding:12px 0;
}

.mi-trending-post{
    display:flex;
    gap:16px;
    padding:20px 24px;
    text-decoration:none;
    transition:all 0.25s ease;
    border-bottom:1px solid #f7f7f7;
}

.mi-trending-post:last-child{
    border-bottom:none;
}

.mi-trending-post:hover{
    background:#fafafa;
    transform:translateY(-1px);
}

.mi-trending-number{
    min-width:34px;
    font-size:1.8rem;
    font-weight:800;
    color:#d1d5db;
    line-height:1;
    margin-top:4px;
}

.mi-trending-main{
    flex:1;
    min-width:0;
}

.mi-trending-user{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.mi-trending-avatar{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.mi-trending-user-info{
    min-width:0;
}

.mi-trending-name{
    font-size:1.05rem;
    font-weight:700;
    color:#202124;
    line-height:1.3;
}

.mi-trending-views{
    font-size:0.95rem;
    color:#6b7280;
    margin-top:4px;
}

.mi-trending-post-text{
    font-size:1.02rem;
    line-height:1.8;
    color:#374151;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* =========================================
   PROFILE CARD
========================================= */

.profile-avatar{
    width:110px;
    height:110px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #fff;
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.profile-connection-box{
    background:#f8f9fc;
    padding:18px 26px;
    border-radius:20px;
    min-width:140px;
}

.profile-connection-number{
    font-size:1.7rem;
    font-weight:800;
    color:#0d6efd;
    line-height:1;
}

.profile-connection-label{
    margin-top:6px;
    font-size:1rem;
    color:#6c757d;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:576px){

    .mi-widget-header{
        padding:18px;
    }

    .mi-widget-body{
        padding:10px 16px 16px;
    }

    .mi-suggestion-avatar{
        width:56px;
        height:56px;
    }

    .mi-suggestion-name{
        font-size:1.02rem;
    }

    .mi-suggestion-headline{
        font-size:0.96rem;
    }

    .mi-connect-btn{
        padding:9px 18px;
        font-size:0.96rem; 
    }

    .mi-trending-top{
        padding:20px;
    }

    .mi-trending-post{
        padding:18px;
    }

    .mi-trending-number{
        font-size:1.4rem;
    }

    .mi-trending-avatar{
        width:44px;
        height:44px;
    }

    .mi-trending-post-text{
        font-size:1rem;
    }

    .profile-avatar{
        width:95px;
        height:95px;
    }
}