/**
 * Gallery Directive Component
 *
 * A responsive image gallery with CSS Grid layout and optional lightbox support.
 * Uses CSS custom properties for flexible configuration.
 *
 * Structure:
 *   .gallery
 *     .gallery__item (figure)
 *       .gallery__link (optional, for lightbox)
 *         .gallery__image (img)
 *       .gallery__caption (figcaption)
 *
 * Custom Properties:
 *   --gallery-columns: Number of columns (default: 3)
 *   --gallery-gap: Gap between items (default: 1rem)
 *   --gallery-aspect-ratio: Image aspect ratio (default: 4/3)
 */

/* Gallery Container */
.gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
  gap: var(--gallery-gap, 1rem);
  margin: 1.5rem 0;
}

/* Gallery Item (figure) */
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md, 0.375rem);
  aspect-ratio: var(--gallery-aspect-ratio, 4/3);
  margin: 0;
  padding: 0;
  background: var(--color-surface-alt, #f3f4f6);
}

/* Lightbox Link Wrapper */
.gallery__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: zoom-in;
}

/* Gallery Image */
.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover Effects */
.gallery__item:hover .gallery__image {
  transform: scale(1.05);
}

.gallery__link:focus .gallery__image {
  outline: 2px solid var(--color-primary, #3b82f6);
  outline-offset: -2px;
}

/* Caption */
.gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
  color: #fff;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.4;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.gallery__item:hover .gallery__caption,
.gallery__link:focus + .gallery__caption {
  transform: translateY(0);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(
      calc(var(--gallery-columns, 3) - 1),
      1fr
    );
  }

  /* Ensure at least 2 columns for larger galleries */
  .gallery[style*="--gallery-columns: 4"] {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery[style*="--gallery-columns: 5"],
  .gallery[style*="--gallery-columns: 6"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery__caption {
    position: relative;
    transform: none;
    background: var(--color-surface, #fff);
    color: var(--color-text, inherit);
    padding: 0.5rem 0;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .gallery__item {
    background: var(--color-surface-alt-dark, #374151);
  }

  @media (max-width: 480px) {
    .gallery__caption {
      background: var(--color-surface-dark, #1f2937);
      color: var(--color-text-dark, #f3f4f6);
    }
  }
}

/* Lightbox Active State (when using a lightbox library) */
.gallery[data-lightbox="true"] .gallery__link {
  cursor: zoom-in;
}

.gallery[data-lightbox="false"] .gallery__link {
  cursor: default;
  pointer-events: none;
}

/* Loading State */
.gallery__image[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery__image[loading="lazy"].loaded,
.gallery__image:not([loading="lazy"]) {
  opacity: 1;
}

/* Masonry Layout Variant (optional) */
.gallery--masonry {
  display: block;
  column-count: var(--gallery-columns, 3);
  column-gap: var(--gallery-gap, 1rem);
}

.gallery--masonry .gallery__item {
  break-inside: avoid;
  margin-bottom: var(--gallery-gap, 1rem);
  aspect-ratio: auto;
}

@media (max-width: 768px) {
  .gallery--masonry {
    column-count: 2;
  }
}

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

/* Print Styles */
@media print {
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .gallery__caption {
    position: relative;
    transform: none;
    background: transparent;
    color: inherit;
  }

  .gallery__item:hover .gallery__image {
    transform: none;
  }
}
