/* LULY Viewer V5 fixes
   1) Portrait artwork is always shown in full in the Vault viewer.
   2) The open viewer owns the viewport, so sections below can never slide over it.
   3) The older portfolio lightbox also preserves portrait artwork correctly. */

html.vault-viewer-open,
body.vault-viewer-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* #luly-vault creates an isolated stacking context. Raise that whole context only while
   the viewer is open, otherwise later page sections can visually pass above the modal. */
body.vault-viewer-open #luly-vault {
  z-index: 2147480000 !important;
  overflow: visible !important;
}

body.vault-viewer-open #luly-vault .vault-viewer {
  z-index: 2147481000 !important;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* Use almost the entire viewport but reserve a clean caption row. */
#luly-vault .vault-viewer-stage {
  height: min(calc(100dvh - 28px), 1080px) !important;
  max-height: none !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

#luly-vault .vault-viewer-media {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Critical fix: the image box fills the media viewport and object-fit does the sizing.
   This makes 4:5 / portrait posters fit by HEIGHT instead of being sized by width and clipped. */
#luly-vault .vault-viewer-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
}

/* Portraits feel more intentional in a slightly tighter cinematic stage. */
#luly-vault .vault-viewer.is-portrait .vault-viewer-stage {
  max-width: min(1040px, calc(100vw - 180px));
}

#luly-vault .vault-viewer.is-landscape .vault-viewer-stage,
#luly-vault .vault-viewer.is-square .vault-viewer-stage {
  max-width: 1500px;
}

/* Keep caption visible without stealing useful poster height. */
#luly-vault .vault-viewer-caption {
  min-height: 58px;
}

/* Older spinning-gallery lightbox: never force a portrait file into a landscape box. */
.luly-lightbox-card {
  width: min(1120px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
}

.luly-lightbox-card img {
  width: 100% !important;
  height: min(78dvh, 900px) !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #020201;
}

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

@media (max-width: 767.98px) {
  body.vault-viewer-open #luly-vault .vault-viewer {
    height: 100dvh;
    min-height: 100dvh;
  }

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

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

  #luly-vault .vault-viewer-caption {
    min-height: 66px;
  }

  .luly-lightbox-card {
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .luly-lightbox-card img {
    height: min(78dvh, 760px) !important;
  }
}