/* THE HOLD — mosaic gallery
 *
 * Kept out of style.css: this is the only page that uses it, and the shared
 * sheet is already 39KB serving nine pages.
 */

/* ── mosaic ────────────────────────────────────────────
 * Grid, not CSS columns. Columns were simpler — masonry with no JS at all — but
 * they fill top-to-bottom within each column, so item 2 lands halfway down the
 * page and the top row shows four unrelated dates side by side. Once the
 * gallery is ordered by capture date that reads as no order at all, and every
 * appended page re-balances the columns and shifts everything.
 *
 * A grid keeps reading order left-to-right, matching the API order. Each tile
 * spans however many 4px rows its aspect ratio needs (set by hold.js from the
 * dimensions the API reports), which keeps the ragged mosaic look.
 */
.hold-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 4px;          /* fine unit; tiles span a computed number */
  gap: 14px;
  margin-top: 8px;
  align-items: start;
}
@media (max-width: 1500px) { .hold-mosaic { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .hold-mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .hold-mosaic { grid-template-columns: 1fr; } }

.hold-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-panel);
  cursor: pointer;
  grid-row-end: span 40;        /* provisional; hold.js sets the real span */
  transition: border-color .18s, transform .18s;
}
.hold-tile:hover,
.hold-tile:focus-visible,
.hold-tile.tv-focus {
  border-color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}

/* The tile reserves its aspect ratio from the width/height the API reports, so
 * the mosaic doesn't reflow under you as images stream in while you scroll. */
.hold-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* the tile owns the box; fill it, don't letterbox */
  background: #0b0b10;
}

.hold-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 10px 8px;
  font-size: 11px;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}
.hold-tile:hover .hold-cap,
.hold-tile:focus-visible .hold-cap,
.hold-tile.tv-focus .hold-cap { opacity: 1; }

/* ── discreet mode ─────────────────────────────────────
 * Carried over from the Archive page. Blur until you actually look at it.
 * :focus-within and .tv-focus matter as much as :hover — on a TV remote there
 * is no hover, so without them discreet mode would be a permanent blur.
 */
.hold-mosaic.discreet .hold-tile img { filter: blur(18px); transition: filter .22s; }
.hold-mosaic.discreet .hold-tile:hover img,
.hold-mosaic.discreet .hold-tile:focus-visible img,
.hold-mosaic.discreet .hold-tile.tv-focus img { filter: none; }

/* ── streaming states ──────────────────────────────────*/
.hold-status {
  padding: 28px 0 60px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.hold-status.err { color: var(--accent); }
.hold-sentinel { height: 4px; }

.hold-count {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--fg-faint);
}

/* ── lightbox ──────────────────────────────────────────*/
.hold-box[hidden] { display: none; }
.hold-box {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 8, .95);
}
.hold-box img {
  max-width: 94vw;
  max-height: 88vh;
  object-fit: contain;
  border: 1px solid var(--border);
}
.hold-box-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 18px;
  align-items: baseline;
  justify-content: center;
  padding: 14px 20px 20px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--fg-dim);
  background: linear-gradient(transparent, rgba(0,0,0,.9));
}
.hold-box-bar strong { color: var(--fg); font-weight: 700; }
.hold-box-close {
  position: absolute;
  top: 14px; right: 18px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font-size: 18px;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
}
.hold-box-close:hover, .hold-box-close:focus-visible { border-color: var(--accent); outline: none; }