/* ── Project overlay (home page) ────────────────────────────────────────────── */

#project-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  background: rgba(217, 217, 217, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: overlayFadeIn 0.18s ease;
}

#project-overlay > .project-viewer {
  width: 100%;
  height: 100%;
}

/* Slide-projector mode: pitch-black backdrop, image slides in from the
   left like a slide drops into a Kodak Carousel projector. Triggered
   by JS adding .slide-mode when the source gallery is in slide style. */
#project-overlay.slide-mode {
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #d8d8d8;
  animation: overlayBlackIn 0.25s ease;
}

#project-overlay.slide-mode .project-viewer-header,
#project-overlay.slide-mode .project-nav {
  color: #d8d8d8;
}

#project-overlay.slide-mode .project-image {
  overflow: hidden;
}

#project-overlay.slide-mode .project-image img {
  transition: none;
}

#project-overlay.slide-mode .project-image img.slide-enter {
  animation: slideEnterFromLeft 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.18s; /* let the black backdrop settle first */
}

#project-overlay.slide-mode .project-image img.slide-exit {
  animation: slideExitToLeft 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}

@keyframes overlayBlackIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideEnterFromLeft {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes slideExitToLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-110%); opacity: 0; }
}

#project-overlay[hidden] {
  display: none;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Shared .project-viewer styles ──────────────────────────────────────────── */

/* Viewer is a fixed three-row grid: header (auto) / image (1fr) / nav
   (auto). Header and nav stay anchored so they don't shift between
   images. The image area fills whatever vertical space is left and the
   image inside it sizes according to viewport orientation (see below). */
.project-viewer {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  width: 100%;
  height: 100%;
  padding: 16px 20px 24px;
  box-sizing: border-box;
  gap: 12px;
}

.project-viewer-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
}

.project-close {
  font-size: 1.5rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 6px 0 0;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.project-close:hover {
  opacity: 1;
}

.project-title {
  font-size: var(--font-size-0);
  font-weight: 500;
  flex: 1;
}

.project-meta {
  font-size: var(--font-size-b1);
  color: #888;
  white-space: nowrap;
}

.project-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 0; /* allow grid track to shrink instead of pushing nav off */
  overflow: hidden;
}

/* --vw-image / --vh-image: room left for the image after subtracting
   header, nav, padding, and gaps. Tweak these together if header or nav
   sizing changes. */
.project-viewer {
  --image-chrome: 160px; /* header + nav + padding + gaps */
}

/* Portrait viewport: every image renders at the SAME WIDTH, height
   varies with the image's aspect ratio. Tall portraits whose natural
   height would exceed the available track shrink to fit (so very tall
   images render narrower than the standard width). */
@media (orientation: portrait) {
  .project-image img {
    width: min(960px, 88vw);
    height: auto;
    max-height: calc(100vh - var(--image-chrome));
    object-fit: contain;
    display: block;
  }
}

/* Landscape viewport: every image renders at the SAME HEIGHT, width
   varies with the image's aspect ratio. Very wide panoramas shrink to
   fit (rendering shorter than the standard height). */
@media (orientation: landscape) {
  .project-image img {
    height: calc(100vh - var(--image-chrome));
    width: auto;
    max-width: 92vw;
    object-fit: contain;
    display: block;
  }
}

.project-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.project-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 6px 12px;
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s;
  user-select: none;
}

.project-nav-btn:hover:not(.disabled):not([disabled]) {
  opacity: 1;
}

.project-nav-btn.disabled,
.project-nav-btn[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.project-nav-count {
  font-size: var(--font-size-b1);
  color: #888;
  min-width: 60px;
  text-align: center;
}

.project-description {
  font-size: var(--font-size-b1);
  color: #666;
  max-width: 600px;
  text-align: center;
  margin: 0;
}

/* ── Standalone viewer (project.php) ────────────────────────────────────────── */

.project-viewer.standalone {
  margin: 0 auto;
  animation: overlayFadeIn 0.18s ease;
}