/* Gallery: the artwork inside an open band's panel (bands.css), built by script.js. The tile, then one
   block per layout (grid, masonry, stickers, sets) and the section labels. A new layout gets its own block here */

/* Each work is a tile: a tilted paper frame that opens the lightbox */
.works { margin: 0 20px 26px; padding: 0; list-style: none; }
/* The panel clips its contents (for the slide-open), so the top padding leaves room for a hovered tile to lift and grow */
.works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; padding-top: 24px; }
.works > li { --tilt: -2deg; }
.works > li:nth-child(even) { --tilt: 2deg; }
.work-tile {
  display: block;
  width: 100%;
  padding: 6px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: zoom-in;
  transform: rotate(var(--tilt));
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s cubic-bezier(.34, 1.56, .64, 1);
}
.work-tile:focus-visible { transform: translateY(-6px) scale(1.05); box-shadow: 6px 9px 0 var(--ink); }
/* Transparent artwork shows its band's color behind it */
.work-tile img { width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 12px; background: var(--band); }
/* Grid tiles are square; a non-square piece is shown whole, on its band's color */
.works-grid .work-tile img { aspect-ratio: 1; object-fit: contain; }
/* Masonry: CSS columns, so each piece keeps its own shape; the list fills each column top to bottom */
.works-masonry { columns: 2; column-gap: 18px; padding-top: 24px; }
.works-masonry > li { padding-bottom: 20px; break-inside: avoid; }

/* A panel split into sections: each starts with a tilted label */
.works-title {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 4px 20px 0;
  padding: 6px 20px 6px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
  transform: rotate(-2deg);
}
.works-title .icon { width: 26px; }

/* Stickers: no paper frame; a white cut edge (stacked drop-shadows follow the art's own shape) and a hard ink shadow */
.works-stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; padding-top: 22px; }
.works-stickers > li { flex: 0 1 calc(50% - 7px); }
.works-stickers > li:nth-child(3n+1) { --tilt: -6deg; }
.works-stickers > li:nth-child(3n+2) { --tilt: 4deg; margin-top: 22px; }
.works-stickers > li:nth-child(3n) { --tilt: -2deg; }
.works-stickers > li:nth-child(4n) { --tilt: 7deg; }
.works-stickers .work-tile {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(3px 0 0 var(--paper)) drop-shadow(-3px 0 0 var(--paper)) drop-shadow(0 3px 0 var(--paper)) drop-shadow(0 -3px 0 var(--paper)) drop-shadow(4px 5px 0 var(--ink));
}
.works-stickers .work-tile:focus-visible { transform: translateY(-8px) rotate(0deg) scale(1.08); box-shadow: none; }
.works-stickers .work-tile img { border: 0; border-radius: 0; background: none; }
/* Between two groups of stickers (a pack subfolder, then the loose ones): an empty full-width entry, so the
   next group starts on a new row */
.works-stickers > li.works-break { flex: 0 0 100%; height: 0; margin: 0; }

/* Emoji sets: one card per pack, its emojis in a small grid like an emoji picker */
.works-sets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 22px; }
.work-set { padding: 12px 10px 14px; border: var(--line); border-radius: var(--radius); background: var(--band); box-shadow: var(--shadow-sm); transform: rotate(var(--tilt)); }
.works-sets > li { --tilt: -1.5deg; }
.works-sets > li:nth-child(even) { --tilt: 1.5deg; }
.work-set-title { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.1; text-align: center; }
.works-emojis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 8px; border: 2px solid var(--ink); border-radius: 16px; background: color-mix(in srgb, var(--paper) 55%, transparent); list-style: none; }
.works-emojis .work-tile { padding: 4px; border: 0; border-radius: 12px; background: none; box-shadow: none; transform: none; }
.works-emojis .work-tile:focus-visible { background: var(--paper); box-shadow: none; transform: scale(1.14) rotate(-4deg); }
.works-emojis .work-tile img { border: 0; border-radius: 0; background: none; }

/* Hover effects only where there's a mouse: on phones a tap would leave them stuck on */
@media (hover: hover) {
  .work-tile:hover { transform: translateY(-6px) scale(1.05); box-shadow: 6px 9px 0 var(--ink); }
  .works-stickers .work-tile:hover { transform: translateY(-8px) rotate(0deg) scale(1.08); box-shadow: none; }
  .works-emojis .work-tile:hover { background: var(--paper); box-shadow: none; transform: scale(1.14) rotate(-4deg); }
}

@media (min-width: 681px) {
  .works { margin: 0 42px 38px; }
  .works-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; }
  .works-masonry { columns: 3; column-gap: 24px; }
  .works-masonry > li { padding-bottom: 26px; }
  .works-title { margin: 6px 42px 0; font-size: 1.6rem; }
  .works-title .icon { width: 30px; }
  .works-stickers { gap: 6px 26px; }
  .works-stickers > li { flex-basis: 180px; }
  .works-sets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .works-emojis { gap: 4px; padding: 6px; }
}

@media (min-width: 901px) {
  .works-grid { gap: 26px 22px; }
  .works-stickers > li { flex-basis: 210px; }
  .works-sets { gap: 26px; }
  .work-set { padding: 14px 16px 18px; }
  .works-emojis { gap: 8px; padding: 10px; }
}