/* ============================================================
   css/components/gallery.css
   Zolto v8.1.0 — Image Gallery & Media Grid Components
   ============================================================
   Purpose:
   - .zolto-gallery      — base gallery container
   - Layout variants: grid, masonry, strip, carousel
   - Gallery item: image, caption, overlay
   - Lightbox overlay for full-size viewing
   - All values via CSS custom properties from variables.css
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. Gallery Base
   ───────────────────────────────────────────────────────────── */

.zolto-gallery {
  margin-bottom: var(--prose-block-gap);
  position:      relative;
}

.zolto-gallery-title {
  font-size:     var(--text-sm);
  font-weight:   var(--weight-semibold);
  color:         var(--text-mute);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-wide);
}


/* ─────────────────────────────────────────────────────────────
   2. Grid Layout (default)
   ───────────────────────────────────────────────────────────── */

.zolto-gallery-grid {
  display:               grid;
  grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
  gap:                   var(--space-2);
}

.zolto-gallery-grid-2 { --gallery-cols: 2; }
.zolto-gallery-grid-3 { --gallery-cols: 3; }
.zolto-gallery-grid-4 { --gallery-cols: 4; }
.zolto-gallery-grid-5 { --gallery-cols: 5; }

/* Auto-fit variant */
.zolto-gallery-auto {
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(var(--gallery-min-width, 180px), 100%), 1fr)
  );
}


/* ─────────────────────────────────────────────────────────────
   3. Masonry Layout (CSS columns)
   ───────────────────────────────────────────────────────────── */

.zolto-gallery-masonry {
  column-count:  var(--gallery-cols, 3);
  column-gap:    var(--space-2);
}

.zolto-gallery-masonry .zolto-gallery-item {
  break-inside:  avoid;
  margin-bottom: var(--space-2);
}


/* ─────────────────────────────────────────────────────────────
   4. Strip Layout (horizontal scroll row)
   ───────────────────────────────────────────────────────────── */

.zolto-gallery-strip {
  display:     flex;
  gap:         var(--space-2);
  overflow-x:  auto;
  overflow-y:  hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: var(--space-1); /* Room for scrollbar */
}

.zolto-gallery-strip .zolto-gallery-item {
  flex-shrink:      0;
  width:            var(--gallery-strip-width, 260px);
  scroll-snap-align: start;
}


/* ─────────────────────────────────────────────────────────────
   5. Carousel Layout
   ───────────────────────────────────────────────────────────── */

.zolto-gallery-carousel {
  position:   relative;
  overflow:   hidden;
}

.zolto-gallery-carousel-track {
  display:    flex;
  transition: transform var(--duration-slow) var(--ease-out);
  will-change: transform;
}

.zolto-gallery-carousel .zolto-gallery-item {
  flex:        0 0 100%;
  max-width:   100%;
}

.zolto-gallery-carousel-btn {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  z-index:          var(--z-raised);
  width:            40px;
  height:           40px;
  border-radius:    var(--radius-full);
  background:       rgba(0, 0, 0, 0.55);
  border:           1px solid rgba(255, 255, 255, 0.15);
  color:            #ffffff;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  transition:       background var(--duration-fast) var(--ease-out),
                    opacity    var(--duration-fast) var(--ease-out);
  backdrop-filter:  blur(4px);
}

.zolto-gallery-carousel-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

.zolto-gallery-carousel-btn svg {
  width:  18px;
  height: 18px;
}

.zolto-gallery-carousel-prev { left:  var(--space-3); }
.zolto-gallery-carousel-next { right: var(--space-3); }

/* Dot indicators */
.zolto-gallery-carousel-dots {
  display:         flex;
  justify-content: center;
  gap:             var(--space-1-5);
  margin-top:      var(--space-3);
}

