/* ── Wall grid ─────────────────────────────────────────────── */
#wall {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
  align-items: stretch;
}

#wall.mosaic {
  grid-auto-flow: dense;
  /* row height = poster height + card-meta height (~44px) */
  grid-auto-rows: calc((100vw - 40px - (var(--cols) - 1) * var(--gap)) / var(--cols) * 1.5 + 44px);
}
#wall.mosaic .card { overflow: hidden; }
#wall.mosaic .card.mosaic-lg { grid-column: span 2; grid-row: span 2; }
#wall.mosaic .card.mosaic-lg .poster-wrap { flex: 1; aspect-ratio: unset; }
#wall.mosaic .card.mosaic-md { grid-column: span 2; }

/* hint lives outside #wall — block element below the grid */
#mosaic-hint {
  padding: 16px 0 0;
  font-size: 0.5625rem;
  color: var(--fg-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

#wall.masonry {
  display: block;
  columns: var(--cols);
  column-gap: var(--gap);
}

@supports (grid-template-rows: masonry) {
  #wall.masonry {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: masonry;
    columns: unset;
  }
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  cursor: pointer;
  animation: card-in 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 0.03s);
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Skip rendering off-screen cards. The intrinsic size keeps scroll
     length stable and prevents scrollbar jumps on long archives. */
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

#wall.masonry .card {
  break-inside: avoid;
  margin-bottom: var(--gap);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Poster ────────────────────────────────────────────────── */
.poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.poster-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.card:hover .poster-wrap img {
  transform: scale(1.03);
}

/* ── Poster overlay (shown on hover) ──────────────────────── */
.poster-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 12px;
  pointer-events: none;
}

.card:hover .poster-overlay { opacity: 1; }

/* ── Meta overlay modes ────────────────────────────────────── */
/* card-meta hidden by default; only shown in below mode */
#wall .card:not(.card-add) .card-meta      { display: none; }
#wall.meta-below .card:not(.card-add) .card-meta { display: block; }

/* overlay: always-on or hover (default) */
#wall.meta-always .poster-overlay          { opacity: 1; }

/* below + hidden: no overlay ever */
#wall.meta-below  .poster-overlay,
#wall.meta-hidden .poster-overlay          { display: none; }
#wall.meta-below  .card:hover .poster-overlay,
#wall.meta-hidden .card:hover .poster-overlay { display: none; }

.overlay-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: uppercase;
}

.overlay-meta {
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* ── Placeholder when no image ─────────────────────────────── */
.poster-placeholder {
  width: 100%;
  height: 100%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-tertiary);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Card metadata below poster ────────────────────────────── */
.card-meta {
  padding: 8px 2px 4px;
}

.card-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-sub {
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--fg-tertiary);
  letter-spacing: 0.04em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Add card ──────────────────────────────────────────────── */
.card-add .poster-wrap {
  aspect-ratio: 2 / 3;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.card-add:hover .poster-wrap {
  background: var(--bg-secondary);
}

.add-icon {
  font-size: 1.75rem;
  font-weight: 200;
  color: var(--fg-tertiary);
  line-height: 1;
  transition: color 0.2s;
}

.card-add:hover .add-icon { color: var(--fg); }

/* ── Group headers ─────────────────────────────────────────── */
.wall-group-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 0 10px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.wall-group-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.wall-group-header:first-child {
  padding-top: 8px;
}

/* ── Empty state ───────────────────────────────────────────── */
#empty-state {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
}

#empty-state p {
  font-size: 0.8125rem;
  color: var(--fg-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  #wall.mosaic .card.mosaic-md {
    grid-column: span 1;
    grid-row: span 1;
  }
}