/* =========================================
   ALBUMS PAGE
   - Wrapper + Rows + Tiles
   - 4 per row on desktop (normal)
   - Pinned row uses banner tiles
   - Labels use bottom gradient overlay
   ========================================= */

.album-page-title {
  text-align: center;
  margin: 20px 0 0 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  color: #f3f5f5;
}

/* ---------- Wrapper ---------- */
.album-list {
  padding: clamp(12px, 2vw, 28px);
  margin: 0 auto;
  max-width: 1400px;
  box-sizing: border-box;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0));
}

/* ---------- Rows (normal albums) ---------- */
.album-row {
  --tile-gap: clamp(14px, 2vw, 28px);
  display: grid;
  gap: var(--tile-gap);
  margin-bottom: 20px;

  /* Exactly 4 columns on desktop */
  grid-template-columns: repeat(4, 1fr);
}

/* Tablet: auto-fill smaller tiles */
@media (max-width: 1024px) {
  .album-row {
    --tile-w: 200px;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-w), 1fr));
  }
}

/* Phone: auto-fill even smaller tiles */
@media (max-width: 600px) {
  .album-row {
    --tile-w: 160px;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-w), 1fr));
  }
}

/* ---------- Pinned row overrides ---------- */
/* Add in JS: row.classList.add('pinned-row', `pinned-${categories.length}`) */
.pinned-row {
  /* default: auto-fit banners if not 2 or 3 */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Exactly 2 pinned -> half each */
.pinned-row.pinned-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Exactly 3 pinned -> third each */
.pinned-row.pinned-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Smaller screens: pinned row also collapses nicely */
@media (max-width: 1024px) {
  .pinned-row {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
@media (max-width: 600px) {
  .pinned-row {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* ---------- Tiles (shared) ---------- */
.album-row .album-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;           /* normal tiles are squares */
  border: 1px solid #444;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  color: #f3f5f5;
  background-color: #1f1f1f;
  text-align: left;
  user-select: none;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, filter 140ms ease;
}

.album-row .album-tile:hover {
  transform: translateY(-2px);
  border-color: #7d7d7d;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Pinned tiles become wide + thin banners */
.pinned-row .album-tile[data-category="true"] {
  aspect-ratio: 3 / 1;           /* wide and thin */
  min-height: clamp(80px, 12vw, 150px);
}

/* Background thumbnail */
.album-row .album-tile img.album-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  z-index: 1;
  pointer-events: none;
  transform: scale(1.02);        /* tiny zoom to hide seams */
  filter: contrast(0.98) saturate(0.98);
  transition: opacity 140ms ease, filter 140ms ease, transform 140ms ease;
}

/* Soft global readability gradient (subtle) */
.album-row .album-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.04) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ---------- Bottom overlay label ---------- */
.album-row .album-tile > div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;

  /* gradient only behind the text area */
  padding: 12px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
  backdrop-filter: blur(1px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Title */
.album-row .album-tile > div strong {
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1rem, 1.1vw + 0.35rem, 1.3rem);
  line-height: 1.1;
}

/* Count */
.album-row .album-tile > div span {
  font-weight: 600;
  font-size: clamp(0.82rem, 0.7vw + 0.3rem, 0.95rem);
  opacity: 0.9;
  line-height: 1.1;
}

/* Hover clarity bump */
.album-row .album-tile:hover img.album-thumb {
  filter: contrast(1) saturate(1);
  opacity: 1;
}

/* Pin badge for categories (icon optional; keep structure for future) */
.album-row .album-tile[data-category="true"]::before {
  /* content: "📌"; */
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 1.05rem;
  z-index: 3;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .album-row .album-tile,
  .album-row .album-tile img.album-thumb {
    transition: none !important;
    transform: none !important;
  }
}