/*=========================================================
  MaryJo Buzzanco Fine Art
  gallery.css
=========================================================*/


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

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;
    padding:0;

    background:#f7f6f3;

    color:#2f2f2f;

    font-family:Georgia,"Times New Roman",serif;

    line-height:1.7;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}

img{

    display:block;

    width:100%;

    height:auto;

}

a{

    color:inherit;

    text-decoration:none;

}

button,
input{

    font:inherit;

}


/*=========================================================
  PAGE
=========================================================*/

main{

    max-width:1700px;

    margin:auto;

}


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

.hero{

    max-width:1500px;

    margin:70px auto 90px;

    padding:0 50px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:70px;

    flex-wrap:wrap;

}

.hero-image{

    flex:0 0 260px;

}

.profile{

    width:260px;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:50%;

    border:8px solid white;

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

}

.hero-content{

    flex:1;

    min-width:300px;

    max-width:700px;

}

.hero-content h1{

    margin:0 0 20px;

    font-size:3.6rem;

    font-weight:300;

    letter-spacing:1px;

}

.hero-content p{

    margin-bottom:18px;

    color:#5d5d5d;

    font-size:1.1rem;

}


/*=========================================================
  FILTER BAR
=========================================================*/

.filters{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    padding:0 30px 40px;

}

.filter{

    background:white;

    color:#444;

    border:1px solid #d7d7d7;

    border-radius:40px;

    padding:12px 24px;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        border-color .25s ease;

}

.filter:hover{

    transform:translateY(-2px);

    border-color:#999;

}

.filter.active{

    background:#2f2f2f;

    color:white;

    border-color:#2f2f2f;

}


/*=========================================================
  SEARCH
=========================================================*/

.search-bar{

    display:flex;

    justify-content:center;

    margin-bottom:60px;

    padding:0 30px;

}

#search{

    width:100%;

    max-width:520px;

    padding:16px 24px;

    border:1px solid #d5d5d5;

    border-radius:50px;

    background:white;

    outline:none;

    transition:border-color .3s ease,
               box-shadow .3s ease;

}

#search:focus{

    border-color:#777;

    box-shadow:0 0 0 5px rgba(0,0,0,.05);

}


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

.gallery-section{

    padding:0 40px 100px;

}

.gallery{

    column-count:4;

    column-gap:34px;

}


/*=========================================================
  ARTWORK CARD
=========================================================*/

.art-card{

    display:inline-block;

    width:100%;

    margin:0 0 38px;

    break-inside:avoid;

    transition:
        transform .35s ease;

}

.art-card:hover{

    transform:translateY(-6px);

}

.gallery-item{

    display:block;

    overflow:hidden;

    border-radius:10px;

    background:white;

}

.gallery-item img{

    transition:
        transform .6s ease,
        filter .4s ease;

}

.art-card:hover img{

    transform:scale(1.03);

}


/*=========================================================
  CAPTION
=========================================================*/

figcaption{

    padding:18px 8px 0;

    text-align:center;

}

figcaption h3{

    margin:0;

    font-size:1.25rem;

    font-weight:400;

    color:#222;

}

figcaption p{

    margin:8px 0 0;

    color:#777;

    font-size:.95rem;

    letter-spacing:.3px;

}


/*=========================================================
  SOLD BADGE
=========================================================*/

.badge{

    position:absolute;

    margin:16px;

    padding:8px 15px;

    background:rgba(120,20,20,.95);

    color:white;

    font-size:.75rem;

    font-weight:bold;

    letter-spacing:2px;

    border-radius:30px;

    z-index:20;

}
/*=========================================================
  HOVER EFFECTS
=========================================================*/

