/* ==========================================================================
   Gallery — Page-Specific Styles
   ========================================================================== */

/* ---------- Gallery Grid ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.gallery-grid.masonry {
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: dense;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
  transition: transform 0.5s ease;
}

.gallery-grid.masonry .gallery-item:first-child {
  grid-row: span 2;
  grid-column: span 1;
  aspect-ratio: auto;
  min-height: 100%;
}

.gallery-item:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 4px; z-index: 10; }
.gallery-item picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.gallery-item:hover img, .gallery-item:focus img, .gallery-item:hover picture img, .gallery-item:focus picture img {
  transform: scale(1.08);
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

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

.gallery-item .gallery-caption {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  opacity: 0;
  transform: translateY(8px);
  transition: var(--transition-normal);
  z-index: 2;
}

.gallery-item:hover .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item .gallery-zoom {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition: var(--transition-normal);
  z-index: 2;
}

.gallery-item:hover .gallery-zoom {
  opacity: 1;
  transform: scale(1);
}

.gallery-zoom svg {
  width: 18px;
  height: 18px;
}

/* ---------- Gallery Filters ---------- */
.gallery-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.gallery-filter-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

.gallery-filter-btn:hover {
  background: var(--color-surface-offset);
}

.gallery-filter-btn.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 10000; display: none; align-items: center; justify-content: center; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-lg); }
.lightbox-close { position: absolute; top: var(--space-4); right: var(--space-4); width: 48px; height: 48px; border-radius: var(--radius-full); background: rgba(255,255,255,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.3s; }
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: var(--radius-full); background: rgba(255,255,255,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.3s; }
.lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }
.lightbox-caption { position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%); color: #fff; text-align: center; font-size: var(--text-sm); max-width: 600px; }