/* Shared reveal layout and top alignment for every category. */
#viewer.portfolio-viewer {
  position: fixed;
  inset: 24px 0 auto;
  margin: 0 auto;
  padding: 0;
  width: min(1920px, 96vw);
  max-width: 96vw;
  height: auto;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#viewer.portfolio-viewer .modal-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #111;
}
#viewer.portfolio-viewer .reveal-layout.has-copy {
  grid-template-columns: var(--reveal-copy-width, 240px) minmax(0, 1fr);
  gap: var(--reveal-gap, 32px);
  padding: var(--reveal-padding, 32px);
  height: auto;
  max-height: none;
}
#viewer.portfolio-viewer .reveal-media { min-width: 0; align-self: start; }
#viewer.portfolio-viewer .modal-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
#viewer.portfolio-viewer #viewerImage[hidden],
#viewer.portfolio-viewer #videoStage[hidden] { display: none; }
#viewer.portfolio-viewer .video-stage { width: 100%; padding: 0; }
#viewer.portfolio-viewer .video-frame { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.grid.video-view { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .grid.video-view { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  #viewer.portfolio-viewer {
    inset: 12px 0 auto;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  #viewer.portfolio-viewer .reveal-layout.has-copy { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  #viewer.portfolio-viewer .modal-top { flex-direction: column; align-items: stretch; gap: 12px; }
  #viewer.portfolio-viewer .modal-actions { display: flex; width: 100%; gap: 8px; }
  #viewer.portfolio-viewer .modal-actions button { flex: 1; min-width: 0; }
}
@media (max-width: 560px) { .grid.video-view { grid-template-columns: 1fr; } }