.gallery-wrap { padding-top: 62px; }

.gallery-section {
  padding: 56px 16px 100px;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-title {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 63px;
  letter-spacing: 0.05em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 40px;
  padding: 0 8px;
}

/* <picture> wrappers must not break flex/masonry layout — make them
   transparent so their <img> child behaves as if unwrapped. */
picture { display: contents; }

/* ── Masonry ── */
.masonry { columns: 3; column-gap: 8px; }

.masonry-item {
  break-inside: avoid;
  margin-bottom: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #e8e6e2;
  display: block;
  position: relative;
}

/* ── Video card ── */
.masonry-item video {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  transition: opacity 0.25s;
}
.masonry-item:hover video { opacity: 0.85; }

/* ── Solo photo card ── */
.solo-img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  transition: opacity 0.25s;
}
.masonry-item:hover .solo-img { opacity: 0.85; }

/* ── Slideshow: outer wrapper sets aspect-ratio ── */
.ss-wrap {
  position: relative;
  overflow: hidden;
}
[data-group="lysy"]       .ss-wrap { aspect-ratio: 4 / 5; }
[data-group="svetlaya"]   .ss-wrap { aspect-ratio: 2 / 3; }
[data-group="prikolnaya"] .ss-wrap { aspect-ratio: 4 / 5; }

/*
  .ss-track is the NATIVE SCROLL container.
  The browser handles all swipe/drag natively.
  touch-action: pan-x  →  vertical scroll goes to the page,
                           horizontal scroll stays on this track.
*/
.ss-track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
  cursor: grab;
  user-select: none;
}
.ss-track::-webkit-scrollbar { display: none; }
.ss-track.is-dragging { cursor: grabbing; }

.ss-img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  scroll-snap-align: start;
  pointer-events: none;
  -webkit-user-drag: none;
  display: block;
}

/* Subtle dark overlay on hover */
.masonry-item[data-type="slideshow"]:hover .ss-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.07);
  pointer-events: none;
  z-index: 1;
}

/* ── Grid dots (overlays bottom of image) ── */
.ss-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
  align-items: center;
  pointer-events: none;
}

.ss-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: all 0.2s;
  flex-shrink: 0;
}
.ss-dot.is-active {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.95);
}

/* ── Lightbox ── */
.lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(8, 8, 8, 0.97);
  align-items: center;
  justify-content: center;
}
.lb.is-open { display: flex; }

.lb-backdrop { position: absolute; inset: 0; }

.lb-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-content img,
.lb-content video {
  display: block;
  max-width: min(94vw, 1280px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  animation: lb-fade 0.35s ease;
}
@keyframes lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fixed controls — close + side arrows */
.lb-close,
.lb-prev,
.lb-next {
  position: fixed;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  z-index: 502;
  transition: color 0.15s, transform 0.15s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: #fff; }

.lb-close { top: 18px; right: 20px; width: 44px; height: 44px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 56px; height: 80px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lb-next:hover { transform: translateY(-50%) translateX(2px); }

/* Bottom UI bar: [← card] [dots · counter] [card →] */
.lb-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 502;
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}

.lb-card-btn {
  flex-shrink: 0;
  width: 60px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.22);
  transition: color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lb-card-btn:hover { color: rgba(255, 255, 255, 0.65); }

.lb-center-ui {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.lb-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 10px;
  pointer-events: auto;
}

.lb-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}
.lb-dot.is-active {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.lb-counter {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .gallery-title { font-size: 38px; margin-bottom: 28px; }
  .masonry { columns: 2; column-gap: 5px; }
  .masonry-item { margin-bottom: 5px; }
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
  .lb-card-btn { width: 44px; }
}
@media (max-width: 480px) {
  .gallery-title { font-size: 30px; }
  .gallery-section { padding: 36px 8px 72px; }
}