Masonry Photo Gallery

.masonry-gallery {
  column-count: 3;
  column-gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 15px;
}

.gallery-item {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  break-inside: avoid;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

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

.overlay-content {
  color: white;
  text-align: left;
}

.overlay-content h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 600;
}

.overlay-content p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

/* Responsive design */
@media (max-width: 768px) {
  .masonry-gallery {
    column-count: 2;
    column-gap: 15px;
    padding: 15px;
  }
  
  .gallery-item {
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  .masonry-gallery {
    column-count: 1;
    column-gap: 0;
    padding: 10px;
  }
}

/* Loading animation */
.gallery-item {
  animation: fadeInUp 0.6s ease-out;
}

.gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-item:nth-child(4) { animation-delay: 0.4s; }
.gallery-item:nth-child(5) { animation-delay: 0.5s; }
.gallery-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const galleryItems = document.querySelectorAll('.gallery-item');
  
  // Add click handlers for lightbox functionality
  galleryItems.forEach((item, index) => {
    item.addEventListener('click', function() {
      const img = this.querySelector('img');
      const title = this.querySelector('h3').textContent;
      const description = this.querySelector('p').textContent;
      
      // Create lightbox
      createLightbox(img.src, title, description, index);
    });
  });
  
  function createLightbox(imageSrc, title, description, currentIndex) {
    // Remove existing lightbox
    const existingLightbox = document.querySelector('.lightbox');
    if (existingLightbox) {
      existingLightbox.remove();
    }
    
    // Create lightbox elements
    const lightbox = document.createElement('div');
    lightbox.className = 'lightbox';
    lightbox.innerHTML = `
      <div class="lightbox-backdrop"></div>
      <div class="lightbox-content">
        <button class="lightbox-close">&times;</button>
        <img src="${imageSrc}" alt="${title}" />
        <div class="lightbox-info">
          <h3>${title}</h3>
          <p>${description}</p>
        </div>
        <div class="lightbox-nav">
          <button class="nav-prev">&#8249;</button>
          <button class="nav-next">&#8250;</button>
        </div>
      </div>
    `;
    
    // Add lightbox styles
    const lightboxStyles = `
      .lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
      }
      
      .lightbox-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
      }
      
      .lightbox-content {
        position: relative;
        max-width: 90vw;
        max-height: 90vh;
        background: white;
        border-radius: 12px;
        overflow: hidden;
        animation: scaleIn 0.3s ease;
      }
      
      .lightbox-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 24px;
        cursor: pointer;
        z-index: 10;
        transition: background 0.3s ease;
      }
      
      .lightbox-close:hover {
        background: rgba(0, 0, 0, 0.7);
      }
      
      .lightbox-content img {
        width: 100%;
        height: auto;
        display: block;
      }
      
      .lightbox-info {
        padding: 20px;
        text-align: center;
      }
      
      .lightbox-info h3 {
        margin: 0 0 10px 0;
        color: #333;
      }
      
      .lightbox-info p {
        margin: 0;
        color: #666;
      }
      
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      
      @keyframes scaleIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
      }
    `;
    
    // Add styles to head if not already added
    if (!document.querySelector('#lightbox-styles')) {
      const styleSheet = document.createElement('style');
      styleSheet.id = 'lightbox-styles';
      styleSheet.textContent = lightboxStyles;
      document.head.appendChild(styleSheet);
    }
    
    document.body.appendChild(lightbox);
    
    // Close lightbox handlers
    const closeBtn = lightbox.querySelector('.lightbox-close');
    const backdrop = lightbox.querySelector('.lightbox-backdrop');
    
    closeBtn.addEventListener('click', closeLightbox);
    backdrop.addEventListener('click', closeLightbox);
    
    // Keyboard navigation
    document.addEventListener('keydown', handleKeydown);
    
    function closeLightbox() {
      lightbox.style.animation = 'fadeOut 0.3s ease';
      setTimeout(() => {
        lightbox.remove();
        document.removeEventListener('keydown', handleKeydown);
      }, 300);
    }
    
    function handleKeydown(e) {
      if (e.key === 'Escape') {
        closeLightbox();
      }
    }
  }
  
  // Add fadeOut animation
  const fadeOutKeyframes = `
    @keyframes fadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }
  `;
  
  const existingStyles = document.querySelector('#lightbox-styles');
  if (existingStyles) {
    existingStyles.textContent += fadeOutKeyframes;
  }
});