/* artwork.css: the Artwork page (pages/artwork.astro, components/ArtworkGrid.astro). Tokens only.

   The page stands on rules that exist already. The four links to its parts are the rail of the
   Publications page (.pin, .year-rail), each part has the heading of a year (.years, .year-head:
   the name of the part and a line to the right edge), and the pop-up viewer is the shared viewer
   (viewer.css, which the component imports before this file). New here are the
   grid of pictures, the grid of videos and the line of an empty part.

   A picture stands whole in a frame of one shape, so the frames of a row line up (the owner's words
   of 14 November 2026 on the gallery of a project). The shape is 4 to 5, the shape of his
   photographs; a part of artwork.json may name another one ("frame"). */

/* ---------------------------------------------------------------
   The grid of pictures: two to a row on a phone, three in the
   content column of a wide screen, four on a very wide one
   --------------------------------------------------------------- */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, calc(50% - var(--s3))), 1fr));
  gap: var(--s3);
}
.art-grid.has-captions { row-gap: var(--s4); }
.art-grid > li { min-width: 0; }
.art-card { display: block; text-decoration-line: none; overflow-wrap: break-word; }
.art-frame {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-in);
  outline: var(--stroke) solid var(--rule-soft);
  outline-offset: calc(-1 * var(--stroke));
  background: var(--wash);
}
.art-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.art-grid[data-frame="1:1"] .art-frame { aspect-ratio: 1 / 1; }
.art-grid[data-frame="5:4"] .art-frame { aspect-ratio: 5 / 4; }
.art-grid[data-frame="4:3"] .art-frame { aspect-ratio: 4 / 3; }
.art-grid[data-frame="3:2"] .art-frame { aspect-ratio: 3 / 2; }
.art-grid[data-frame="16:9"] .art-frame { aspect-ratio: 16 / 9; }
.art-grid[data-frame="3:4"] .art-frame { aspect-ratio: 3 / 4; }
.art-grid[data-frame="2:3"] .art-frame { aspect-ratio: 2 / 3; }
.art-card .meta { display: block; margin-top: var(--s1); }

/* ---------------------------------------------------------------
   The grid of videos: one to a row on a phone, so that the controls
   of the browser have room; a video that is wider than high takes
   two columns once there are two
   --------------------------------------------------------------- */
.art-grid.is-video {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--s4) var(--s3);
  align-items: start;
}
@media (min-width: 40rem) {
  .art-grid.is-video > .is-wide { grid-column: span 2; }
}
.art-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-in);
  outline: var(--stroke) solid var(--rule-soft);
  outline-offset: calc(-1 * var(--stroke));
  background: var(--wash);
}
/* The play button lies over the poster until the video has started; then the controls of the
   browser take over. It leaves the lowest 4rem free, so that a click on the control bar of the
   browser (mute, full screen) reaches the bar (2026-11-14, the check of the preview). artwork.js
   shows it (it is hidden in the HTML), so without the script the controls of the browser are the
   only way to start, and they are enough. */
.art-stage { position: relative; }
.art-play {
  position: absolute;
  inset: 0 0 4rem 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-in);
  background: none;
  cursor: pointer;
}
.art-play[hidden] { display: none; }
.art-play-mark {
  display: grid;
  place-items: center;
  width: calc(var(--hit) * 1.25);
  height: calc(var(--hit) * 1.25);
  border: var(--stroke) solid var(--on-scrim-2);
  border-radius: var(--radius-out);
  background: var(--scrim-solid);
  color: var(--on-scrim);
}
.art-play-mark svg { fill: currentColor; }
.art-video figcaption { margin-top: var(--s2); }
.art-video .card-title { margin-top: 0; text-decoration-line: none; }
.art-video .meta { display: block; font-variant-numeric: tabular-nums; }
.art-video .card-title + .meta { margin-top: var(--s1); }

/* a part with no work yet: its one line */
.art-empty { max-width: var(--measure); color: var(--ink-2); }

/* the viewer of the certificates, with lines that may be empty and a set of one picture */
.viewer-title[hidden],
.viewer-line[hidden],
.viewer-btn[hidden] { display: none; }

/* hover changes colour only */
@media (hover: hover) and (pointer: fine) {
  .art-frame { transition: outline-color var(--dur-fast) var(--ease-out); }
  a.art-card:hover .art-frame { outline-color: var(--link-hover); }
  a.art-card:hover .card-title { text-decoration-color: var(--link-hover); }
  .art-play-mark { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
  .art-play:hover .art-play-mark { background-color: var(--on-scrim); color: var(--scrim-solid); }
}
@media (prefers-reduced-motion: reduce) {
  .art-frame,
  .art-play-mark { transition: none; }
}