/* Projects pages (/projects/ and /projects/<slug>/): the site's tokens and grid, plus the
   photo gallery and the full-screen photo viewer. Linked only from those pages. */

.projects-count { margin-block-end: calc(var(--s-4) * -1); font-size: var(--t-s); }
.projects-status { min-height: 1.5em; margin-block-start: var(--s-4); text-align: center; font-size: var(--t-s); }
.projects-follow { margin-block-start: var(--s-4); }
.project-card .tile__media img { aspect-ratio: 4 / 3; }

/* The gallery: the whole width of the page, square tiles; one photo runs wide. */
.project-photos { margin-block-end: clamp(32px, 4vw, 56px); }
.photo-gallery {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 48rem) { .photo-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 80rem) { .photo-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photo-gallery--1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .photo-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.photo-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--field);
  cursor: zoom-in;
}
.photo-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 700ms var(--ease), opacity 200ms var(--ease);
}
.photo-gallery--1 .photo-gallery__item img { aspect-ratio: auto; max-height: 720px; object-fit: contain; }
.photo-gallery--2 .photo-gallery__item img { aspect-ratio: 4 / 3; }
.photo-gallery__item:hover img { transform: scale(1.03); }
.photo-gallery__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Previous / next project. */
.project-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-6) var(--row-y);
  border-top: 1px solid var(--rule);
}
.project-pager__link { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-weight: 500; line-height: var(--lh-s); }
.project-pager__link span:last-child { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.project-pager__link .muted { font-size: var(--t-s); font-weight: 400; }
.project-pager__link:hover span:last-child { color: var(--accent-ink); }
.project-pager__link--next { text-align: right; }
@media (max-width: 40rem) {
  .project-pager { grid-template-columns: 1fr 1fr; }
  .project-pager__all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
.project-source { margin-block-start: var(--s-6); font-size: var(--t-s); }

/* The photo viewer. */
.photo-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(10 10 12 / 0.96);
  color: #fff;
}
.photo-viewer::backdrop { background: rgb(10 10 12 / 0.96); }
.photo-viewer__figure {
  position: absolute;
  inset: 56px 64px 64px;
  display: grid;
  place-items: center;
  margin: 0;
}
.photo-viewer__figure img {
  width: auto;
  height: auto;
  max-width: calc(100vw - 128px);
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
}
.photo-viewer__count {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  text-align: center;
  font-size: var(--t-s);
  color: rgb(255 255 255 / 0.7);
  font-variant-numeric: tabular-nums;
}
.photo-viewer__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.photo-viewer__btn:hover { background: rgb(255 255 255 / 0.22); }
.photo-viewer__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.photo-viewer__btn--close { top: 10px; right: 12px; }
.photo-viewer__btn--prev { left: 12px; top: 50%; transform: translateY(-50%); }
.photo-viewer__btn--next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 40rem) {
  .photo-viewer__figure { inset: 56px 8px 72px; }
  .photo-viewer__figure img { max-width: calc(100vw - 16px); max-height: calc(100dvh - 128px); }
  .photo-viewer__btn--prev, .photo-viewer__btn--next { top: auto; bottom: 10px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-gallery__item img { transition: none; }
}