/* ==========================================================
   FORCAEB.COM.BR
   MEMBROS.CSS
   FICHAS MILITARES
========================================================== */


/* ==========================================================
   BANNER
========================================================== */


.members-banner{


    background:


    linear-gradient(

    rgba(0,0,0,.7),

    rgba(0,0,0,.9)

    ),


    url("../../img/backgrounds/recruit.jpg");


    background-size:cover;


    background-position:center;


}




/* ==========================================================
   INTRODUÇÃO
========================================================== */


.members-intro{


    text-align:center;


    background:#080808;


}



.members-intro h2{


    font-family:'Cinzel',serif;


    color:var(--gold);


    font-size:45px;


}



.members-intro p{


    max-width:800px;


    margin:30px auto;


    color:#ccc;


    font-size:18px;


    line-height:1.8;


}



/* ==========================================================
   GRID DE MEMBROS
========================================================== */


.members-list{


    background:


    linear-gradient(

    180deg,

    #111,

    #050505

    );


}



.members-grid{


    max-width:1300px;


    margin:auto;


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:40px;


}



/* ==========================================================
   CARTÃO MILITAR
========================================================== */


.member-card{


    position:relative;


    text-align:center;


    padding:35px 25px;


    background:


    linear-gradient(

    145deg,

    #202020,

    #080808

    );


    border:


    1px solid rgba(200,165,66,.35);


    box-shadow:


    0 20px 40px rgba(0,0,0,.6);


    transition:.5s;


    overflow:hidden;


}



.member-card::before{


    content:"";


    position:absolute;


    inset:10px;


    border:


    1px solid rgba(200,165,66,.15);


    pointer-events:none;


}



.member-card:hover{


    transform:


    translateY(-15px);


    border-color:


    var(--gold);


    box-shadow:


    0 0 50px rgba(200,165,66,.25);


}



/* ==========================================================
   PATENTE
========================================================== */


.rank{


    display:inline-block;


    padding:8px 25px;


    margin-bottom:25px;


    background:


    var(--gold);


    color:#111;


    font-family:'Oswald',sans-serif;


    font-weight:bold;


    letter-spacing:3px;


}



/* ==========================================================
   FOTO
========================================================== */


.member-card > img{


    width:170px;


    height:170px;


    object-fit:cover;


    border-radius:50%;


    border:


    4px solid var(--gold);


    padding:5px;


    background:#111;


    box-shadow:


    0 0 30px rgba(200,165,66,.4);


}



/* ==========================================================
   NOME
========================================================== */


.member-card h3{


    margin-top:25px;


    color:white;


    font-family:'Cinzel',serif;


    font-size:25px;


}



.nickname{


    color:var(--gold);


    font-style:italic;


    letter-spacing:2px;


}



/* ==========================================================
   ESTATÍSTICAS
========================================================== */


.stats-member{


    margin-top:30px;


    padding-top:20px;


    border-top:


    1px solid rgba(255,255,255,.1);


}



.stats-member p{


    color:#ccc;


    line-height:1.6;


}
/* ==========================================================
   MEDALHAS
========================================================== */


.medals{


    margin-top:25px;


    display:flex;


    justify-content:center;


    gap:15px;


}



.medals img{


    width:55px;


    height:55px;


    object-fit:contain;


    transition:.4s;


}



.medals img:hover{


    transform:


    scale(1.3)


    rotate(10deg);


    filter:


    drop-shadow(

    0 0 15px var(--gold)

    );


}



/* ==========================================================
   EFEITO DE DOCUMENTO
========================================================== */


.member-card:hover .rank{


    box-shadow:


    0 0 25px rgba(200,165,66,.8);


}



/* ==========================================================
   LINHA DECORATIVA
========================================================== */


.member-card::after{


    content:"";


    position:absolute;


    bottom:0;


    left:0;


    width:100%;


    height:4px;


    background:


    linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );


}



/* ==========================================================
   TABLET
========================================================== */


@media(max-width:1100px){



.members-grid{


    grid-template-columns:


    repeat(2,1fr);


}



}




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


@media(max-width:700px){



.members-grid{


    grid-template-columns:


    1fr;


}



.members-intro h2{


    font-size:32px;


}



.member-card{


    padding:30px 15px;


}



.member-card > img{


    width:140px;


    height:140px;


}



}