/* Final viewer composition. The artwork owns the visual centre of the mobile
   viewport; title and actions float independently above and below it. */
@media (max-width: 760px) {
  #projectViewer .project-viewer-card {
    position: relative;
    display: block !important;
    width: 100%;
    min-height: 100dvh !important;
    padding: 0 !important;
  }

  #projectViewer .project-viewer-header {
    position: absolute !important;
    z-index: 12;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    left: 14px;
    display: block !important;
    pointer-events: none;
  }

  #projectViewer .project-viewer-title-row {
    position: static !important;
    width: min(100%, calc(100vw - 28px)) !important;
    margin: 0 auto !important;
    pointer-events: auto;
  }

  #projectViewer .project-viewer-media {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: max(76px, calc(env(safe-area-inset-top) + 64px)) 14px max(112px, calc(env(safe-area-inset-bottom) + 94px)) !important;
    overflow: hidden !important;
  }

  #projectViewer .project-viewer-stage {
    flex: 0 1 auto;
    max-height: 100%;
  }

  #projectViewer .project-viewer-image {
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 210px) !important;
  }

  #projectViewer .project-viewer-dots {
    flex: 0 0 auto;
    margin: 12px auto 0 !important;
  }

  #projectViewer .project-viewer-actions {
    position: absolute !important;
    z-index: 13;
    right: 14px;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 14px;
    width: max-content !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 auto !important;
  }
}