/* Figma 989-3299: shared photo intro, single-image / four-column views.
   The left navigation deliberately keeps the site's existing shared layout. */
#photo-page[hidden], .photo-stage[hidden] { display: none; }
.photo-page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 20px;
  height: calc(100dvh - 2 * var(--page-padding));
  min-height: 0;
}
.photo-header {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc((100% - 20px) / 2);
  z-index: 1;
}
.photo-intro { margin: 0; }
.photo-view-switch { display: flex; gap: 4px; margin-top: 20px; width: max-content; }
.photo-view-switch button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  color: var(--muted);
  transition: color 180ms ease;
}
.photo-view-switch svg { width: 16px; height: 16px; fill: currentColor; }
.photo-view-switch button[aria-pressed="true"],
.photo-view-switch button:hover,
.photo-view-switch button:focus-visible { color: var(--ink); }
.photo-view-switch button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.photo-stage {
  position: relative;
  display: grid;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  outline-offset: -2px;
  touch-action: pan-y pinch-zoom;
}
.photo-stage:focus-visible { outline: 1px solid var(--muted); }
.photo-display {
  position: absolute;
  inset-block: 0;
  width: 100%;
  max-width: 690px;
}
/* Stable, equally sized crossfade layers. Only the photograph inside a layer
   uses orientation-specific bounds; the outgoing layer never changes size. */
.photo-layer {
  --photo-display-height: 460px;
  --photo-header-gap: 48px;
  position: absolute;
  inset: 0;
  background: #fff;
}
/* Give portraits about 22% more height, bounded by the available viewport.
   Keep at least 20px below the intro; landscape and grid geometry stay intact. */
.photo-layer[data-photo-orientation="portrait"] {
  --photo-display-height: 560px;
  --photo-header-gap: 20px;
}
.photo-layer img {
  position: absolute;
  top: max(calc((100% - var(--photo-display-height)) / 2), calc(var(--photo-header-height, 132px) + var(--photo-header-gap)));
  left: 0;
  width: 100%;
  height: min(var(--photo-display-height), calc(100% - var(--photo-header-height, 132px) - var(--photo-header-gap)));
  object-fit: contain;
  user-select: none;
}
.photo-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.photo-rail::-webkit-scrollbar { display: none; }
.photo-thumbnail {
  display: block;
  position: relative;
  flex: none;
  align-self: start;
  width: 100%;
  min-height: 44px;
  line-height: 0;
}
.photo-thumbnail img { width: 100%; height: auto; }
.photo-thumbnail:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* No hover zoom, tint, captions, masonry reordering, or cropped rectangles. */
.photo-page[data-photo-view="grid"] { display: block; height: auto; }
[data-photo-view="grid"] .photo-header { position: relative; margin-bottom: 48px; }
[data-photo-view="grid"] .photo-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 8px;
  overflow: visible;
}

@media (min-width: 761px) {
  /* The scrollport reaches the viewport edges; the inset belongs to its
     scrolling content, not a permanent white mask above/below the filmstrip. */
  .photo-page[data-photo-view="single"] .photo-rail {
    margin-block: calc(-1 * var(--page-padding));
    padding-block: var(--page-padding);
    scroll-padding-block: var(--page-padding);
  }

  /* This invisible homepage header only measures the shared nav alignment.
     Do not rearrange categories or change the shared nav/footer spacing. */
  .is-photo-page .introduction[hidden] {
    display: grid;
    position: absolute;
    inset: 0 0 auto;
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 760px) {
  .photo-page {
    grid-template-columns: minmax(0, 1fr);
    /* Reserve portrait capacity for every photo so the filmstrip and document
       do not jump when switching between landscape and portrait originals. */
    grid-template-rows: auto minmax(240px, 68svh) auto;
    height: auto;
  }
  .photo-header { position: relative; width: 100%; }
  .photo-layer img {
    top: 50%;
    height: min(100%, var(--photo-display-height));
    transform: translateY(-50%);
  }
  .photo-rail {
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .photo-thumbnail { width: 64px; }
  [data-photo-view="grid"] .photo-header { margin-bottom: 32px; }
  [data-photo-view="grid"] .photo-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 8px; }
  [data-photo-view="grid"] .photo-thumbnail { width: 100%; }
}

@media (pointer: coarse) {
  .photo-view-switch button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-view-switch button { transition: none; }
}