/*!
 * UI Design & Front-End Architecture by Woomark Studio
 * Exclusive theme developed for synergyo2.com
 *
 * wmkgallery.css — structural styles for wmkgallery.js (load BEFORE styles.css).
 * Variables: --wmk-gal-thumb (thumb size) · --wmk-gal-gap · --wmk-gal-radius · --wmk-gal-accent
 */
.wmk-gallery {
  --wmk-gal-thumb: 84px;
  --wmk-gal-gap: 16px;
  --wmk-gal-radius: 24px;
  --wmk-gal-accent: #1f6fd6;
  display: grid;
  grid-template-columns: var(--wmk-gal-thumb) minmax(0, 1fr);
  gap: var(--wmk-gal-gap);
  align-items: start;
}
.wmk-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wmk-gallery__thumb {
  width: var(--wmk-gal-thumb);
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid #dbe6f2;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.3s,
    box-shadow 0.3s,
    transform 0.3s;
}
.wmk-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.wmk-gallery__thumb:hover {
  transform: translateY(-2px);
}
.wmk-gallery__thumb:hover img,
.wmk-gallery__thumb.is-active img {
  opacity: 1;
}
.wmk-gallery__thumb.is-active {
  border-color: var(--wmk-gal-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wmk-gal-accent) 18%, transparent);
}
.wmk-gallery__stage {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--wmk-gal-radius);
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
  touch-action: pan-y;
}
.wmk-gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1),
    opacity 0.16s;
  user-select: none;
  -webkit-user-drag: none;
}
.wmk-gallery__stage.is-zooming .wmk-gallery__img {
  transition: opacity 0.16s;
}
.wmk-gallery__img.is-swapping {
  opacity: 0;
}

/* ---------- Lightbox ---------- */
.wmk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 70px 24px;
  background: rgba(4, 21, 46, 0.94);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.wmk-lightbox.show {
  opacity: 1;
  visibility: visible;
}
.wmk-lightbox__canvas {
  justify-self: center;
  width: min(100%, calc(100dvh - 140px));
  aspect-ratio: 1;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
  touch-action: none;
  transform: scale(0.96);
  transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.wmk-lightbox.show .wmk-lightbox__canvas {
  transform: none;
}
.wmk-lightbox__canvas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1);
  user-select: none;
}
.wmk-lightbox__canvas.is-zoomed {
  cursor: zoom-out;
}
.wmk-lightbox__canvas.is-zoomed img {
  transform: scale(2.4);
}
.wmk-lightbox__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s,
    rotate 0.3s;
}
.wmk-lightbox__btn:hover {
  background: #fff;
  color: #061733;
}
.wmk-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
}
.wmk-lightbox__close:hover {
  rotate: 90deg;
}
.wmk-lightbox.is-single .wmk-lightbox__prev,
.wmk-lightbox.is-single .wmk-lightbox__next {
  visibility: hidden;
}
.wmk-lightbox__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  justify-content: center;
  gap: 18px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
}
.wmk-lightbox__count {
  font-weight: 700;
  color: #fff;
}

@media (max-width: 940px) {
  .wmk-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
  .wmk-gallery__thumbs {
    order: 2;
    flex-direction: row;
    justify-content: center;
  }
  .wmk-gallery__thumb {
    --wmk-gal-thumb: 68px;
  }
}
@media (max-width: 620px) {
  .wmk-lightbox {
    grid-template-columns: minmax(0, 1fr);
    padding: 70px 12px 110px;
  }
  .wmk-lightbox__canvas {
    width: 100%;
  }
  .wmk-lightbox__prev,
  .wmk-lightbox__next {
    position: absolute;
    bottom: 48px;
    width: 46px;
    height: 46px;
  }
  .wmk-lightbox__prev {
    left: calc(50% - 64px);
  }
  .wmk-lightbox__next {
    right: calc(50% - 64px);
  }
  .wmk-lightbox__bar {
    bottom: 16px;
  }
  .wmk-lightbox__count {
    display: none;
  }
}