/*======================================
EIVOX PROFILE CSS
Version: 1.0
======================================*/


/*======================================
PROFILE LAYOUT
======================================*/

.profile{

    display:flex;

    flex-direction:column;

    gap:30px;

}


/*======================================
PROFILE HEADER
======================================*/

.profile-header{

    position:relative;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius-xl);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}


/*======================================
COVER
======================================*/

.profile-cover{

    height:220px;

    background:linear-gradient(
        135deg,
        var(--primary),
        #4f46e5
    );

}


/*======================================
PROFILE INFO
======================================*/

.profile-info{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    flex-wrap:wrap;

    padding:0 30px 30px;

    margin-top:-70px;

}


/*======================================
AVATAR
======================================*/

.profile-avatar{

    display:flex;

    align-items:flex-end;

    gap:20px;

}

.profile-avatar img{

    width:140px;

    height:140px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid var(--card);

    background:var(--card);

}

.profile-name{

    font-size:2rem;

    font-weight:var(--weight-bold);

    color:var(--text);

}

.profile-role{

    margin-top:6px;

    color:var(--text-muted);

}


/*======================================
PROFILE ACTIONS
======================================*/

.profile-actions{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}


/*======================================
PROFILE GRID
======================================*/

.profile-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

}


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

.profile-card{

    padding:25px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

}

.profile-card-title{

    margin-bottom:20px;

    font-size:1.2rem;

    font-weight:var(--weight-bold);

    color:var(--text);

}


/*======================================
DETAILS
======================================*/

.profile-details{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.profile-item{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.profile-label{

    font-size:13px;

    color:var(--text-muted);

}

.profile-value{

    color:var(--text);

    font-weight:var(--weight-semibold);

}


/*======================================
STATISTICS
======================================*/

.profile-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.profile-stat{

    padding:20px;

    text-align:center;

    background:var(--surface);

    border-radius:var(--radius);

}

.profile-stat h3{

    font-size:1.8rem;

    color:var(--primary);

    margin-bottom:6px;

}

.profile-stat p{

    color:var(--text-muted);

    font-size:14px;

}


/*======================================
SOCIAL LINKS
======================================*/

.profile-social{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.profile-social a{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--surface);

    color:var(--text);

    transition:var(--transition);

}

.profile-social a:hover{

    background:var(--primary);

    color:#fff;

}


/*======================================
TIMELINE
======================================*/

.profile-timeline{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.timeline-item{

    display:flex;

    gap:18px;

}

.timeline-dot{

    width:16px;

    height:16px;

    border-radius:50%;

    background:var(--primary);

    margin-top:6px;

    flex-shrink:0;

}

.timeline-content{

    flex:1;

}

.timeline-title{

    font-weight:var(--weight-semibold);

    color:var(--text);

}

.timeline-date{

    margin-top:6px;

    font-size:13px;

    color:var(--text-muted);

}


/*======================================
RESPONSIVE
======================================*/

@media(max-width:991px){

    .profile-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:767px){

    .profile-cover{

        height:160px;

    }

    .profile-info{

        flex-direction:column;

        align-items:center;

        text-align:center;

        margin-top:-60px;

        padding:0 20px 20px;

    }

    .profile-avatar{

        flex-direction:column;

        align-items:center;

    }

    .profile-avatar img{

        width:120px;

        height:120px;

    }

    .profile-details{

        grid-template-columns:1fr;

    }

    .profile-stats{

        grid-template-columns:1fr;

    }

    .profile-actions{

        width:100%;

    }

    .profile-actions .btn{

        width:100%;

    }

}