/* =========================================================
   V11 — gallery scale-in/out, visible arrows, photo transitions
   ========================================================= */

/* A modal zoom rather than a flat fade. */
.wedding-gallery {
  transform: scale(0.95);
  transform-origin: 50% 50%;
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.5s ease;
  will-change: opacity, transform;
}

.wedding-gallery.is-open {
  transform: scale(1);
}

/* Three-column stage: the image sits between two full-height click zones. */
.wg-stage {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr);
  align-items: center;
  padding: 16px 0;
}

.wg-figure {
  grid-column: 2;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100svh - 160px);
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wg-figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 160px);
  will-change: transform, opacity;
}

.wg-zone {
  position: relative;
  top: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  z-index: 3;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.wg-zone--prev {
  grid-column: 1;
  justify-content: flex-end;
  padding-right: clamp(14px, 2.4vw, 34px);
}

.wg-zone--next {
  grid-column: 3;
  justify-content: flex-start;
  padding-left: clamp(14px, 2.4vw, 34px);
}

.wg-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  opacity: 0.94;
  transform: none;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(245, 251, 249, 0.58)),
    rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.99),
    0 7px 20px rgba(24, 45, 41, 0.1);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  font-size: 17px;
  line-height: 1;
  transition:
    background-color 0.25s ease,
    transform 0.25s var(--ease),
    box-shadow 0.25s ease;
}

.wg-zone:hover .wg-arrow,
.wg-zone:focus-visible .wg-arrow {
  opacity: 1;
  background: rgba(255, 255, 255, 0.96);
  transform: scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 10px 26px rgba(24, 45, 41, 0.14);
}

.wg-zone--prev:hover .wg-arrow {
  transform: scale(1.04) translateX(-2px);
}

.wg-zone--next:hover .wg-arrow {
  transform: scale(1.04) translateX(2px);
}

/* New photo enters with a small directional slide + fade. */
@keyframes wgPhotoIn {
  from {
    opacity: 0.02;
    transform: translateX(calc(var(--wg-shift, 1) * -14%)) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.wg-figure img.is-photo-in {
  animation: wgPhotoIn 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 760px) {
  .wg-stage {
    display: flex;
    position: relative;
    padding: 10px 0;
  }

  .wg-figure {
    width: 100%;
    height: auto;
    max-height: calc(100svh - 150px);
    padding: 0 16px;
  }

  .wg-figure img {
    max-width: 100%;
    max-height: calc(100svh - 150px);
  }

  .wg-zone {
    position: absolute;
    top: 50%;
    bottom: auto;
    width: 46px;
    height: 58px;
    z-index: 4;
    transform: translateY(-50%);
    padding: 0;
  }

  .wg-zone--prev {
    left: 7px;
    justify-content: flex-start;
  }

  .wg-zone--next {
    right: 7px;
    justify-content: flex-end;
  }

  .wg-arrow {
    width: 38px;
    height: 38px;
    font-size: 15px;
    opacity: 0.9;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(245, 251, 249, 0.64)),
      rgba(255, 255, 255, 0.5);
  }
}

@media (max-width: 380px) {
  .wg-arrow {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .wg-zone {
    width: 40px;
    height: 52px;
  }

  .wg-zone--prev {
    left: 4px;
  }

  .wg-zone--next {
    right: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wedding-gallery {
    transform: none;
  }

  .wg-figure img.is-photo-in {
    animation: none;
  }
}