.gallery-hero { background: var(--color-primary); color: #fff; padding: 120px 0 60px; text-align: center; }
.gallery-hero h1 { font-size: 3.5rem; }

.filter-tabs { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 20px; justify-content: center; }
.filter-tab { padding: 8px 20px; border: 2px solid var(--color-primary); background: transparent; border-radius: 30px; cursor: pointer; font-weight: 500; transition: 0.2s; }
.filter-tab.active, .filter-tab:hover { background: var(--color-primary); color: #fff; }

.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.gallery-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.gallery-grid img:hover { transform: scale(1.02); }

.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 2000; align-items: center; justify-content: center; flex-direction: column; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 80%; max-height: 70vh; border-radius: 8px; }
.lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 2.5rem; cursor: pointer; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 3rem; cursor: pointer; padding: 0 20px; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
#lightbox-caption { color: #fff; margin-top: 16px; font-size: 1.2rem; }

.video-section { padding: 60px 0; background: var(--color-bg-light); text-align: center; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.video-grid iframe { width: 100%; height: 250px; border-radius: 12px; border: none; }

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .video-grid { grid-template-columns: 1fr; }
}