.zolto-gallery-carousel-dot {
  width:         8px;
  height:        8px;
  border-radius: var(--radius-full);
  background:    var(--border-normal);
  cursor:        pointer;
  transition:    background   var(--duration-fast) var(--ease-out),
                 transform    var(--duration-fast) var(--ease-out);
}

.zolto-gallery-carousel-dot.active {
  background: var(--accent-primary);
  transform:  scale(1.25);
}


/* ─────────────────────────────────────────────────────────────
   6. Gallery Item
   ───────────────────────────────────────────────────────────── */

.zolto-gallery-item {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--radius-md);
  background:    var(--bg-surface);
  cursor:        pointer;
  display:       block;
}

/* Aspect ratio containers */
.zolto-gallery-item[data-ratio="square"]    { aspect-ratio: 1 / 1; }
.zolto-gallery-item[data-ratio="landscape"] { aspect-ratio: 16 / 9; }
.zolto-gallery-item[data-ratio="portrait"]  { aspect-ratio: 3 / 4; }
.zolto-gallery-item[data-ratio="wide"]      { aspect-ratio: 21 / 9; }


/* ─────────────────────────────────────────────────────────────
   7. Gallery Image
   ───────────────────────────────────────────────────────────── */

.zolto-gallery-img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  object-position: center;
  display:     block;
  transition:  transform var(--duration-slow) var(--ease-out);
  will-change: transform;
}

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

/* No-crop variant — shows full image with letterbox */
.zolto-gallery-item.zolto-gallery-contain .zolto-gallery-img {
  object-fit: contain;
  background: var(--bg-code);
}


/* ─────────────────────────────────────────────────────────────
   8. Gallery Overlay (hover reveal)
   ───────────────────────────────────────────────────────────── */

.zolto-gallery-overlay {
  position:         absolute;
  inset:            0;
  background:       linear-gradient(
                      to top,
                      rgba(0, 0, 0, 0.70) 0%,
                      rgba(0, 0, 0, 0.20) 50%,
                      transparent         100%
                    );
  display:          flex;
  flex-direction:   column;
  justify-content:  flex-end;
  padding:          var(--space-4);
  opacity:          0;
  transition:       opacity var(--duration-normal) var(--ease-out);
  pointer-events:   none;
}

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

/* Always-visible overlay variant (for captions) */
.zolto-gallery-item.zolto-gallery-caption-always .zolto-gallery-overlay {
  opacity: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.60) 0%,
    transparent 60%
  );
}

.zolto-gallery-overlay-title {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       #ffffff;
  line-height: var(--leading-snug);
}

.zolto-gallery-overlay-desc {
  font-size:  var(--text-xs);
  color:      rgba(255, 255, 255, 0.75);
  margin-top: var(--space-0-5);
  line-height: var(--leading-snug);
}

/* Expand icon on hover */
.zolto-gallery-expand-icon {
  position:   absolute;
  top:        var(--space-3);
  right:      var(--space-3);
  width:      28px;
  height:     28px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display:    flex;
  align-items: center;
  justify-content: center;
  opacity:    0;
  transition: opacity var(--duration-fast) var(--ease-out);
  color:      #ffffff;
}

.zolto-gallery-expand-icon svg {
  width:  14px;
  height: 14px;
}

