/* LULY Viewer V6 — portrait-safe viewers + geometrically centered close icons
   Loaded last on Home + Portfolio. */

/* ---------- Vault viewer: portrait artwork must be visible edge-to-edge ---------- */
#luly-vault .vault-viewer-stage {
  height: calc(100dvh - 20px) !important;
  max-height: 1080px !important;
  padding: 10px 0 !important;
  gap: 10px !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

#luly-vault .vault-viewer-media {
  min-width: 0 !important;
  min-height: 0 !important;
}

#luly-vault .vault-viewer-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* A portrait no longer inherits the full landscape media width.  Its media frame is
   sized from the image's real aspect ratio and centered inside the viewer. */
#luly-vault .vault-viewer.is-portrait .vault-viewer-stage {
  width: min(100%, 1120px) !important;
  max-width: min(1120px, calc(100vw - 180px)) !important;
}

#luly-vault .vault-viewer.is-portrait .vault-viewer-media {
  width: min(100%, calc((100dvh - 125px) * var(--viewer-ratio, .8))) !important;
  max-width: 760px !important;
  height: 100% !important;
  justify-self: center !important;
}

#luly-vault .vault-viewer.is-square .vault-viewer-media,
#luly-vault .vault-viewer.is-landscape .vault-viewer-media {
  width: 100% !important;
  height: 100% !important;
}

#luly-vault .vault-viewer-caption {
  min-height: 58px !important;
}

/* ---------- Legacy/Home lightbox: preserve real artwork shape ---------- */
.luly-lightbox-card {
  grid-template-rows: minmax(0, 1fr) auto !important;
  max-height: calc(100dvh - 32px) !important;
}

.luly-lightbox-card img {
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #020201 !important;
}

.luly-lightbox-card.is-portrait {
  width: min(calc((100dvh - 110px) * var(--lightbox-ratio, .8)), calc(100vw - 40px), 760px) !important;
}

.luly-lightbox-card.is-portrait img {
  width: 100% !important;
  height: min(82dvh, 1000px) !important;
  max-width: 100% !important;
  max-height: none !important;
}

.luly-lightbox-card.is-landscape,
.luly-lightbox-card.is-square {
  width: min(1120px, calc(100vw - 40px)) !important;
}

.luly-lightbox-card.is-landscape img,
.luly-lightbox-card.is-square img {
  width: 100% !important;
  height: min(78dvh, 900px) !important;
}

/* ---------- Exact X centering: draw the icon instead of relying on font metrics ---------- */
.luly-lightbox-close,
#luly-vault .vault-viewer-close {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.luly-lightbox-close::before,
.luly-lightbox-close::after,
#luly-vault .vault-viewer-close::before,
#luly-vault .vault-viewer-close::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 17px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: center !important;
  pointer-events: none !important;
}

.luly-lightbox-close::before,
#luly-vault .vault-viewer-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.luly-lightbox-close::after,
#luly-vault .vault-viewer-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

@media (max-width: 991.98px) {
  #luly-vault .vault-viewer.is-portrait .vault-viewer-stage {
    max-width: calc(100vw - 120px) !important;
  }
}

@media (max-width: 767.98px) {
  #luly-vault .vault-viewer-stage,
  #luly-vault .vault-viewer.is-portrait .vault-viewer-stage {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 0 !important;
  }

  #luly-vault .vault-viewer.is-portrait .vault-viewer-media {
    width: min(100%, calc((100dvh - 150px) * var(--viewer-ratio, .8))) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .luly-lightbox-card.is-portrait {
    width: min(calc((100dvh - 90px) * var(--lightbox-ratio, .8)), calc(100vw - 24px)) !important;
  }
}