/* gallery.css: the gallery of a project page (ProjectBlock.astro). Two or more figure blocks in a
   row stand as a grid of small figures, two to a row on a wide screen and one on a phone. Every
   figure has the same frame (16 to 10), in which the whole image stands, so the frames of a row
   line up and their captions start on one line (the owner's words of 14 November 2026). Each
   image links to a larger copy, which opens in a new tab. Imported by the project page only. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--s4) var(--s3);
  max-width: 56rem;
}
.gallery figure { min-width: 0; }
.gallery a {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-out);
  outline: var(--stroke) solid var(--rule-soft);
  outline-offset: calc(-1 * var(--stroke));
  background: var(--wash);
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (hover: hover) and (pointer: fine) {
  .gallery a { transition: outline-color var(--dur-fast) var(--ease-out); }
  .gallery a:hover { outline-color: var(--link-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery a { transition: none; }
}
.gallery figcaption {
  margin-top: var(--s2);
  color: var(--ink-2);
  font-size: var(--size-small);
  font-stretch: var(--wdth-tight);
}

/* A clip of a project page (block type "video", 2026-11-14). A wide clip stands alone like a
   plate; two or more that are not wide stand as a grid like the gallery. The poster shows until
   the reader presses play, and nothing of the video is fetched before that (preload="none"). */
.clip { max-width: 56rem; }
.clip video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-out);
  outline: var(--stroke) solid var(--rule-soft);
  outline-offset: calc(-1 * var(--stroke));
  background: var(--wash);
}
.clip figcaption {
  max-width: var(--measure);
  margin-top: var(--s2);
  color: var(--ink-2);
  font-size: var(--size-small);
  font-stretch: var(--wdth-tight);
}
.clips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--s4) var(--s3);
  max-width: 56rem;
}
.clips .clip { min-width: 0; }
/* a long address in a credit line must not widen a phone page */
.project .meta { overflow-wrap: anywhere; }