/* Photo page, from Figma frame "MacBook Pro 14' - 9" (1512 x 982). */

.photo-page {
  height: 100svh;
  overflow: hidden;
  scrollbar-gutter: auto;
}
html:has(.photo-page) { scrollbar-gutter: auto; }

/* ---------- Viewer ---------- */
.viewer {
  position: fixed;
  inset: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.viewer.cursor-prev { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M15 5 8 12l7 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 5 8 12l7 7' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, w-resize; }
.viewer.cursor-next { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, e-resize; }
.viewer.at-start.cursor-prev,
.viewer.at-end.cursor-next { cursor: default; }

/* Category row: same line as the video page (centered between VIDEO/PHOTO and the image). */
.photo-page .filters {
  position: fixed;
  top: var(--filter-top);
  left: 16px;
  right: 16px;
  z-index: 20;
  padding: 0;
}

/* Photo box: starts where the first video card does on the video page (--card-top),
   ends 98px above the bottom to leave room for the counter. */
.stage {
  position: absolute;
  top: var(--card-top);
  left: 16px;
  right: 16px;
  height: calc(100svh - var(--card-top) - 98px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  contain: paint;   /* repaint the whole box on every photo change */
}
.photo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0; /* square corners */
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.photo.is-shown { opacity: 1; }
/* Two photos side by side at one shared height (height set in photo.js), 30px apart. */
.photo.spread { display: flex; gap: 30px; max-width: none; max-height: none; }
.photo.spread img { display: block; height: 100%; width: auto; }
.stage .empty { margin: 0; color: var(--muted); font-size: 15px; }
.viewer.is-empty { cursor: default !important; }

/* Counter: 41px below the photo box. */
.pager {
  position: absolute;
  top: calc(100svh - 57px); /* 41px below the photo box */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  font-size: 15px;
  pointer-events: none;
}
.counter { font-variant-numeric: tabular-nums; }

/* ---------- Desktop lightbox (scroll down to open, scroll up / Esc to close) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 4, 0);
  visibility: hidden;
  pointer-events: none;
  transition: background 0.45s ease, visibility 0s linear 0.45s;
}
.lightbox.open {
  background: rgba(4, 4, 4, 1);
  visibility: visible;
  pointer-events: auto;
  transition: background 0.35s ease, visibility 0s;
}
.lightbox:not(:empty) { visibility: visible; }   /* stay visible while the close animation runs */
.lb-content { display: flex; transform-origin: 0 0; will-change: transform; }
.lb-content img { display: block; }
.lb-content { position: relative; }
/* Name label: same frosted chip as the video titles; fades in once the photo has opened. */
.lb-name {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(132, 132, 132, 0.18);   /* lighter than the video titles (0.29) */
  -webkit-backdrop-filter: blur(14px) saturate(1.25) brightness(1.04);
  backdrop-filter: blur(14px) saturate(1.25) brightness(1.04);
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}
.lightbox.open .lb-name { opacity: 1; transition: opacity 0.3s ease 0.3s; }
.lightbox.cursor-prev { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M15 5 8 12l7 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 5 8 12l7 7' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, w-resize; }
.lightbox.cursor-next { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, e-resize; }

@media (prefers-reduced-motion: reduce) {
  .photo { transition: none; }
  .lb-content { transition: none !important; }
}

@media (max-width: 700px) {
  /* Phone: header + logo (150x66 at y=147) + counter (y=804) per Figma "iPhone 18 Pro - 4";
     photos scaled up to fill the space between them: 12px side margins (same as the video
     cards), 24px clear of the logo above and the counter below. */
  .stage {
    top: calc(var(--logo-top) + 66px + 24px);
    left: 12px;
    right: 12px;
    height: calc(100svh - 70px - 24px - (var(--logo-top) + 66px + 24px));
  }
  /* Fixed spot, centered between the bottom of the photo area and the bottom of the screen. */
  .pager { top: calc(100svh - 56px); }
}