/* ========================================
   GALLERY-MASONRY.CSS - Masonry Gallery Styles
   Pinterest-style variable-height grid layout
   ======================================== */

/* ===== GALLERY SECTION ===== */
.gallery-masonry-section {
  padding: var(--spacing-xl) 0;
  min-height: 100vh;
}

/* ===== MASONRY GRID ===== */
.masonry-grid {
  column-count: 4;
  column-gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* ===== MASONRY ITEM ===== */
.masonry-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-card);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);

  /* Fade-in animation - start hidden */
  opacity: 0;
  transform: translateY(20px);
}

/* Fade-in visible state */
.masonry-item--visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, box-shadow var(--transition-normal);
}

/* Staggered animation delay based on position */
.masonry-item:nth-child(4n+1) { transition-delay: 0ms; }
.masonry-item:nth-child(4n+2) { transition-delay: 50ms; }
.masonry-item:nth-child(4n+3) { transition-delay: 100ms; }
.masonry-item:nth-child(4n+4) { transition-delay: 150ms; }

/* Hover effect - subtle scale with increased shadow */
.masonry-item:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* Reset transform for visible + hover */
.masonry-item--visible:hover {
  transform: scale(1.02);
}

.masonry-item-image {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-slow);
}

.masonry-item:hover .masonry-item-image {
  transform: scale(1.05);
}

/* Image overlay with info */
.masonry-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.masonry-item:hover .masonry-item-overlay {
  opacity: 1;
  transform: translateY(0);
}

.masonry-item-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masonry-item-category {
  font-size: 0.8rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== LOADING STATE ===== */
.masonry-grid .gallery-loading {
  column-span: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxl);
  color: var(--color-text-muted);
}

/* ===== IMAGE PROTECTION ===== */
.masonry-item-image {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.masonry-item {
  -webkit-touch-callout: none;
}

/* ===== RESPONSIVE - Tablet (3 columns) ===== */
@media (max-width: 1024px) {
  .masonry-grid {
    column-count: 3;
    column-gap: var(--spacing-md);
  }

  .masonry-item {
    margin-bottom: var(--spacing-md);
  }

  /* Adjust stagger for 3 columns */
  .masonry-item:nth-child(3n+1) { transition-delay: 0ms; }
  .masonry-item:nth-child(3n+2) { transition-delay: 50ms; }
  .masonry-item:nth-child(3n+3) { transition-delay: 100ms; }
}

/* ===== RESPONSIVE - Small Tablet (2 columns) ===== */
@media (max-width: 768px) {
  .masonry-grid {
    column-count: 2;
    column-gap: var(--spacing-sm);
  }

  .masonry-item {
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-md);
  }

  .masonry-item-overlay {
    padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
  }

  .masonry-item-title {
    font-size: 0.85rem;
  }

  .masonry-item-category {
    font-size: 0.7rem;
  }

  /* Adjust stagger for 2 columns */
  .masonry-item:nth-child(odd) { transition-delay: 0ms; }
  .masonry-item:nth-child(even) { transition-delay: 50ms; }
}

/* ===== RESPONSIVE - Mobile (1 column) ===== */
@media (max-width: 480px) {
  .masonry-grid {
    column-count: 1;
    column-gap: 0;
  }

  .masonry-item {
    margin-bottom: var(--spacing-md);
  }

  /* No stagger needed for single column */
  .masonry-item { transition-delay: 0ms; }

  /* Always show overlay on mobile for accessibility */
  .masonry-item-overlay {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== LIGHTBOX CLOSE BUTTON OVERRIDE ===== */
.gallery-masonry-section ~ .gallery-lightbox .gallery-lightbox-close,
.gallery-lightbox .gallery-lightbox-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #000;
  border-radius: 50%;
  color: #000;
  cursor: pointer;
  padding: 0;
  opacity: 1;
  transition: background var(--transition-fast), transform var(--transition-fast);
  z-index: 20;
}

.gallery-lightbox .gallery-lightbox-close:hover {
  background: #fff;
  transform: scale(1.1);
}

.gallery-lightbox .gallery-lightbox-close svg {
  stroke: #000;
  width: 18px;
  height: 18px;
}

/* ===== REUSE GALLERY SHARED STYLES ===== */
/* Hero, tabs, purchase banner, and lightbox styles are inherited from gallery.css */