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


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


.galerie-hero{

    position:relative;

    height:80vh;

    background:url("/assets/images/galerie/hero-galerie.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.galerie-hero .hero-overlay{

    position:absolute;

    inset:0;

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

}



.galerie-hero .hero-content{

    position:relative;

    z-index:2;

    max-width:800px;

    padding:25px;

    color:var(--white);

}



.galerie-hero .hero-content span{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:var(--fs-18);

}



.galerie-hero h1{

    font-family:var(--font-title);

    font-size:var(--fs-60);

    margin:20px 0;

}



.galerie-hero h1::after{

    content:"";

    display:block;

    width:80px;

    height:3px;

    background:var(--gold);

    margin:20px auto;

}



.galerie-hero p{

    font-size:var(--fs-18);

    line-height:1.8;

}

@media(max-width:768px){


    .galerie-hero{

        height:65vh;

    }


    .galerie-hero h1{

        font-size:var(--fs-36);

    }


    .galerie-hero p{

        font-size:var(--fs-16);

    }


}

/*=====================================
        INTRODUCTION
=====================================*/


.galerie-intro{

    max-width:700px;

    margin:100px auto 70px;

    text-align:center;

    padding:0 25px;

}



.galerie-intro .section-badge{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:var(--fs-14);

}



.galerie-intro h2{

    font-family:var(--font-title);

    font-size:var(--fs-48);

    color:var(--black);

    margin:20px 0;

}



.galerie-intro p{

    color:var(--gray-700);

    line-height:2;

}

/*=====================================
        GALERIE GRID
=====================================*/


.galerie-grid{

    max-width:var(--container);

    margin:0 auto 120px;

    padding:0 25px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    grid-template-rows:300px 300px;

    gap:25px;

}



.gallery-item{

    overflow:hidden;

    border-radius:var(--radius-lg);

}



.gallery-item.big{

    grid-row:span 2;

}



.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:var(--transition);

}



.gallery-item:hover img{

    transform:scale(1.05);

}

.gallery-item.hidden{

    display:none;

}

@media(max-width:768px){


    .galerie-grid{

        grid-template-columns:1fr;

        grid-template-rows:auto;

    }


    .gallery-item.big{

        grid-row:auto;

    }


    .gallery-item{

        height:300px;

    }


}

/*=====================================
        CATEGORIES
=====================================*/


.galerie-categories{

    max-width:var(--container);

    margin:120px auto;

    padding:0 25px;

}



.category-header{

    text-align:center;

    margin-bottom:60px;

}



.category-header h2{

    font-family:var(--font-title);

    font-size:var(--fs-48);

    color:var(--black);

    margin-top:20px;

}



.categories-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.category-card{

    position:relative;

    height:400px;

    overflow:hidden;

    border-radius:var(--radius-lg);

}



.category-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:var(--transition);

}



.category-card:hover img{

    transform:scale(1.08);

}



.category-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

    display:flex;

    flex-direction:column;

    justify-content:end;

    padding:30px;

    color:var(--white);

}



.category-overlay i{

    color:var(--gold);

    font-size:35px;

    margin-bottom:15px;

}



.category-overlay h3{

    font-family:var(--font-title);

    font-size:var(--fs-30);

    margin-bottom:10px;

}



.category-overlay p{

    font-size:var(--fs-16);

    line-height:1.7;

}

@media(max-width:992px){


    .categories-grid{

        grid-template-columns:repeat(2,1fr);

    }

}



@media(max-width:600px){


    .categories-grid{

        grid-template-columns:1fr;

    }


}

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


.gallery-filter{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:50px;

    flex-wrap:wrap;

}



.filter-btn{

    border:none;

    background:transparent;

    color:var(--gray-700);

    font-family:var(--font-text);

    font-size:var(--fs-16);

    padding:10px 25px;

    cursor:pointer;

    border-bottom:2px solid transparent;

    transition:var(--transition);

}



.filter-btn:hover,
.filter-btn.active{

    color:var(--gold);

    border-color:var(--gold);

}

@media(max-width:600px){

    .filter-btn{

        width:100%;

    }

}