/* LULY Viewer V7 — restore showcase scale + keep every viewer below the fixed header.
   This layer is intentionally narrow: it does NOT resize the underlying Home cards. */

:root{
  --luly-nav-safe-height: 88px;
}

/* ---------- HOME: restore the original compact 16:9 showcase geometry ---------- */
body.luly-home-page .luly-orbit-card{
  aspect-ratio: 16 / 9 !important;
  margin-top: calc(var(--card-width) * -.28125) !important;
  translate: none !important;
}

body.luly-home-page .luly-orbit-card.media-portrait,
body.luly-home-page .luly-orbit-card.media-square,
body.luly-home-page .luly-orbit-card.media-landscape,
body.luly-home-page .luly-orbit-card.media-ultrawide{
  --card-width: clamp(210px,22vw,330px) !important;
}

body.luly-home-page .luly-orbit-card[data-card="featured"],
body.luly-home-page .luly-orbit-card[data-card="featured"].media-portrait,
body.luly-home-page .luly-orbit-card[data-card="featured"].media-square,
body.luly-home-page .luly-orbit-card[data-card="featured"].media-landscape,
body.luly-home-page .luly-orbit-card[data-card="featured"].media-ultrawide{
  --card-width: clamp(240px,25vw,378px) !important;
}

/* Keep the Home image objects at their old size. Non-16:9 artwork is fitted inside
   the frame instead of making the whole card taller/larger. */
body.luly-home-page .portfolio-tile img,
body.luly-home-page .deck-card img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #080604 !important;
}

/* ---------- Fixed header always owns the top strip ---------- */
.navbar.luly-navbar,
.navbar.fixed-top.luly-navbar{
  z-index: 100000 !important;
}

/* The Vault modal lives BELOW the navbar instead of continuing behind the translucent
   header. The parent stacking context also stays below the navbar. */
body.vault-viewer-open #luly-vault{
  z-index: 90000 !important;
}

body.vault-viewer-open #luly-vault .vault-viewer,
#luly-vault .vault-viewer{
  inset: var(--luly-nav-safe-height) 0 0 0 !important;
  width: 100vw !important;
  height: calc(100dvh - var(--luly-nav-safe-height)) !important;
  min-height: 0 !important;
  z-index: 99998 !important;
}

/* V6 was almost full-viewport. Bring the project viewer back to a cleaner,
   slightly smaller gallery scale while keeping captions inside the viewport. */
#luly-vault .vault-viewer-stage,
#luly-vault .vault-viewer.is-landscape .vault-viewer-stage,
#luly-vault .vault-viewer.is-square .vault-viewer-stage{
  width: min(100%, 1360px) !important;
  max-width: min(1360px, calc(100vw - 190px)) !important;
  height: min(calc(100dvh - var(--luly-nav-safe-height) - 28px), 790px) !important;
  max-height: 790px !important;
  padding: 10px 0 !important;
  gap: 10px !important;
}

#luly-vault .vault-viewer.is-portrait .vault-viewer-stage{
  width: min(100%, 980px) !important;
  max-width: min(980px, calc(100vw - 190px)) !important;
  height: min(calc(100dvh - var(--luly-nav-safe-height) - 28px), 790px) !important;
  max-height: 790px !important;
  padding: 10px 0 !important;
}

/* Portrait media frame is calculated from the REAL image ratio, so the complete poster
   is visible from top to bottom without making the whole viewer giant. */
#luly-vault .vault-viewer.is-portrait .vault-viewer-media{
  width: min(100%, calc((100dvh - var(--luly-nav-safe-height) - 105px) * var(--viewer-ratio, .8))) !important;
  max-width: 650px !important;
  height: 100% !important;
  justify-self: center !important;
}

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

/* ---------- Older Home/Portfolio image popup ---------- */
.luly-lightbox{
  top: var(--luly-nav-safe-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(100dvh - var(--luly-nav-safe-height)) !important;
  padding: 12px !important;
  z-index: 90000 !important;
}

.luly-lightbox-card{
  width: min(1060px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - var(--luly-nav-safe-height) - 24px) !important;
}

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

.luly-lightbox-card.is-landscape img,
.luly-lightbox-card.is-square img{
  width: 100% !important;
  height: min(calc(100dvh - var(--luly-nav-safe-height) - 92px), 690px) !important;
  object-fit: contain !important;
}

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

.luly-lightbox-card.is-portrait img{
  width: 100% !important;
  height: auto !important;
  max-height: calc(100dvh - var(--luly-nav-safe-height) - 92px) !important;
  object-fit: contain !important;
}

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

@media (max-width: 767.98px){
  :root{ --luly-nav-safe-height: 76px; }

  #luly-vault .vault-viewer{
    padding: 12px .75rem 4.8rem !important;
  }

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

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

  .luly-lightbox{
    padding: 8px !important;
  }

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

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