/* ============================================
   GALLERY — 2-Row Horizontal Scroll Grid
   ============================================ */

.gallery {
  padding: var(--space-section) 0;
  background: var(--midnight-navy);
}

.gallery__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.gallery__header .section-label {
  justify-content: center;
}

.gallery__header .section-subtitle {
  margin: 0 auto;
}

.gallery__masonry {
  display: grid;
  grid-template-rows: repeat(2, 260px);
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-snap-type: none;
  /* disabled during auto-scroll */
  gap: 20px;
  padding: 10px 4px 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.gallery__masonry.is-interacting {
  scroll-snap-type: x mandatory;
}

.gallery__masonry.active-drag {
  cursor: grabbing !important;
  scroll-snap-type: none !important;
}

.gallery__masonry::-webkit-scrollbar {
  display: none !important;
}

.gallery__item {
  scroll-snap-align: start;
  width: 360px;
  height: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex: none;
  transition: transform var(--duration-slower) var(--ease-smooth), box-shadow 0.3s ease;
}

.gallery__item:active {
  transform: scale(0.96) !important;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* prevents browser native drag-and-drop of images interfering with our drag scrolling */
  transition: transform var(--duration-slower) var(--ease-smooth);
}

.gallery__item:hover img {
  transform: scale(1.08);
}

.gallery__item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(8, 18, 32, 0.8) 100%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-smooth);
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  z-index: 1;
}

.gallery__item:hover .gallery__item-overlay {
  opacity: 1;
}

.gallery__item-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--snow-white);
}

/* Lightbox */
.gallery__lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(8, 18, 32, 0.95);
  backdrop-filter: blur(30px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-smooth);
}

.gallery__lightbox.active {
  opacity: 1;
  pointer-events: all;
}

.gallery__lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  object-fit: contain;
}

.gallery__lightbox-close {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.1);
  border-radius: var(--radius-full);
  color: var(--snow-white);
  font-size: 24px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-smooth);
}

.gallery__lightbox-close:hover {
  background: rgba(248, 250, 252, 0.2);
}

@media (max-width: 1024px) {
  .gallery__masonry {
    grid-template-rows: repeat(2, 220px);
    gap: 16px;
  }

  .gallery__item {
    width: 300px;
    height: 220px;
  }
}

@media (max-width: 768px) {
  .gallery__masonry {
    grid-template-rows: repeat(2, 200px);
    gap: 16px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .gallery__item {
    width: 280px;
    height: 200px;
    border-radius: 16px;
  }

  .gallery__item-overlay {
    opacity: 1 !important;
  }
}

@media (max-width: 480px) {
  .gallery__masonry {
    grid-template-rows: repeat(2, 170px);
    gap: 12px;
  }

  .gallery__item {
    width: 240px;
    height: 170px;
  }
}