/*==================================================================
    G.R.B.C. COMMAND PORTAL

    Armory Stylesheet
    Version 2.0

    Contains Armory-specific components only.
==================================================================*/


/*==================================================================
    HERO BACKGROUND
==================================================================*/

.hero{

    min-height:650px;

    background:
        linear-gradient(
            rgba(0,0,0,.65),
            rgba(0,0,0,.82)
        ),
        url("../gallery/page/GC_OG.png");

}

/*==================================================================
    ARMORY SECTIONS
==================================================================*/

section{

    padding:80px 0;

}

.section-title{

    text-align:center;

    color:var(--grbc-green-light);

    font-size:3rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:15px;

    text-shadow:
        0 0 8px rgba(144,169,85,.18);

}

.section-description{

    max-width:900px;

    margin:0 auto 50px;

    text-align:center;

    color:var(--text-secondary);

    font-size:1.1rem;

    line-height:1.8;

}


/*==================================================================
    GALLERY GRID
==================================================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,240px));

    justify-content:center;

    gap:20px;

}


/*==================================================================
    GALLERY CARDS
==================================================================*/

.gallery-item{

    background:#1A1A1A;

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

    border-radius:var(--radius);

    overflow:hidden;

    transition:var(--transition);

}


.gallery-item:hover{

    transform:translateY(-5px);

    border-color:var(--grbc-green-light);

}


.gallery-item img{

    width:100%;

    height:240px;

    object-fit:contain;

    cursor:pointer;

    transition:var(--transition);
    
    background:#2a2a2a;

    padding:10px;

}


.gallery-item img:hover{

    opacity:.9;

    transform:scale(1.03);

}


.gallery-info{

    padding:18px;

}


.gallery-info h3{

    margin-bottom:10px;

}


.gallery-info p{

    margin:0;

}


/*==================================================================
    ABOUT SECTION
==================================================================*/

.about-box{

    background:#181818;

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

    border-radius:var(--radius);

    padding:40px;

    text-align:center;

}


/*==================================================================
    COMMISSION SECTION
==================================================================*/

.commission-box{

    max-width:1200px;

    margin:60px auto;

    padding:25px;

    text-align:center;

    background:#181818;

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

    border-radius:var(--radius);

}


.commission-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:25px;

}


.commission-note{

    margin-top:12px;

    color:#888;

    font-size:.85rem;

}


/*==================================================================
    COMING SOON
==================================================================*/

.coming-soon{

    display:none;

    margin-top:40px;

    padding:60px;

    text-align:center;

    background:#181818;

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

    border-radius:var(--radius);

    font-size:2rem;

    letter-spacing:3px;

    color:#666;

}


/*==================================================================
    LIGHTBOX
==================================================================*/

#lightbox{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.92);

    z-index:99999;

}

#lightbox img{

    max-width:90%;

    max-height:90%;

    border:2px solid var(--grbc-green);

    border-radius:var(--radius);

    box-shadow:0 0 35px rgba(0,0,0,.8);

}


/*--------------------------------------------------------------
    ALL BUTTONS
--------------------------------------------------------------*/

.lb-btn{

    position:absolute;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:rgba(20,20,20,.85);

    color:white;

    font-size:34px;

    cursor:pointer;

    transition:var(--transition);

}

.lb-btn:hover{

    background:var(--grbc-green);

}


/*--------------------------------------------------------------
    PREVIOUS
--------------------------------------------------------------*/

.lb-prev{

    left:35px;

    top:50%;

    transform:translateY(-50%);

}


/*--------------------------------------------------------------
    NEXT
--------------------------------------------------------------*/

.lb-next{

    right:35px;

    top:50%;

    transform:translateY(-50%);

}


/*--------------------------------------------------------------
    CLOSE
--------------------------------------------------------------*/

.lb-close{

    right:35px;

    top:35px;

    font-size:28px;

}

/*==================================================================
    CATEGORY BACKGROUNDS
==================================================================*/

.weapons{

    background:
        linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.85)),
        url("../gallery/page/winter_camo_002.png");

    background-size:cover;

    background-position:center;

}


.groobycam{

    background:
        linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.85)),
        url("../gallery/page/GC_OG.png");

    background-size:cover;

    background-position:center;

}


.rangergreen{

    background:
        linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.85)),
        url("../gallery/page/Mapa_1024x2048.png");

    background-size:cover;

    background-position:center;

}


.grbc{

    background:
        linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.85)),
        url("../gallery/page/MC_1.png");

    background-size:cover;

    background-position:center;

}


.items{

    background:
        linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.85)),
        url("../gallery/page/wz.93_Pantera.png");

    background-size:cover;

    background-position:center;

}


.apparel{

    background:
        linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.85)),
        url("../gallery/page/M81_Woodland.png");

    background-size:cover;

    background-position:center;

}


.camos{

    background:
        linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.85)),
        url("../gallery/page/GC3_MC.png");

    background-size:cover;

    background-position:center;

}


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

@media (max-width:700px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item img{

        height:auto;

    }

    .about-box{

        padding:30px;

    }

    .commission-box{

        padding:20px;

    }

}