.gallery-item{

    position:relative;

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

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.gallery-item:hover{

    box-shadow:
        0 18px 40px rgba(0,0,0,.18);

}

.gallery-item img{

    display:block;

    width:100%;

    height:auto;

    filter:brightness(100%);

}

.gallery-item:hover img{

    filter:brightness(102%);

}



/*=========================================================
  AVAILABLE / SOLD STYLES
=========================================================*/

.art-card.sold{

    opacity:.82;

}

.art-card.sold .gallery-item img{

    filter:grayscale(18%);

}

.art-card.sold:hover{

    opacity:1;

}



/*=========================================================
  FILTER ANIMATION
=========================================================*/

.art-card{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.art-card.hidden{

    opacity:0;

    transform:translateY(20px);

    pointer-events:none;

}



/*=========================================================
  FADE IN
=========================================================*/

.art-card{

    animation:fadeUp .7s ease forwards;

}

.art-card:nth-child(2){animation-delay:.05s;}
.art-card:nth-child(3){animation-delay:.10s;}
.art-card:nth-child(4){animation-delay:.15s;}
.art-card:nth-child(5){animation-delay:.20s;}
.art-card:nth-child(6){animation-delay:.25s;}
.art-card:nth-child(7){animation-delay:.30s;}
.art-card:nth-child(8){animation-delay:.35s;}
.art-card:nth-child(9){animation-delay:.40s;}
.art-card:nth-child(10){animation-delay:.45s;}
.art-card:nth-child(11){animation-delay:.50s;}
.art-card:nth-child(12){animation-delay:.55s;}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*=========================================================
  EMPTY SEARCH MESSAGE
=========================================================*/

.no-results{

    width:100%;

    text-align:center;

    padding:80px 20px;

    color:#777;

    font-size:1.25rem;

    font-style:italic;

}



/*=========================================================
  FOOTER
=========================================================*/

.site-footer{

    margin-top:80px;

    padding:80px 30px;

    background:#ffffff;

    border-top:1px solid #e8e8e8;

    text-align:center;

}

.site-footer h2{

    margin:0 0 20px;

    font-size:2.1rem;

    font-weight:300;

}

.site-footer p{

    max-width:720px;

    margin:0 auto 35px;

    color:#666;

}



/*=========================================================
  SOCIAL LINKS
=========================================================*/

.social-links{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.social-links a{

    padding:14px 30px;

    border:1px solid #333;

    border-radius:50px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}

.social-links a:hover{

    background:#333;

    color:white;

    transform:translateY(-3px);

}



/*=========================================================
  COPYRIGHT
=========================================================*/

.copyright{

    color:#999;

    font-size:.9rem;

}



/*=========================================================
  GLIGHTBOX CUSTOMIZATION
=========================================================*/

/* Remove the dark bar behind captions */

.gslide-description{

    background:#ffffff !important;

    color:#333 !important;

    padding:24px !important;

}

/* Artwork title */

.gslide-title{

    color:#111 !important;

    font-family:Georgia,"Times New Roman",serif !important;

    font-size:1.5rem !important;

    font-weight:400 !important;

    margin-bottom:10px !important;

}

/* Artwork details */

.gslide-desc{

    color:#666 !important;

    font-size:1rem !important;

    line-height:1.7 !important;

}

/* Navigation arrows */

.gprev,
.gnext{

    transform:scale(1.2);

}

/* Close button */

.gclose{

    transform:scale(1.15);

}



/*=========================================================
  LOADING EFFECT
=========================================================*/

.gallery-item img{

    opacity:0;

    transition:
        opacity .5s ease,
        transform .6s ease;

}

.gallery-item img.loaded{

    opacity:1;

}
/*=========================================================
  TABLET (1200px)
=========================================================*/

@media (max-width:1200px){

    .gallery{

        column-count:3;

    }

    .hero{

        gap:50px;

        padding:0 40px;

    }

    .hero-content h1{

        font-size:3rem;

    }

}


/*=========================================================
  SMALL TABLET (900px)
=========================================================*/

@media (max-width:900px){

    .gallery{

        column-count:2;

    }

    .hero{

        flex-direction:column;

        text-align:center;

        margin:50px auto 70px;

        gap:35px;

        padding:0 25px;

    }

    .hero-image{

        flex:none;

    }

    .profile{

        width:220px;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-content h1{

        font-size:2.6rem;

    }

    .filters{

        padding:0 20px 30px;

    }

    .filter{

        padding:10px 18px;

    }

}


/*=========================================================
  MOBILE (600px)
=========================================================*/

@media (max-width:600px){

    .gallery{

        column-count:1;

    }

    .gallery-section{

        padding:0 18px 70px;

    }

    .hero{

        margin:35px auto 50px;

        padding:0 20px;

    }

    .profile{

        width:180px;

        border-width:6px;

    }

    .hero-content h1{

        font-size:2.1rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .filters{

        gap:10px;

    }

    .filter{

        width:100%;

        max-width:260px;

    }

    .search-bar{

        padding:0 18px;

        margin-bottom:40px;

    }

    #search{

        padding:14px 18px;

    }

    figcaption{

        padding-top:14px;

    }

    figcaption h3{

        font-size:1.1rem;

    }

    figcaption p{

        font-size:.9rem;

    }

    .site-footer{

        padding:60px 20px;

    }

    .social-links{

        flex-direction:column;

        align-items:center;

    }

    .social-links a{

        width:100%;

        max-width:280px;

    }

}


/*=========================================================
  LARGE DESKTOPS
=========================================================*/

@media (min-width:1800px){

    .gallery{

        column-count:5;

    }

}


/*=========================================================
  ACCESSIBILITY
=========================================================*/

.gallery-item:focus-visible,
.filter:focus-visible,
.social-links a:focus-visible,
#search:focus-visible{

    outline:3px solid #5f86c2;

    outline-offset:4px;

}


/*=========================================================
  REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*=========================================================
  PRINT
=========================================================*/

@media print{

    body{

        background:white;

    }

    .filters,
    .search-bar,
    .site-footer{

        display:none;

    }

    .gallery{

        column-count:2;

    }

}


/*=========================================================
  UTILITY CLASSES
=========================================================*/

.hide{

    display:none !important;

}

.show{

    display:block !important;

}

.fade{

    opacity:1;

    transition:opacity .35s ease;

}

.fade-out{

    opacity:0;

}


/*=========================================================
  END OF FILE
=========================================================*/