/*
 * One photo at a time, inside the modal a thumbnail opens.
 *
 * The stage is bounded on both axes at once: the width is capped by the
 * viewport *and* by the height a 4:3 frame would need. Whichever cap bites
 * first, the frame stays whole — no crop from a squeezed side, no scroll to see
 * the bottom of an image.
 */

.photo-viewer__stage {
  position: relative;
  width: min(92vw, calc(88dvh * 4 / 3));
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-sunken);
}

.photo-viewer__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-viewer__step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  background: var(--on-image-ground);
  color: var(--on-image);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: opacity 0.15s;
}

.photo-viewer__step--previous {
  left: var(--space-2);
}

.photo-viewer__step--next {
  right: var(--space-2);
}

.photo-viewer__step:disabled {
  opacity: 0.3;
  cursor: default;
}

.photo-viewer__position {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--on-image-ground);
  color: var(--on-image);
}