/* The grid starts under the top bar rather than centered, and the clearance is the bar's own
   height (its items' 10px padding around a 14px line) plus the inset above and below it.
   Unlike the cropped gallery, the collection scrolls, so every tile stays reachable. */
.content-root-collection {
  --collection-bar-clearance: calc(var(--viewport-inset) * 2 + 37px);
  justify-content: flex-start;
  overflow-y: auto;
}

/* Sticky over the clearance strip, so it is invisible at rest and only covers tiles once they
   scroll up under the bar. The negative margin keeps it from pushing the grid down. */
.collection-fade {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  height: var(--collection-bar-clearance);
  margin-bottom: calc(-1 * var(--collection-bar-clearance));
  background: linear-gradient(to bottom, oklch(0.14 0.006 40) 60%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}

.collection-grid {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding-top: var(--collection-bar-clearance);
  padding-bottom: var(--viewport-inset);
}

@media (min-width: 768px) {
  .collection-grid {
    max-width: var(--viewport-width);
    margin: 0 auto;
  }
}

.collection-tile {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  overflow: hidden;
  background: oklch(0.2 0.006 40);
  font-family: inherit;
  cursor: pointer;
}

/* Cover with the default centered position is what crops the frame to its middle square. */
.collection-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.collection-tile-img.visible {
  opacity: 1;
}

/* The same plate as the video's details line, so the code reads over any frame. */
.collection-tile-code {
  position: relative;
  padding: 4px 6px;
  background: oklch(0.97 0.003 40);
  color: oklch(0 0 0);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Fixed over the middle of the column rather than in the flow, so the grid keeps its place and
   only the plus tile shows under it. It lets taps through, so the tile stays reachable. */
.collection-placeholder {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--viewport-width);
  margin: 0;
  padding: 0 clamp(24px, 7vw, 56px);
  color: oklch(0.97 0.003 40);
  font-size: clamp(28px, 7vh, 40px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 10;
}

.collection-tile-add::before,
.collection-tile-add::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32%;
  height: 4px;
  background: oklch(0.63 0.22 25);
  transform: translate(-50%, -50%);
}

.collection-tile-add::after {
  transform: translate(-50%, -50%) rotate(90deg);
}