/* --- Album tiles: a cover and two lines, no box -------------------------------------------- */

.album-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-6) var(--space-5);
}
.tile-item { position: relative; min-width: 0; container-type: inline-size; }
.tile {
  display: grid;
  gap: .125rem;
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--radius-cover);
}
/* No shadow (invisible on --bg): the cover's edge (cover.css) is what holds a dark
   cover off the page. Hover and focus brighten the edge and the image a touch; no lift,
   no scale. */
.tile .cover {
  width: 100%;
  height: auto;
  margin-bottom: var(--space-3);
  transition: outline-color var(--motion-fast) var(--ease), filter var(--motion-fast) var(--ease);
}
.tile-item:hover .cover,
.tile-item:focus-within .cover { outline-color: rgba(255, 255, 255, .28); filter: brightness(1.06); }
.tile-title {
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tile-meta { color: var(--fg-muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The play button sits on the cover's lower right: 100cqw is the tile's width, which
   is the cover's height (it is square). A browser without container units keeps the
   first `top` and puts it on the upper right instead. */
.tile-play {
  position: absolute;
  top: var(--space-2);
  top: calc(100cqw - 3.25rem);
  right: var(--space-2);
  width: 2.75rem;
  height: 2.75rem;
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--motion) var(--ease), transform var(--motion) var(--ease);
}
.tile-play .icon { width: 1.25rem; height: 1.25rem; }
.icon-btn.tile-play:hover:not(:disabled) { background: var(--accent-hover); color: var(--bg); }
.tile-item:hover .tile-play,
.tile-item:focus-within .tile-play { opacity: 1; transform: none; }
/* Touch: the button is always shown, on every tile, so it is a dark glass disc, not
   brass (the brass is for the page's one primary action). It is 36px to look at and
   44px to hit, through ::after. */
@media (hover: none) {
  .tile-play,
  .icon-btn.tile-play:hover:not(:disabled) {
    top: calc(100cqw - 2.75rem);
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(12, 12, 14, .72);
    color: var(--fg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    opacity: 1;
    transform: none;
  }
  .tile-play .icon { width: 1rem; height: 1rem; }
  .tile-play::after { content: ""; position: absolute; inset: -.25rem; }
}

/* Skeletons: static blocks the size of what is coming. No shimmer: motion here would
   be decoration nobody asked for. */
.skeleton .skeleton-block { display: block; width: 100%; aspect-ratio: 1; margin-bottom: var(--space-3); }
.skeleton-line { display: block; height: .75rem; width: 80%; margin-top: var(--space-2); border-radius: var(--radius-xs); background: var(--surface-2); }
.skeleton-line.short { width: 50%; }