/* =====================================================
   MY MENTORS
===================================================== */

.my-mentors-page {
    min-height: 100vh;
    background: #f7f9f7;
    padding: 45px 20px 70px;
}

.my-mentors-container {
    max-width: 1000px;
    margin: 0 auto;
}


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

.my-mentors-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 35px;
}

.mentor-eyebrow {
    display: block;

    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    color: #287c4b;
}

.my-mentors-header h1 {
    margin: 0 0 8px;

    font-size: 42px;
    line-height: 1;

    color: #17251c;
}

.my-mentors-header p {
    margin: 0;

    font-size: 14px;

    color: #707a73;
}


/* =====================================================
   ADD BUTTON
===================================================== */

.add-mentor-button {
    flex-shrink: 0;

    padding: 11px 18px;

    background: #287c4b;
    color: #ffffff;

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

    text-decoration: none;

    border-radius: 3px;
}

.add-mentor-button:hover {
    background: #1e633b;
    color: #ffffff;
}


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

.mentor-status-section {
    margin-bottom: 35px;
}

.mentor-status-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;
}

.mentor-status-heading h2 {
    margin: 0;

    font-size: 21px;

    color: #17251c;
}

.mentor-status-heading span {
    min-width: 23px;
    height: 23px;

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

    padding: 0 6px;

    border-radius: 50%;

    background: #eef2ef;

    font-size: 11px;
    font-weight: 700;

    color: #68736c;
}


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

.my-mentor-card {
    display: grid;

    grid-template-columns: 125px 1fr;

    background: #ffffff;

    border: 1px solid #e2e7e3;

    margin-bottom: 10px;

    overflow: hidden;
}


/* =====================================================
   IMAGE
===================================================== */

.my-mentor-image {
    width: 125px;
    height: 125px;

    background: #e9eee9;
}

.my-mentor-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.mentor-no-image {
    width: 100%;
    height: 100%;

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

    font-size: 11px;

    color: #8b958e;
}


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

.my-mentor-info {
    padding: 17px 20px;
}

.mentor-status {
    display: inline-block;

    margin-bottom: 5px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.mentor-status.pending {
    color: #a06b00;
}

.mentor-status.rejected {
    color: #b13b3b;
}

.mentor-status.approved {
    color: #287c4b;
}

.my-mentor-info h3 {
    margin: 0 0 4px;

    font-size: 19px;

    color: #17251c;
}

.mentor-designation {
    margin: 0 0 2px;

    font-size: 13px;
    font-weight: 600;

    color: #287c4b;
}

.mentor-organization {
    margin: 0;

    font-size: 12px;

    color: #737c76;
}


/* =====================================================
   META
===================================================== */

.mentor-meta {
    margin-top: 10px;

    font-size: 11px;

    color: #9aa39d;
}


/* =====================================================
   REJECTION
===================================================== */

.rejection-box {
    margin-top: 12px;

    padding: 10px 12px;

    background: #fff7f7;

    border-left: 3px solid #b13b3b;
}

.rejection-box strong {
    display: block;

    margin-bottom: 3px;

    font-size: 11px;

    color: #9b3030;
}

.rejection-box p {
    margin: 0;

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

    color: #6f5555;
}


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

.mentor-actions {
    margin-top: 11px;
}

.edit-mentor-button,
.view-profile-button {
    font-size: 12px;
    font-weight: 700;

    color: #287c4b;

    text-decoration: none;
}

.edit-mentor-button:hover,
.view-profile-button:hover {
    text-decoration: underline;
}


/* =====================================================
   EMPTY
===================================================== */

.empty-mentors {
    padding: 60px 25px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e2e7e3;
}

.empty-icon {
    width: 40px;
    height: 40px;

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

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #eef4ef;

    font-size: 22px;

    color: #287c4b;
}

.empty-mentors h2 {
    margin: 0 0 7px;

    font-size: 21px;

    color: #17251c;
}

.empty-mentors p {
    margin: 0 0 18px;

    font-size: 13px;

    color: #737c76;
}

.empty-mentors a {
    font-size: 13px;
    font-weight: 700;

    color: #287c4b;

    text-decoration: none;
}


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

@media (max-width: 650px) {

    .my-mentors-page {
        padding: 35px 15px 55px;
    }

    .my-mentors-header {
        display: block;
    }

    .my-mentors-header h1 {
        font-size: 36px;
    }

    .add-mentor-button {
        display: inline-block;

        margin-top: 18px;
    }

    .my-mentor-card {
        grid-template-columns: 90px 1fr;
    }

    .my-mentor-image {
        width: 90px;
        height: 110px;
    }

    .my-mentor-info {
        padding: 14px;
    }

    .my-mentor-info h3 {
        font-size: 16px;
    }

}