/* ============================================================
   GEECEE GALLERY SYSTEM
   ------------------------------------------------------------
   GeeCee Online Version 2.0

   Authors: GeeCee and AIguy

   Components
   ----------
   • Gallery Shell
   • Gallery Panel
   • Gallery Frame
   • Gallery Grid
   • Gallery Cards
   • Thumbnail Effects

   Portfolio Viewer
   ----------------
   • Image Viewer
   • Previous / Next
   • Keyboard Navigation
   • Image Counter
   • Captions
   • Responsive Layout
   • Fade-in/Fade-out transition

============================================================ */



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




/* =====================================================
   GeeCee Online
   Portfolio Viewer 2.0
   Main Stylesheet
===================================================== */


/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



/* =====================================================
   THEME COLORS  --------- change color HERE -------
===================================================== */

:root{

    --gc-accent-color: #ffbb05;
   
    --gc-fade-speed: .15s;
 
    --gc-p-color: #000000;

}
   


/*
.geecee-body-text {
}
  */


/* =========================================================================
   SECTION HEADING  ----the space between the Titles and the Shell -----
========================================================================= */

.heading{

    margin-bottom:35px;               

}

.p{
   color: --gc-p-color: #000000;
}


                                    /* ================================================
                                            the Geecee Online PORTFOLIO VIEWER
                                    ================================================ */




/* =====================================================
   GALLERY SHELL ----- Holds the Gallery Panel -----
  ===================================================== */


.gallery-shell {

    max-width:1250px;

    margin:10px auto;

    padding:18px;

    background:#f4f4f4;

    border-radius:4px;

    box-shadow:0 10px 30px rgba(0,0,0,.55);

}



/* =====================================================
   GALLERY PANEL ------ Grid ---------
===================================================== */

.gallery-panel{

    max-width:1200px;

    margin:10px auto;

    padding:10px;

    background:#262626;

    border-top:25px solid var(--gc-accent-color);

    border-radius:3px;

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

}


/* =====================================================
   VIDEO GALLERY ----- Blue Accent Override
===================================================== */

.gallery-panel:has(.video-thumb){

    border-top-color:var(--vv-accent-color);

}



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

.gallery-grid{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    justify-content:center;                /* center on page  */

    max-width:1000px;

    margin:10px auto;

}


/* =====================================================
   GALLERY PAGES ----- 4x2 Grid Paging
===================================================== */

.gallery-page{

    display:none;

}


.gallery-page.active{

    display:block;

}




/* =====================================================
   THUMBNAILS
===================================================== */

.thumb img{

    display:block;

    width:210px;

    border-radius:3px;

    cursor:pointer;

    transition:.33s;

}

.thumb img:hover{

    transform:scale(1.05);

}




                    /* =====================================================
                          ------------ the PORTFOLIO VIEWER -------------
                       ===================================================== */

#viewer{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

    justify-content:center;

    align-items:center;

    z-index: 9999;

}


/* =====================================================
   VIEWER CONTENT  ----- Fixed Position ------
===================================================== */

.pv-content{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    width:90%;
    height:90vh;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

        pointer-events:none;

}


                            /* =====================================================
                                IMAGE VIEWER ----- Closing Animation
                                Shrink toward center before disappearing
                               ===================================================== */

#viewer.closing .pv-content {

    transform: translate(-50%, -50%) scale(0);

    opacity: 0;

    transition:
        transform 0.25s ease-in,
        opacity 0.2s ease-in;

}



                               /* =====================================================
                                            IMAGE VIEWER ----- Closing Flash
                                            Flash stays inside the P-V content
                                  =====================================================  */

.pv-content {
    overflow:hidden;
}                           

.pv-flash {

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.15);

    opacity:0;

    pointer-events:none;

    z-index:20;

    transition:opacity .06s ease-out;

}



@keyframes imageCloseFlash {

    from {
        opacity:1;
    }

    to {
        opacity:0;
    }

}



/* =====================================================
   FULL SIZE IMAGE
===================================================== */

#viewerImage{

    display:block;

    max-width:90vw;

    max-height:65vh;

      margin:auto auto 0;

    

    border-radius:8px;

      pointer-events:auto;
}





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

#viewerTitle{

    margin-top:20px;

    font-size:2rem;

    color: white;

        

    
}



/* =====================================================
   IMAGE FADE TRANSITION
===================================================== */

#viewerImage{

    opacity:1;

    transition:opacity var(--gc-fade-speed) ease;

}

#viewerImage.fade{

    opacity:0;

}



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

#imageCounter {

    color:white;

}





                   /* =====================================================
                      BUTTONS
                      ===================================================== */

/* =====================================================
   VIEWER CONTROL BAR
===================================================== */

.pv-controls{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin:25px auto;

    padding:10px 15px;

    background:rgba(204,204,204,0.1);

    border-radius:4px;

    width:fit-content;

             pointer-events:auto;

}

.pv-controls button{

    padding:5px 10px;

    font-size:0.85rem;

    cursor:pointer;

    border:none;

    border-radius:5px;

    background:var(--gc-accent-color);

    color:black;

    transition:.25s;

}


.pv-controls button:hover{

    background:#666;

    transform:translateY(-2px);

}


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

