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

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

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

.gallery-page{
padding:60px 20px;
min-height:100vh;
background-image:url("/wp-content/uploads/2026/02/gallery-page.webp");
background-size:cover;
background-position:center;
background-attachment:fixed;
position:relative;
}

.gallery-page::before{
content:"";
position:absolute;
inset:0;
background:rgba(255,255,255,0.30);
backdrop-filter:blur(1px);
z-index:0;
}

.gallery-page > *{
position:relative;
z-index:1;
}

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

.gallery-hero{
max-width:520px;
margin:0 auto 40px auto;
padding:20px 25px;
text-align:center;
border-radius:16px;
}

.gallery-hero h1{
margin-bottom:10px;
font-size:32px;
}

.gallery-hero p{
font-size:15px;
line-height:1.5;
}

/* =========================
   FILTER CONTROLS
========================= */

.gallery-controls{
padding:20px 0;
max-width:1400px;
margin:0 auto;
}

/* =========================
   MONTH FILTERS
========================= */

.gallery-filters-wrapper{
width:100%;
}

.gallery-filters{
display:flex;
gap:10px;
overflow-x:auto;
overflow-y:hidden;
padding:10px 0 12px 0;
scroll-behavior:smooth;

scrollbar-width:thin;
scrollbar-color:#2b4636 rgba(0,0,0,0.08);
}

.gallery-filters::-webkit-scrollbar{
height:20px;
}

.gallery-filters::-webkit-scrollbar-track{
background:rgba(0,0,0,0.08);
border-radius:20px;
}

.gallery-filters::-webkit-scrollbar-thumb{
background:#2b4636;
border-radius:20px;
}

.gallery-filter{
border:1px solid rgba(0,0,0,.12);
background:rgba(255,255,255,.85);
padding:10px 16px;
border-radius:999px;
cursor:pointer;
white-space:nowrap;
flex-shrink:0;
transition:.15s ease;
}

.gallery-filter.is-active{
background:#2b4636;
color:#fff;
border-color:#2b4636;
}

/* =========================
   LOADER
========================= */

.gallery-loading{
text-align:center;
padding:30px;
display:none;
}

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

.gallery-grid{
display:flex;
flex-wrap:wrap;
margin-left:-5px;
margin-right:-5px;
}

.gallery-item{
padding-left:5px;
padding-right:5px;
margin-bottom:10px;
}

/* =========================
   IMAGE BLOCK
========================= */

.gallery-media{
height:360px;
position:relative;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}

.gallery-media::after{
content:"";
position:absolute;
inset:0;
background:#000;
opacity:0;
transition:.3s ease;
}

.gallery-media:hover::after{
opacity:.1;
}

.play-icon{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
color:white;
z-index:2;
pointer-events:none;
}

/* =====================================================
   MODAL
===================================================== */

.gallery-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.85);
justify-content:center;
align-items:center;
z-index:9999;
}

.gallery-modal-content{
position:relative;
max-width:1000px;
width:90%;
padding:40px 30px 30px 30px;
text-align:center;
background:white;
border-radius:20px;
}

.gallery-modal-media{
margin-bottom:20px;
}

.gallery-modal-image{
max-width:100%;
border-radius:12px;
display:block;
margin:0 auto;
}

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

@media (max-width:991px){

.gallery-item{
width:50%!important;
}

}

@media (max-width:576px){

.gallery-item{
width:100%!important;
}

.gallery-media{
height:280px;
}

.gallery-page{
background-attachment:scroll;
}

}