/* album.css — the album page: sidebar of categories, square grid beside it.
   Tokens come from site.css; nothing here redefines a colour. */

.alb-wrap { max-width: 1080px; margin: 0 auto; padding: 26px 20px 40px; }

.alb-head h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.015em; }
.alb-sub { margin: 0 0 24px; color: var(--ink-soft); font-size: 14px; }

/* Sidebar then content. `align-items: start` is load-bearing: without it the nav
   stretches to the height of the grid and its hover targets run the full page. */
.alb-grid-outer {
  display: grid; grid-template-columns: 178px minmax(0, 1fr);
  gap: 28px; align-items: start;
}

.alb-side { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 14px; }
.alb-side a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-radius: var(--radius);
  color: var(--ink-soft); text-decoration: none; font-size: 13.5px;
  border: 1px solid transparent;
}
.alb-side a:hover { background: var(--surface); color: var(--ink); }
.alb-side a[aria-current="page"] {
  background: var(--surface); color: var(--ink);
  border-color: var(--line); font-weight: 600;
}
/* The count is information, not decoration — keep it legible but quiet. */
.alb-side i {
  font-style: normal; font-family: var(--mono); font-size: 11px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

.alb-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.alb-card { margin: 0; }

/* Every piece of content the builder makes is square, so the box is square and nothing
   letterboxes. A clip that is not square would be contained rather than cropped —
   better a border than a beheaded avatar. */
.alb-media {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #000; display: grid; place-items: center;
}
.alb-media img, .alb-media video {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.alb-media-still { background: var(--surface); }

.alb-play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink); background: rgba(12, 14, 16, .62);
  border: 1px solid rgba(255, 255, 255, .26);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.alb-play svg { margin-left: 3px; }        /* optical centring — a triangle is left-heavy */
.alb-media:hover .alb-play { background: rgba(12, 14, 16, .78); }
.alb-play:hover { color: var(--accent); border-color: var(--accent); }

.alb-card figcaption {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 2px 0;
}
.alb-title { font-size: 13.5px; color: var(--ink); line-height: 1.35; }
.alb-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11.5px; font-family: var(--mono); color: var(--muted);
}
.alb-meta a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.alb-meta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Sits in a row of links and should read as one of them, so the button styling is
   stripped back rather than added to — same size, same colour, same hover. */
.alb-copy {
  font: inherit; color: var(--muted); cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 0; line-height: inherit;
}
.alb-copy:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* Confirmation has to survive the width change without shifting the row, so the label
   is swapped in place and the colour carries the meaning. */
.alb-copy.is-done { color: var(--accent); border-bottom-color: transparent; }

/* Shown only when both copy routes are refused, so the code can be selected by hand.
   Sized to the row it replaces so the caption does not jump. */
.alb-code {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 1px 5px; max-width: 100%; width: 15ch;
}

.alb-empty { color: var(--muted); font-size: 14px; padding: 8px 0 40px; }

@media (max-width: 760px) {
  /* Below this the sidebar costs more width than it earns, so it becomes a scrollable
     row above the grid and stops being sticky — a pinned bar plus a pinned header eats
     most of a phone screen. */
  .alb-grid-outer { grid-template-columns: 1fr; gap: 16px; }
  .alb-side {
    position: static; flex-direction: row; gap: 6px;
    overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px;
  }
  .alb-side a { flex: 0 0 auto; }
  .alb-side i { display: none; }
  .alb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}