/* ==========================================================================
   Gallery: stage + thumbnail rail + fullscreen viewer.
   Built on Loadscreen tokens: square corners, hard steps, stepped motion.
   ========================================================================== */

.gallery { display: grid; gap: var(--space-md); }

/* ---- Stage: one large 16:9 shot with a caption bar ---- */

.gallery__stage {
  margin: 0;
  border: var(--border-control) solid var(--on-surface);
  box-shadow: 8px 8px 0 var(--olive);
  background: var(--surface);
}

.gallery__open {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--charcoal);
  cursor: zoom-in;
  overflow: hidden;
}

.gallery__open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__open img.is-swapping { animation: shot-in 160ms steps(2, end); }

@keyframes shot-in { from { opacity: 0; } to { opacity: 1; } }

/* The expand chip sits in the corner and inverts on hover. */
.gallery__hint {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--charcoal);
  color: var(--butter);
  border: var(--border-control) solid var(--butter);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  line-height: 1;
}

.gallery__hint i { font-size: 18px; }

.gallery__open:hover .gallery__hint,
.gallery__open:focus-visible .gallery__hint { background: var(--butter); color: var(--charcoal); border-color: var(--charcoal); }

.gallery__open:focus-visible { outline: 2px dashed var(--focus); outline-offset: -8px; }

.gallery__bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  border-top: var(--border-control) solid var(--on-surface);
}

.gallery__caption { margin: 0; font-weight: 500; }

.gallery__count { color: var(--muted); white-space: nowrap; }
.gallery__count b { color: var(--on-surface); font-weight: 400; }

.gallery__nav { display: flex; gap: var(--space-xs); }

/* Square step buttons for prev / next / close. */
.gbtn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: var(--border-control) solid var(--on-surface);
  background: var(--surface);
  color: var(--on-surface);
  box-shadow: 2px 2px 0 var(--on-surface);
  cursor: pointer;
  transition: transform var(--step-fast), box-shadow var(--step-fast);
}

.gbtn i { font-size: 20px; line-height: 1; }
.gbtn:hover { background: var(--on-surface); color: var(--surface); }
.gbtn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--on-surface); }
.gbtn:focus-visible { outline: 2px dashed var(--focus); outline-offset: 4px; }

/* ---- Rail: every shot as a 16:9 thumbnail ---- */

.gallery__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--n, 7) - 1) * var(--space-sm)) / var(--n, 7));
  gap: var(--space-sm);
  margin: 0;
  padding: 0 4px 8px 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.gallery__rail li { scroll-snap-align: start; }

.gallery__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border: var(--border-control) solid var(--rule);
  background: var(--charcoal);
  transition: transform var(--step-fast);
}

.gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transition: opacity var(--step-fast);
}

.gallery__thumb:hover { background: var(--charcoal); transform: translate(0, -2px); }
.gallery__thumb:hover img { opacity: 1; }

.gallery__thumb[aria-current="true"] {
  border-color: var(--on-surface);
  box-shadow: 4px 4px 0 var(--olive);
}

.gallery__thumb[aria-current="true"] img { opacity: 1; }

.gallery__thumb:focus-visible { outline: 2px dashed var(--focus); outline-offset: 3px; }

@media (max-width: 880px) {
  .gallery__rail { grid-auto-columns: 38%; }
  .gallery__bar { grid-template-columns: 1fr auto; }
  .gallery__caption { grid-column: 1 / -1; }
  .gallery__hint span { display: none; }
}

/* ==========================================================================
   Viewer: fullscreen <dialog>, charcoal ground, image at its true ratio.
   ========================================================================== */

.viewer {
  --surface: var(--charcoal);
  --on-surface: var(--butter);
  --rule: var(--rivet);
  --muted: var(--rivet);
  --focus: var(--wheat);

  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--charcoal);
  color: var(--butter);
  overflow: hidden;
}

.viewer::backdrop { background: var(--charcoal); }

.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); animation: shot-in 160ms steps(2, end); }

.viewer .boot-frame { inset: 12px; }

.viewer__top,
.viewer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
}

.viewer__title { margin: 0; }
.viewer__top .gallery__count { margin-right: auto; }

.viewer__main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  min-height: 0;
  padding: 0 var(--space-xl);
}

.viewer__figure {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  align-self: stretch;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  touch-action: pan-y;
}

.viewer__figure img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: var(--border-control) solid var(--butter);
  box-shadow: 8px 8px 0 var(--olive);
  user-select: none;
  -webkit-user-drag: none;
}

.viewer__figure img.is-loading { opacity: 0.35; }

/* Pixel blocks shown while the full-size file loads. */
.viewer__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: none;
  gap: 4px;
}

.viewer__loading i { width: 12px; height: 12px; background: var(--butter); animation: caret 960ms steps(1, end) infinite; }
.viewer__loading i:nth-child(2) { animation-delay: 320ms; }
.viewer__loading i:nth-child(3) { animation-delay: 640ms; }
.viewer.is-loading .viewer__loading { display: flex; }

.viewer .gbtn--lg { width: 56px; height: 56px; box-shadow: 4px 4px 0 var(--olive); }
.viewer .gbtn--lg i { font-size: 28px; }
.viewer .gbtn--lg:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--olive); }

.viewer__bottom { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
.viewer__caption { margin: 0; max-width: 72ch; }

.viewer .gallery__rail { grid-auto-columns: 112px; padding-bottom: 4px; }
.viewer .gallery__thumb { border-color: var(--ghost); }
.viewer .gallery__thumb[aria-current="true"] { border-color: var(--butter); }

@media (max-width: 880px) {
  .viewer__top, .viewer__bottom { padding: var(--space-sm) var(--space-md); }
  .viewer__main { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-sm); }
  .viewer__main > .gbtn { display: none; } /* swipe on touch; rail below */
  .viewer .gallery__rail { grid-auto-columns: 88px; }
}

html.viewer-open { overflow: hidden; }

@keyframes caret { 50% { opacity: 0; } }