/* ============================================
   GALLERY CAROUSEL — masseuse detail
   ============================================ */

.gallery-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.gallery-carousel__track {
  display: flex;
  transition: transform var(--duration-lg) var(--ease);
}

.gallery-carousel__slide {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.gallery-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@supports (-webkit-touch-callout: none) {
  .gallery-carousel__slide {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .gallery-carousel__img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.gallery-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-raised);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background-color: rgba(14, 11, 9, 0.72);
  border: 1px solid var(--aura-gold);
  color: var(--aura-cream);
  font-family: 'Jost', var(--font-sans);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.gallery-carousel__btn:hover,
.gallery-carousel__btn:focus-visible {
  background-color: var(--aura-gold);
  color: var(--aura-bg);
  border-color: var(--aura-gold);
  transform: translateY(-50%);
}
.gallery-carousel__btn--prev { left: var(--sp-3); }
.gallery-carousel__btn--next { right: var(--sp-3); }

/* ---- Dots ---- */
.gallery-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
}

.gallery-carousel__dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gallery-carousel__dot::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(200, 169, 110, 0.35);
  border-radius: var(--radius-full);
  background: transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.gallery-carousel__dot--active::before {
  background: var(--aura-gold);
  border-color: var(--aura-gold);
  transform: scale(1.2);
}

/* ---- Gallery zoom button (wraps image for keyboard access) ---- */
.gallery-carousel__zoom-btn:focus-visible {
  outline: 2px solid var(--aura-gold);
  outline-offset: -2px;
}

/* ---- Lightbox overlay (managed by filters.js) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sp-8) + env(safe-area-inset-top)) calc(var(--sp-8) + env(safe-area-inset-right)) calc(var(--sp-8) + env(safe-area-inset-bottom)) calc(var(--sp-8) + env(safe-area-inset-left));
  touch-action: none;
}

.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: 90vw;
  max-height: 90dvh;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.lightbox__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--text);
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(255,255,255,0.22);
}

/* ---- Lightbox prev / next navigation ---- */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 1px solid rgba(200, 169, 110, 0.4);
  border-radius: var(--radius-full);
  background: rgba(14, 11, 9, 0.72);
  color: var(--aura-cream);
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.lightbox__nav--prev { left: var(--sp-3); }
.lightbox__nav--next { right: var(--sp-3); }

.lightbox__nav:hover,
.lightbox__nav:focus-visible {
  background: rgba(200, 169, 110, 0.22);
  border-color: var(--aura-gold);
}

.lightbox__nav[hidden] { display: none; }

@media (max-width: 768px) {
  .lightbox {
    padding: calc(var(--sp-3) + env(safe-area-inset-top)) calc(var(--sp-3) + env(safe-area-inset-right)) calc(var(--sp-3) + env(safe-area-inset-bottom)) calc(var(--sp-3) + env(safe-area-inset-left));
  }
}