
/* PAGE HERO — dark/green theme */
.page-hero {background: linear-gradient(135deg, var(--dark) 0%, #16423a 100%);}
.page-tag   { color: #7bd4a0; }
.page-hero h1 em { color: #7bd4a0; }

/* FILTER TABS */
.filter-bar { padding: 36px 5% 0; display: flex; gap: 10px; flex-wrap: wrap; }
.filter-btn {
padding: 8px 20px; border-radius: 50px;
font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 600;
cursor: pointer; border: 1.5px solid var(--border);
background: #fff; color: var(--muted); transition: all .2s;
}
.filter-btn:hover,
.filter-btn.active { background: var(--green); color: #fff; border-color: var(--green); }

/* GALLERY GRID */
.gallery-section { padding: 32px 5% 80px; }
.gallery-grid { columns: 4; column-gap: 16px; }
.gallery-item {
break-inside: avoid; margin-bottom: 16px;
border-radius: var(--radius-sm); overflow: hidden;
cursor: pointer; position: relative; transition: transform .25s;
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-item img {
width: 100%; display: block;
border-radius: var(--radius-sm);
transition: transform .3s;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-overlay {
position: absolute; inset: 0;
background: rgba(26,107,58,0.75);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .25s;
border-radius: var(--radius-sm);
}
.gallery-overlay-icon { font-size: 2rem; color: #fff; }
.gallery-caption {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,.7));
color: #fff; padding: 28px 12px 10px;
font-size: 0.78rem; font-weight: 500;
opacity: 0; transition: opacity .25s;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.gallery-item:hover .gallery-caption { opacity: 1; }

/* SLIDESHOW */
.slideshow-section { padding: 0 5% 80px; }
.slideshow-section h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 900; color: var(--dark); margin-bottom: 24px; }
.slideshow-section h2 em { font-style: normal; color: var(--green); }
.slideshow-wrap { position: relative; border-radius: var(--radius); overflow: hidden; }
.slideshow-track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.slide { min-width: 100%; height: 460px; position: relative; flex-shrink: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-caption {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(26,26,46,.85));
color: #fff; padding: 48px 36px 28px;
}
.slide-caption h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 6px; }
.slide-caption p  { font-size: 0.9rem; opacity: .8; }
.slide-nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; width: 100%; padding: 0 16px; pointer-events: none; }
.slide-btn {
width: 44px; height: 44px; border-radius: 50%; border: none;
background: rgba(255,255,255,.9); cursor: pointer; font-size: 1.1rem;
display: flex; align-items: center; justify-content: center;
pointer-events: all; transition: background .2s, transform .2s;
}
.slide-btn:hover { background: #fff; transform: scale(1.08); }
.slide-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s, transform .2s; border: none; }
.dot.active { background: var(--green); transform: scale(1.3); }

/* LIGHTBOX */
.lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(10,14,20,.95);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity .3s;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: 12px; object-fit: contain; display: block; }
.lightbox-close {
position: absolute; top: 20px; right: 24px;
background: rgba(255,255,255,.1); border: none; border-radius: 50%;
width: 44px; height: 44px; font-size: 1.2rem; color: #fff; cursor: pointer;
transition: background .2s;
}
.lightbox-close:hover { background: rgba(255,255,255,.25); }
.lightbox-prev, .lightbox-next {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,.1); border: none; border-radius: 50%;
width: 50px; height: 50px; font-size: 1.3rem; color: #fff; cursor: pointer;
transition: background .2s;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.25); }
.lightbox-caption { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: 0.88rem; text-align: center; white-space: nowrap; }

@media (max-width: 900px) {
.gallery-grid { columns: 2; }
}
@media (max-width: 580px) {
.gallery-grid { columns: 1; }
.slide { height: 280px; }
}