.zolto-gallery-item:hover .zolto-gallery-expand-icon {
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────────
   9. Gallery Caption (below image)
   ───────────────────────────────────────────────────────────── */

.zolto-gallery-caption {
  padding:   var(--space-1-5) var(--space-1);
  font-size: var(--text-xs);
  color:     var(--text-mute);
  line-height: var(--leading-snug);
  text-align:  center;
}


/* ─────────────────────────────────────────────────────────────
   10. Featured Item (spans columns)
   ───────────────────────────────────────────────────────────── */

.zolto-gallery-grid .zolto-gallery-item.featured {
  grid-column: span 2;
  grid-row:    span 2;
}

.zolto-gallery-grid-2 .zolto-gallery-item.featured,
.zolto-gallery-grid-4 .zolto-gallery-item.featured {
  grid-column: span 2;
}


/* ─────────────────────────────────────────────────────────────
   11. Lightbox Overlay
   ───────────────────────────────────────────────────────────── */

.zolto-lightbox {
  position:         fixed;
  inset:            0;
  z-index:          var(--z-modal);
  background:       rgba(0, 0, 0, 0.92);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  backdrop-filter:  blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation:        zolto-lightbox-in var(--duration-normal) var(--ease-out) forwards;
}

.zolto-lightbox[hidden] {
  display: none;
}

@keyframes zolto-lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lightbox image container */
.zolto-lightbox-content {
  position:   relative;
  max-width:  90vw;
  max-height: 90vh;
  display:    flex;
  flex-direction: column;
  align-items: center;
  animation:  zolto-lightbox-scale-in var(--duration-normal) var(--ease-spring) forwards;
}

@keyframes zolto-lightbox-scale-in {
  from {
    opacity:   0;
    transform: scale(0.92);
  }
  to {
    opacity:   1;
    transform: scale(1);
  }
}

.zolto-lightbox-img {
  max-width:     90vw;
  max-height:    80vh;
  object-fit:    contain;
  border-radius: var(--radius-md);
  display:       block;
  box-shadow:    var(--shadow-2xl);
}

.zolto-lightbox-caption {
  font-size:  var(--text-sm);
  color:      rgba(255, 255, 255, 0.65);
  margin-top: var(--space-3);
  text-align: center;
  max-width:  600px;
}

/* Close button */
.zolto-lightbox-close {
  position:         fixed;
  top:              var(--space-4);
  right:            var(--space-4);
  width:            40px;
  height:           40px;
  border-radius:    var(--radius-full);
  background:       rgba(255, 255, 255, 0.12);
  border:           1px solid rgba(255, 255, 255, 0.15);
  color:            #ffffff;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  font-size:        1.3rem;
  transition:       background var(--duration-fast) var(--ease-out);
}

.zolto-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Lightbox prev/next */
.zolto-lightbox-prev,
.zolto-lightbox-next {
  position:         fixed;
  top:              50%;
  transform:        translateY(-50%);
  width:            48px;
  height:           48px;
  border-radius:    var(--radius-full);
  background:       rgba(255, 255, 255, 0.10);
  border:           1px solid rgba(255, 255, 255, 0.15);
  color:            #ffffff;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  transition:       background var(--duration-fast) var(--ease-out);
}

.zolto-lightbox-prev:hover,
.zolto-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.22);
}

.zolto-lightbox-prev svg,
.zolto-lightbox-next svg {
  width:  20px;
  height: 20px;
}

.zolto-lightbox-prev { left:  var(--space-4); }
.zolto-lightbox-next { right: var(--space-4); }

/* Counter */
.zolto-lightbox-counter {
  position:    fixed;
  bottom:      var(--space-4);
  left:        50%;
  transform:   translateX(-50%);
  font-size:   var(--text-sm);
  font-family: var(--font-mono);
  color:       rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
  user-select: none;
}


/* ─────────────────────────────────────────────────────────────
   12. Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .zolto-gallery-grid-4,
  .zolto-gallery-grid-5 { --gallery-cols: 3; }
  .zolto-gallery-masonry { column-count: 2; }
}

@media (max-width: 480px) {
  .zolto-gallery-grid-3,
  .zolto-gallery-grid-4,
  .zolto-gallery-grid-5 { --gallery-cols: 2; }

  .zolto-gallery-masonry { column-count: 2; }

  .zolto-gallery-strip .zolto-gallery-item {
    width: calc(100vw - var(--space-16));
  }

  .zolto-gallery-grid .zolto-gallery-item.featured {
    grid-column: span 1;
    grid-row:    span 1;
  }

  .zolto-lightbox-prev { left:  var(--space-2); }
  .zolto-lightbox-next { right: var(--space-2); }
}