/* Project screenshots open at full size without changing the story's scroll position. */
.project-image-trigger {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #eef8fb;
  cursor: zoom-in;
}

.project-image-trigger img { display: block; }
.phone-shell > .project-image-trigger { height: 100%; border-radius: inherit; }
.project-image-expand {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(190, 229, 236, .4);
  border-radius: 7px;
  background: rgba(5, 18, 25, .9);
  color: #eafafa;
  font: 500 11px / 1.2 var(--font-body);
  pointer-events: none;
}
.project-image-expand svg { width: 15px; height: 15px; }
.phone-shell .project-image-expand span { display: none; }
.phone-shell .project-image-expand { right: 5px; bottom: 8px; padding: 4px; }
.project-image-trigger:hover .project-image-expand { border-color: #48e0ba; color: #8bf4d8; }
.project-image-trigger:focus-visible { outline: 2px solid #48e0ba; outline-offset: 3px; }
.manatee-dialog .project-image-trigger:focus-visible { outline-color: #1d1a07; }

/* Keep the existing merchandise grid when each image becomes a button. */
.manatee-gallery-preview > .project-image-trigger:first-child { grid-row: span 2; }
.manatee-gallery-preview > .project-image-trigger { height: 100%; }
.manatee-gallery-preview > .project-image-trigger:not(:first-child) img {
  grid-row: auto;
  padding: 0;
  background: linear-gradient(135deg, rgba(255, 247, 204, .68), rgba(252, 209, 22, .2)), rgba(255, 247, 204, .36);
}

.project-image-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #071016;
  color: #eef8fb;
  font-family: var(--font-body);
  overflow: hidden;
}
.project-image-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.project-image-viewer::backdrop { background: rgba(2, 7, 11, .94); }
.project-image-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid #21363f;
}
.project-image-viewer-header strong { font-size: 16px; line-height: 1.3; }
.project-image-viewer button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #38515d;
  border-radius: 10px;
  background: #13252e;
  color: #eef8fb;
  font: 600 14px / 1.2 var(--font-body);
  cursor: pointer;
}
.project-image-viewer .project-image-viewer-close { flex: 0 0 44px; font: 300 28px / 1 var(--font-body); }
.project-image-viewer button:hover { background: #1e4147; border-color: #48e0ba; }
.project-image-viewer button:focus-visible,
.project-image-viewport:focus-visible { outline: 2px solid #71edcb; outline-offset: -3px; }
.project-image-viewer button:disabled { opacity: .3; cursor: default; }
.project-image-viewport {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4c8c8d #0b1b23;
}
.project-image-canvas { display: grid; place-items: center; min-width: 100%; min-height: 100%; }
.project-image-canvas img { max-width: none; max-height: none; object-fit: contain; user-select: none; }
.project-image-viewer.is-zoomed .project-image-viewport { cursor: grab; }
.project-image-viewer.is-zoomed .project-image-viewport.is-dragging { cursor: grabbing; }
.project-image-viewer-footer {
  padding: 10px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-top: 1px solid #21363f;
}
.project-image-viewer-tools { display: flex; align-items: center; gap: 8px; max-width: 720px; margin-inline: auto; }
.project-image-count { min-width: 40px; text-align: center; font-size: 13px; color: #bcd4de; font-variant-numeric: tabular-nums; }
.project-image-viewer .project-image-zoom { margin-left: auto; min-width: 100px; border-color: #398d7c; color: #90f0d5; }
.project-image-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 720px;
  margin: 8px auto 0;
  color: #b4ccd6;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .manatee-gallery-preview > .project-image-trigger:first-child { grid-row: auto; }
}
@media (max-width: 380px) {
  .project-image-viewer-header, .project-image-viewer-footer { padding-inline: 10px; }
  .project-image-viewer-tools { gap: 5px; }
  .project-image-viewer-header strong { font-size: 14px; }
}