/* ============================================================================
   WORK — the grid, the Alternative Aesthetics way.

   Flat 16:9 images in three columns, mounted as restrained paper prints with
   permanent captions. Five cases plus the character archive make a deliberate
   3x2 grid.

   The tile ratio matches the artwork's native ratio, which is what killed
   the bad crops: object-fit: cover against a same-shaped frame is a trim.
   A sub-degree rotation gives each print a hand-placed cadence without asking
   the browser to blur or filter any artwork.

   The only motion is the leaf-through's opacity crossfade. Precise pointers
   drive one from hover; coarse pointers give the most visible tile a slow
   cycle and leave every other tile still.

   Every track uses minmax(0, 1fr), so long metadata can wrap without widening
   the grid at desktop, tablet or phone widths.
   ========================================================================== */

.slabs {
  --slabs-grid-gap: var(--s4);
  padding-block: var(--s5) var(--s8);
}

.slabs__title { margin-bottom: var(--s6); }

@media (max-width: 700px) {
  /* The home page already ends its hero with breathing room. A smaller mobile
     section inset keeps that space from being counted twice. */
  .slabs { padding-block: var(--s5) var(--s6); }
  .slabs__title { margin-bottom: var(--s5); }
}

.slabs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--slabs-grid-gap);
}

.slabs__tile {
  --slabs-angle: 0deg;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  padding: var(--s2) var(--s2) 0;
  overflow: visible;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: var(--lift-1);
  transform: rotate(var(--slabs-angle));
  transform-origin: 50% 55%;
  transition: transform var(--t-hover) var(--ease-out),
              border-color var(--t-micro) linear,
              box-shadow var(--t-hover) var(--ease-out);
}
.slabs__tile:nth-child(4n + 1) { --slabs-angle: -.3deg; }
.slabs__tile:nth-child(4n + 2) { --slabs-angle:  .2deg; }
.slabs__tile:nth-child(4n + 3) { --slabs-angle: -.15deg; }
.slabs__tile:nth-child(4n)     { --slabs-angle:  .35deg; }

/* ---------------------------------------------------------------------- art */
.slabs__art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  /* The bed: pre-decode beat, the archive tile's paper, and the fill behind
     any contained cover. --slabs-bg is written per tile by slabs.js when a
     cover names its own (e.g. the comic tile's brand blue). */
  background: var(--slabs-bg, var(--paper-3));
}

.slabs__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-move) var(--ease-io);
}
.slabs__img.is-on { opacity: 1; }

/* A mismatched ratio sits whole on the bed, a step smaller than the frame —
   the padding is what shrinks it; contain does the rest. */
.slabs__img--fit {
  object-fit: contain;
  box-sizing: border-box;
  padding: 6%;
}

/* ---------------------------------------------------------------- metadata */
.slabs__meta {
  display: block;
  min-height: 76px;
  padding: var(--s3) var(--s2);
}
.slabs__copy,
.slabs__name,
.slabs__discipline { display: block; }
.slabs__copy { min-width: 0; }
.slabs__name {
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: color var(--t-micro) linear;
}
.slabs__discipline {
  margin-top: var(--s1);
  color: var(--dim);
  font-size: var(--t-mono);
  line-height: var(--lh-snug);
}

@media (hover: hover) and (pointer: fine) {
  .slabs__tile:hover {
    transform: translateY(calc(var(--s1) * -1)) rotate(0deg);
    border-color: var(--line-2);
    box-shadow: var(--lift-2);
  }
  .slabs__tile:hover .slabs__name { color: var(--accent); }
}

@media (max-width: 900px) {
  .slabs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .slabs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slabs__img { transition: none; }
  .slabs__tile:hover { transform: none; }
}

/* ------------------------------------------------------------ set covers
   A grid of pieces on the bed — the characters tile and any case whose
   cover is a `set` (icons, emotes). Every set tile is the same 16:9 as an
   image tile, so the grid stays one uniform rhythm. More pieces are laid
   than fit; the frame clips the rest, which is the point — a set does not
   fit in a tile. */
.slabs__set {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--s2);
  padding: var(--s4);
  align-items: center;
  justify-items: center;
  overflow: hidden;
}
.slabs__set--library { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.slabs__set-i {
  width: 100%;
  max-width: 52px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}