/*************************************************/
/* GLOBAL */
/*************************************************/

*
{
    box-sizing:border-box;
}

body
{
    margin:0;
    min-height:100vh;
    font-family:"Segoe UI",Arial,sans-serif;
    background:var(--page-bg);
    color:var(--text-color);
}


/*************************************************/
/* CARD */
/*************************************************/

.member-card
{
    height:100%;
    display:flex;
    flex-direction:column;

    background:var(--card-bg);
    border-radius:28px;
    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.18);
    transition:.3s ease;
}

.member-card:hover
{
    transform:translateY(-6px);
}


/*************************************************/
/* HEADER / LOGO */
/*************************************************/

.card-header-custom
{
    height:190px;

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

    padding:20px;

    background:white;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.logo
{
    max-width:280px;
    max-height:140px;
    object-fit:contain;
}


/*************************************************/
/* PHOTO */
/*************************************************/

.photo-wrapper
{
    position:relative;

    margin-top:-80px;

    display:flex;
    justify-content:center;
}

.photo
{
    width:160px;
    height:160px;

    object-fit:cover;

    border-radius:50%;
    border:7px solid white;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

    transition:.3s ease;
}

.photo:hover
{
    transform:scale(1.05);
}


/*************************************************/
/* MEMBER NUMBER */
/*************************************************/

.member-number
{
    position:absolute;

    top:45px;
    left:calc(50% - 115px);

    width:65px;
    height:65px;

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

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            var(--main-color-dark)
        );

    color:white;

    border-radius:50%;
    border:5px solid white;

    font-size:2rem;
    font-weight:800;

    box-shadow:0 8px 20px rgba(0,0,0,.25);
}


/*************************************************/
/* BODY */
/*************************************************/

.card-body
{
    flex-grow:1;

    padding:35px 30px;
}

.member-name
{
    margin:0;

    font-size:1.7rem;
    font-weight:700;

    color:var(--title-color);
}

.member-role
{
    margin-top:5px;

    color:var(--main-color);
    font-weight:600;
}

.member-job,
.member-years
{
    margin-top:8px;

    color:var(--text-secondary);
}

.member-moto
{
    margin:20px 0;

    color:var(--main-color);

    font-style:italic;
    font-weight:600;
}

.member-text
{
    color:var(--text-secondary);
    line-height:1.6;
}


/*************************************************/
/* INFO BOX */
/*************************************************/

.info-box
{
    padding:15px;

    border-radius:16px;

    background:rgba(0,0,0,.05);
}

.info-box small
{
    color:var(--text-secondary);
    font-weight:600;
}


/*************************************************/
/* FOOTER */
/*************************************************/

.card-footer-custom
{
    padding:14px;

    text-align:center;

    color:white;
    font-weight:600;

    background:
        linear-gradient(
            90deg,
            var(--footer1),
            var(--footer2)
        );
}


/*************************************************/
/* GREEN THEME */
/*************************************************/

body.style-green
{
    --page-bg:
        linear-gradient(
            135deg,
            #f1f8ef,
            #cfe8c8
        );

    --card-bg:
        white;

    --main-color:
        #4c9f38;

    --main-color-dark:
        #87c442;

    --title-color:
        #12345b;

    --text-color:
        #333;

    --text-secondary:
        #666;

    --footer1:
        #4c9f38;

    --footer2:
        #87c442;
}


/*************************************************/
/* BLUE THEME */
/*************************************************/

body.style-blue
{
    --page-bg:
        linear-gradient(
            135deg,
            #edf5ff,
            #c9dcf5
        );

    --card-bg:
        white;

    --main-color:
        #0b65b0;

    --main-color-dark:
        #12345b;

    --title-color:
        #12345b;

    --text-color:
        #333;

    --text-secondary:
        #666;

    --footer1:
        #12345b;

    --footer2:
        #0b65b0;
}


/*************************************************/
/* NATURE THEME - CLEAN WHITE */
/*************************************************/

body.style-nature
{
    --page-bg:
        linear-gradient(
            135deg,
            #ffffff,
            #f3f3f3
        );

    --card-bg:
        white;

    --main-color:
        #607d8b;

    --main-color-dark:
        #90a4ae;

    --title-color:
        #263238;

    --text-color:
        #333;

    --text-secondary:
        #666;

    --footer1:
        #455a64;

    --footer2:
        #90a4ae;
}

/*************************************************/
/* GOLD THEME */
/*************************************************/

body.style-gold
{
    --page-bg:
        linear-gradient(
            135deg,
            #fff8e1,
            #ffecb3
        );

    --card-bg:
        white;

    --main-color:
        #c28a00;

    --main-color-dark:
        #f0c419;

    --title-color:
        #5d4037;

    --text-color:
        #333;

    --text-secondary:
        #666;

    --footer1:
        #c28a00;

    --footer2:
        #f0c419;
}


/*************************************************/
/* LOGO WHITE BACKGROUND FIX */
/*************************************************/

.card-header-custom
{
    background:white;
}

/*************************************************/
/* MOBILE */
/*************************************************/

@media(max-width:480px)
{
    .card-header-custom
    {
        height:160px;
    }

    .photo
    {
        width:130px;
        height:130px;
    }

    .member-number
    {
        width:55px;
        height:55px;

        left:calc(50% - 100px);

        font-size:1.5rem;
    }

    .member-name
    {
        font-size:1.4rem;
    }

    .card-body
    {
        padding:35px 20px;
    }
}