/* ******************************************** */
/** COMPONENT: PROFILE HERO
/* ******************************************** */

.c-profile-hero{
    position: relative;
    background: linear-gradient(235deg, rgb(63,135,60) 0%, rgb(153,202,64) 100%);
}

.c-profile-hero__wrapper{
    width: 100%;
    height: 100%;
    z-index: 1;
    text-align: center;
}

.c-profile-hero__image{
    display: inline-block;
    position: relative;
    text-align: center;
}

.c-profile-hero__pic{
    position: relative;
    width: 150px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
}

.c-profile-hero__intro{
    margin-top: 20px;
    color: var(--color-lightest);
}

.c-profile-hero__title{
    font-weight: 600;
    font-size: 2.6rem;
    line-height: 1.1;
}

.c-profile-hero__mail{
    opacity: .94;
    font-size: 1.6rem;
    margin-top: 0.5em;
}

/* Change picture */

.c-profile-hero__image-change-input{
    position: absolute;
    left: -999999px;
}

.c-profile-hero__image-change-label{
    position: absolute;
    bottom: -5px;
    right: -5px;
}

.c-profile-hero__image-change-btn{
    display: block;
    cursor: pointer;
    background-color: var(--color-darkest);
    font-size: 2rem;
    color: var(--color-lightest);
    border-radius: 50%;
    padding: 11px 13px;
    box-shadow: rgba(0,0,0,.7) -3px 2px 8px -2px;
    -webkit-transition: background-color 300ms ease;
    -moz-transition: background-color 300ms ease;
    transition: background-color 300ms ease;
}

.c-profile-hero__image-change-icon{
    display: inline-block;
    aspect-ratio: 1/1;
}

/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    .c-profile-hero {
        padding-bottom: calc(var(--section-y) + 46px);
    }

    .c-profile-hero__wrapper{
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        text-align: left;

        width: 90%;
        max-width: 900px;
        gap: 40px;  
    }

    .c-profile-hero__pic {
        width: 140px;
    }

    .c-profile-hero__intro{
        margin-top: 0;
    }

    .c-profile-hero__title{
        font-size: 3rem;
    }

    .c-profile-hero__mail{
        font-size: 1.7rem;
    }



}

/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    .c-profile-hero {
        padding-bottom: calc(var(--section-y) + 46px);
    }

    .c-profile-hero__wrapper{
        width: 90%;
        max-width: 900px;
        gap: 40px;
    }

    .c-profile-hero__pic {
        width: 160px;
    }

    .c-profile-hero__title{
        font-size: 3.2rem;
    }

    .c-profile-hero__mail{
        font-size: 1.8rem;
    }

    /* Change picture */

    .c-profile-hero__image-change-btn:hover,
    .c-profile-hero__image-change-btn:focus{
        background-color: var(--color-hover);
        -webkit-transition: background-color 300ms ease;
        -moz-transition: background-color 300ms ease;
        transition: background-color 300ms ease;
    }

    .c-profile-hero__image-change-label {
        bottom: 5px;
        right: 5px;
    }
}

/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {

    .c-profile-hero__wrapper{
        gap: 50px;
    }

    .c-profile-hero__pic {
        width: 180px;
    }

    .c-profile-hero__title{
        font-size: 3.6rem;
    }

    .c-profile-hero__mail{
        font-size: 1.9rem;
        margin-top: 0.7em;
    }


}

/* ********************** de Hd a FULL HD ********************** */

@media (min-width: 1400px) {

    .c-profile-hero__pic {
        width: 200px;
    }

    .c-profile-hero__title{
        font-size: 3.9rem;
    }

    .c-profile-hero__mail{
        font-size: 2.1rem;
    }

}

/* ********************** de Hd a FULL HD ********************** */

@media (min-width: 1600px) {

    .c-profile-hero__wrapper{
        max-width: 1000px;
    }
}