/* A wall of stills (_includes/sketchbook-wall.html): tiles edge to edge, with
   one line of words below. The variables are these defaults unless the page
   sets its own: a `wall:` line in its front matter. */

.wall-page {
  --wall-cols-xl: 12;
  --wall-cols-lg: 8;
  --wall-cols-md: 6;
  --wall-cols-sm: 4;
  --wall-gap: 0px;
  --wall-margin: 12px;
  --cols: var(--wall-cols-sm);
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
  padding: 0 var(--wall-margin) 12px;
}

/* The nav only leaves the page's flow at this width, and needs clearing: its
   own height, then the same margin as the sides, so a margin of 0 sits the
   wall flush under the nav. */
@media (min-width: 1024px) {
  .wall-page {
    margin-top: calc(55px + var(--wall-margin));
  }
}

.wall-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  margin-top: 12px;
  color: #111;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
}

.wall-head h1 {
  margin: 0;
  font: inherit;
  font-weight: 600;
}

.wall-head p {
  margin: 0;
  color: #6f6f6f;
}

.wall {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--wall-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .wall-page {
    --cols: var(--wall-cols-md);
  }
}

@media (min-width: 900px) {
  .wall-page {
    --cols: var(--wall-cols-lg);
  }
}

@media (min-width: 1400px) {
  .wall-page {
    --cols: var(--wall-cols-xl);
  }
}

.wall-tile,
.wall img {
  display: block;
}

.wall-tile {
  position: relative;
}

/* Black and white. On the tile, so the still and the flipbook over it change
   together. A page with `reveal_colour: true` shows a tile's colour when it's
   pointed at, but only where there's a pointer: a touch screen has no hover, so
   there the tiles stay in colour, or the colour would never show. */
.wall-tile {
  filter: grayscale(1);
}

@media (hover: hover) {
  .wall-reveal .wall-tile {
    transition: filter 0.2s ease;
  }

  .wall-reveal .wall-tile:hover,
  .wall-reveal .wall-tile:focus-visible {
    filter: none;
  }
}

@media (hover: none) {
  .wall-reveal .wall-tile {
    filter: none;
  }
}

.wall canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wall img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #111;
}

/* The layout tuner, on localhost only (wall-tune.js). */

.wall-tune,
.wall-tune-toggle {
  position: fixed;
  z-index: 2000;
  right: 12px;
  color: #111;
  font: 12px/1.4 var(--font-sans);
}

.wall-tune-toggle {
  bottom: 12px;
  padding: 4px 10px;
  border: 1px solid #111;
  background: #fff;
}

.wall-tune {
  bottom: 44px;
  width: 19rem;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #111;
  background: #fff;
}

.wall-tune[hidden] {
  display: none;
}

.wall-tune label {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 8px;
}

.wall-tune output {
  text-align: right;
}

.wall-tune-readout {
  margin: 8px 0 0;
  color: #6f6f6f;
}

.wall-tune-readout:empty {
  display: none;
}

.wall-tune-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.wall-tune-buttons button {
  padding: 3px 8px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font: inherit;
}

/* Arranging tiles (wall-tune.js). */

.wall-arranging li {
  position: relative;
  touch-action: none;
  user-select: none;
}

.wall-arranging li img {
  -webkit-user-drag: none;
}

.wall-touching::after,
.wall-target::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px #e0003c;
}

.wall-target::after {
  box-shadow: inset 0 0 0 4px #111, inset 0 0 0 6px #fff;
}

.wall-held {
  opacity: 0.4;
}