/* LULY Viewer V8
   - Vault portrait projects always show the COMPLETE source image (including the very bottom).
   - Legacy/Home lightbox no longer creates tall black letterbox bands around 16:9 work.
   Loaded after V5/V6/V7 so these geometry rules are authoritative. */

/* --------------------------------------------------------------------------
   1) VAULT VIEWER — size the PORTRAIT FRAME itself to the real image ratio.
   The previous versions sized a portrait container by width but still let it fill the
   entire media row by height. That could leave a container whose shape no longer matched
   the 4:5 file, which is exactly how the lower part of a poster could appear clipped.
   -------------------------------------------------------------------------- */
#luly-vault .vault-viewer-stage,
#luly-vault .vault-viewer.is-portrait .vault-viewer-stage,
#luly-vault .vault-viewer.is-square .vault-viewer-stage,
#luly-vault .vault-viewer.is-landscape .vault-viewer-stage{
  box-sizing: border-box !important;
  height: min(calc(100dvh - var(--luly-nav-safe-height) - 20px), 790px) !important;
  max-height: calc(100dvh - var(--luly-nav-safe-height) - 20px) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  overflow: visible !important;
}

#luly-vault .vault-viewer.is-portrait .vault-viewer-media{
  /* The first grid row gives us the available height.  Make the frame exactly 4:5
     (or whatever the source actually is) from that height instead of stretching it. */
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: var(--viewer-ratio, .8) !important;
  justify-self: center !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

#luly-vault .vault-viewer.is-portrait .vault-viewer-media img{
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* Landscape/square should simply occupy the available row and contain the image. */
#luly-vault .vault-viewer.is-landscape .vault-viewer-media,
#luly-vault .vault-viewer.is-square .vault-viewer-media{
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

#luly-vault .vault-viewer.is-landscape .vault-viewer-media img,
#luly-vault .vault-viewer.is-square .vault-viewer-media img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Keep the title row compact so it never steals poster height unnecessarily. */
#luly-vault .vault-viewer-caption{
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   2) HOME + OLD PORTFOLIO LIGHTBOX — use the image's REAL ratio for the card.
   No forced 690px/78vh image height = no large black bars above/below 16:9 files.
   -------------------------------------------------------------------------- */
.luly-lightbox{
  align-items: center !important;
  justify-items: center !important;
}

.luly-lightbox-card,
.luly-lightbox-card.is-landscape,
.luly-lightbox-card.is-square,
.luly-lightbox-card.is-portrait{
  display: grid !important;
  grid-template-rows: auto auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--luly-nav-safe-height) - 24px) !important;
}

/* For landscape work (normally 16:9), cap width by BOTH viewport width and available
   viewport height.  This keeps the popup compact and very close to the artwork itself. */
.luly-lightbox-card.is-landscape{
  width: min(
    1060px,
    calc(100vw - 32px),
    calc((100dvh - var(--luly-nav-safe-height) - 88px) * var(--lightbox-ratio, 1.7778))
  ) !important;
}

.luly-lightbox-card.is-square{
  width: min(
    760px,
    calc(100vw - 32px),
    calc((100dvh - var(--luly-nav-safe-height) - 88px) * var(--lightbox-ratio, 1))
  ) !important;
}

.luly-lightbox-card.is-portrait{
  width: min(
    650px,
    calc(100vw - 32px),
    calc((100dvh - var(--luly-nav-safe-height) - 88px) * var(--lightbox-ratio, .8))
  ) !important;
}

.luly-lightbox-card img,
.luly-lightbox-card.is-landscape img,
.luly-lightbox-card.is-square img,
.luly-lightbox-card.is-portrait img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--luly-nav-safe-height) - 88px) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #020201 !important;
}

/* The caption stays a narrow footer rather than looking like another black image band. */
.luly-lightbox-caption{
  min-height: 0 !important;
  padding: .72rem 1rem !important;
  line-height: 1.25 !important;
}

@media (max-width: 767.98px){
  #luly-vault .vault-viewer-stage,
  #luly-vault .vault-viewer.is-portrait .vault-viewer-stage,
  #luly-vault .vault-viewer.is-square .vault-viewer-stage,
  #luly-vault .vault-viewer.is-landscape .vault-viewer-stage{
    height: calc(100dvh - var(--luly-nav-safe-height) - 72px) !important;
    max-height: none !important;
    padding: 0 !important;
  }

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

  .luly-lightbox-card.is-landscape,
  .luly-lightbox-card.is-square,
  .luly-lightbox-card.is-portrait{
    width: min(
      calc(100vw - 16px),
      calc((100dvh - var(--luly-nav-safe-height) - 72px) * var(--lightbox-ratio, 1.7778))
    ) !important;
  }

  .luly-lightbox-card img,
  .luly-lightbox-card.is-landscape img,
  .luly-lightbox-card.is-square img,
  .luly-lightbox-card.is-portrait img{
    max-height: calc(100dvh - var(--luly-nav-safe-height) - 72px) !important;
  }
}