/* ============================================================
   GREEN LABEL SERVICES — SHARED GALLERY LIGHTBOX
   lightbox.css
   ============================================================ */

/* ── Overlay ──────────────────────────────────────────────── */
#glb-overlay {
  position:       fixed;
  inset:          0;
  z-index:        9999;
  background:     #000;
  display:        flex;
  flex-direction: column;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.25s ease;
}

#glb-overlay.glb-open {
  opacity:        1;
  pointer-events: auto;
}

/* ── Header ───────────────────────────────────────────────── */
.glb-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1rem 1.25rem;
  flex-shrink:     0;
  background:      linear-gradient(to bottom, rgba(0,0,0,0.75), transparent);
  position:        relative;
  z-index:         10;
}

.glb-close {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  background:     transparent;
  border:         none;
  color:          var(--color-white, #fff);
  font-family:    var(--font, 'Raleway', sans-serif);
  font-size:      0.875rem;
  font-weight:    600;
  cursor:         pointer;
  padding:        0.5rem 0.75rem;
  border-radius:  var(--radius-pill, 9999px);
  min-height:     44px;
  min-width:      44px;
  transition:     background 0.2s ease, color 0.2s ease;
  letter-spacing: 0.02em;
}

.glb-close:hover {
  background: rgba(255,255,255,0.1);
  color:      var(--color-primary, #17C714);
}

.glb-counter {
  font-size:      0.8rem;
  font-weight:    600;
  color:          rgba(255,255,255,0.7);
  font-family:    var(--font, 'Raleway', sans-serif);
  letter-spacing: 0.06em;
}

/* ── Stage ────────────────────────────────────────────────── */
.glb-stage {
  flex:     1;
  display:  flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding:  0 4rem;
  min-height: 0;
}

.glb-img-wrap {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  height:          100%;
  min-width:       0;
  overflow:        hidden;
}

.glb-img {
  max-width:  100%;
  max-height: 100%;
  object-fit: contain;
  display:    block;
  transition: opacity 0.15s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.glb-img--exiting {
  opacity: 0;
}

/* ── Caption ──────────────────────────────────────────────── */
.glb-caption {
  position:       absolute;
  bottom:         0;
  left:           0;
  right:          0;
  padding:        2rem 1rem 0.75rem;
  background:     linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  pointer-events: none;
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
}

.glb-caption__service {
  display:        block;
  color:          var(--color-primary, #17C714);
  font-family:    var(--font, 'Raleway', sans-serif);
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.glb-caption__text {
  display:     block;
  color:       rgba(255,255,255,0.85);
  font-family: var(--font, 'Raleway', sans-serif);
  font-size:   0.875rem;
  line-height: 1.5;
}

/* ── Prev / Next ──────────────────────────────────────────── */
.glb-prev,
.glb-next {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         5;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.15);
  border:          1px solid rgba(255,255,255,0.2);
  color:           #fff;
  font-size:       0.9rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  backdrop-filter: blur(4px);
  transition:      background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  flex-shrink:     0;
}

.glb-prev { left:  0.75rem; }
.glb-next { right: 0.75rem; }

.glb-prev:hover,
.glb-next:hover {
  background:   rgba(0,128,0,0.5);
  border-color: var(--color-primary, #17C714);
  transform:    translateY(-50%) scale(1.08);
}

/* ── Thumbnail strip ──────────────────────────────────────── */
.glb-thumbs {
  display:         flex;
  overflow-x:      auto;
  gap:             4px;
  padding:         8px 12px;
  background:      rgba(0,0,0,0.8);
  flex-shrink:     0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.glb-thumbs::-webkit-scrollbar {
  display: none;
}

.glb-thumb {
  width:         80px;
  height:        52px;
  flex-shrink:   0;
  border:        2px solid transparent;
  border-radius: 4px;
  overflow:      hidden;
  opacity:       0.5;
  cursor:        pointer;
  padding:       0;
  background:    #111;
  transition:    opacity 0.2s ease, border-color 0.2s ease;
}

.glb-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  pointer-events: none;
}

.glb-thumb:hover {
  opacity: 0.8;
}

.glb-thumb--active {
  opacity:      1;
  border-color: var(--color-primary, #17C714);
}

/* ── Single image mode ────────────────────────────────────── */
#glb-overlay.glb-single .glb-prev,
#glb-overlay.glb-single .glb-next,
#glb-overlay.glb-single .glb-thumbs {
  display: none;
}

/* ── Responsive: tablet (≤ 640px) ────────────────────────── */
@media (max-width: 640px) {
  .glb-stage {
    padding: 0 0.5rem;
  }

  .glb-prev { left:  0.25rem; }
  .glb-next { right: 0.25rem; }

  .glb-thumb {
    width:  60px;
    height: 40px;
  }
}

/* ── Responsive: mobile (≤ 480px) — rely on swipe ────────── */
@media (max-width: 480px) {
  .glb-prev,
  .glb-next {
    display: none;
  }

  .glb-stage {
    padding: 0;
  }

  .glb-close span {
    display: none;
  }

  .glb-close {
    width:  44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
}