.gallery-card{

    background:#666;

    padding:5px;

    border-radius:3px;

    transition:.3s;

    width:230px;
 
    border:4px solid transparent;           /*    orange border   */

}







.gallery-card:hover{

    transform:translateY(-5px);

    border-color:var(--gc-accent-color);

    
}



/* =====================================================
   VIDEO CARD HOVER ----- Blue Override
===================================================== */

.gallery-card:has(.video-thumb):hover{

    border-color:var(--vv-accent-color);

}



                                 /* =====================================================
                                          GALLERY PAGE CONTROLS ----- Center Below Grid
                                    ===================================================== */

.gallery-page-controls{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    width:100%;

    margin:20px auto 0;

}



/* =====================================================
   GALLERY PAGE COUNTER
===================================================== */

.gallery-page-counter{

    color:white;

    font-size:0.85rem;

    min-width:45px;

    text-align:center;

}





/* =====================================================
   GALLERY PAGE BUTTONS
===================================================== */

.gallery-page-controls button{

    padding:5px 10px;

    font-size:0.85rem;

    cursor:pointer;

    border:none;

    border-radius:5px;

    background:var(--gc-accent-color);

    color:black;

    transition:.25s;


}



                                   /*===============================================================
                                         ABOUT PAGE - LINKS MENU (the top 7 Links for each page)
                                     ===============================================================
                                                 GeeCee Online
                                                 Version 1.0
                                     ===============================================================*/

.about-links {
    width: 160px;
    position: relative;
}

.about-links details {
    width: 160px;
    margin-bottom: 10px;
}

.about-links summary {
    padding: 10px 14px;
    background-color: #252525;
    border: 5px solid #ffbb05;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    transition:.25s;
            
}

.about-links summary:hover {
    background-color: #666666;

    transform:translateY(-3px);
        
}

.about-links .links-submenu {
    padding: 10px 0;
    background-color: #181818;
    border-left: 1px solid #ff8000;
    border-right: 1px solid #ff8000;
    border-bottom: 1px solid #ff8000;
    border-radius: 0 0 6px 6px;

    position: absolute;
    left: 0;
    top: 100%;
    width: 200px;
    z-index: 1000;
}


.about-links details:not([open]) .links-submenu {
    display: none;
}

.about-links details[open] .links-submenu {
    display: block;
}


.about-links .links-submenu a {
    display: block;
    padding: 8px 14px;
    color: #dcdcdc;
    text-decoration: none;
    font-size: 12px;
}

.about-links .links-submenu a:hover {
    color: #ff8000;
    background-color: #222;
}




.right-links .links-submenu {
    left: auto;
    right: 0;
}



.about-links.right-links {
    transform: translateX(75px);          *  VERY Important for the RIGHT-SUDE Links section    */
}






                                       /* =====================================================
                                                    FEATURED WORK LAYOUT on Home Page
                                          ===================================================== */

.featured-work {

    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;

    max-width: 1000px;
    margin: 30px auto;
    padding: 20px;

    background: #262626;
    border-top: 10px solid #ffbb05;
    border-radius: 3px;

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

}


/* Featured Image */

.featured-image {

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

}

.featured-image img {

    width: 270px;
    height: 230px;
    object-fit: cover;

    border-radius: 4px;

     

}


/* Featured Information */

.featured-info {

    padding: 10px 20px;

}

.featured-info h2 {

    margin-top: 0;
    margin-bottom: 15px;

    font-size: 20px;
    color: #ffbb05;

}

.featured-info h3 {

    margin-bottom: 15px;

    font-size: 16px;
    color: #ffffff;

}


/* Buttons */

.featured-controls {

    margin-top: 25px;

}

.featured-controls button {

    padding: 8px 18px;
    margin-right: 8px;

    background: #252525;
    border: 1px solid #ffbb05;
    border-radius: 4px;

    color: #ffffff;
    cursor: pointer;

}

.featured-controls button:hover {

    background: #ffbb05;
    color: #181818;

}






                             /* =====================================================
                                         FEATURED WORK - HOVER REVEAL
                                ===================================================== */


.featured-reveal {

    position: relative;

    width: 270px;
    height: 230px;

    overflow: hidden;

    text-align: center;

         background-color: #333;

      

}


                          /* -----------------------------------------
                                         FEATURED IMAGE
                             ----------------------------------------- */


.featured-reveal img {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.9;

    z-index: 2;

    transition:
        opacity 0.75s ease,
        transform 0.35s ease;

    transform: scale(1.08);

          

}



                           /* -----------------------------------------
                                          DESCRIPTION
                              ----------------------------------------- */


.featured-description {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 85%;

    transform:
        translate(-50%, -50%)
        scale(1.5);

    opacity: 0;

    z-index: 1;

    text-align: center;

}


/* Title */

.featured-description h3 {

    margin: 0 0 6px 0;

    color: #ffbb05;

    font-size: 17px;

}


/* Category */

.featured-description span {

    display: block;

    margin-bottom: 10px;

    color: #fff;

    font-size: 14px;

}


/* Description text */

.featured-description p {

    margin: 0;

    color: #fff;

    font-size: 13px;

    line-height: 1.5;

}



                      /* -----------------------------------------
                                          HOVER
                         ----------------------------------------- */


.featured-reveal:hover img {

    opacity: 0.5;

    transform: scale(1);

}


.featured-reveal:hover .featured-description {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

}