/*
 * Diaspora Flows — Catalog, Track, Artist pages
 */

/* ── Track grid ────────────────────────────────────── */
.track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.track-card { border: 1px solid var(--theme-border); overflow: hidden; }
.track-card-link { text-decoration: none; display: block; }
.track-card-art { position: relative; aspect-ratio: 1; background: var(--theme-bg-2); display: flex; align-items: center; justify-content: center; }
.track-card-art-placeholder { opacity: 0.3; }
.track-card-genre { position: absolute; bottom: 0.5rem; left: 0.5rem; font-family: var(--df-font-mono); font-size: 0.68rem; color: var(--df-gold); background: var(--theme-bg); padding: 0.15rem 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; }
.track-card-body { padding: 1rem; }
.track-card-title { font-family: var(--df-font-sans); font-size: 0.88rem; font-weight: 700; color: var(--theme-text); margin-bottom: 0.25rem; }
.track-card-artist { font-size: 0.82rem; color: var(--theme-text-mid); }
.track-card-fb { font-family: var(--df-font-mono); font-size: 0.68rem; color: var(--df-gold); margin-top: 0.5rem; letter-spacing: 0.06em; }

/* ── Catalog page ──────────────────────────────────── */
.catalog-page { max-width: 1100px; margin: 0 auto; padding: 2rem 2rem 6rem; }
.catalog-header { margin-bottom: 2rem; }
.catalog-title { font-family: var(--df-font-serif); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; color: var(--theme-text); line-height: 1.05; }
.catalog-title em { font-style: italic; color: var(--df-gold); }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.genre-filter { font-family: var(--df-font-mono); font-size: 0.72rem; padding: 0.35rem 0.8rem; color: var(--theme-text-mid); background: transparent; border: 1px solid var(--theme-border); text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; transition: border-color 0.2s, color 0.2s; }
.genre-filter:hover, .genre-filter.active { color: var(--df-gold); border-color: var(--df-gold); }
.catalog-search { margin-bottom: 2rem; }
.catalog-search-input { width: 100%; max-width: 400px; padding: 0.65rem 1rem; font-family: var(--df-font-body); font-size: 0.88rem; background: var(--theme-bg-2); border: 1px solid var(--theme-border); color: var(--theme-text); }
.catalog-empty { padding: 3rem 0; color: var(--theme-text-mid); }

/* ── Track page ────────────────────────────────────── */
.track-page { max-width: 900px; margin: 0 auto; padding: 2rem 2rem 6rem; }
.track-hero { display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.track-artwork-placeholder { width: 100%; aspect-ratio: 1; background: var(--theme-bg-2); display: flex; align-items: center; justify-content: center; }
.track-title { font-family: var(--df-font-serif); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 300; color: var(--theme-text); margin-bottom: 0.5rem; }
.track-artist-link { font-size: 1rem; color: var(--df-gold); text-decoration: none; }
.track-artist-link:hover { text-decoration: underline; }
.track-meta { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.track-meta-label { font-family: var(--df-font-mono); font-size: 0.68rem; color: var(--theme-text-low); letter-spacing: 0.1em; text-transform: uppercase; }
.track-meta-value { font-family: var(--df-font-mono); font-size: 0.78rem; color: var(--theme-text); }
.track-player-mount { margin: 1.5rem 0; padding: 2rem; background: var(--theme-bg-2); border: 1px dashed var(--theme-border); text-align: center; }
.track-player-placeholder-text { font-family: var(--df-font-mono); font-size: 0.75rem; color: var(--theme-text-low); }
.genre-pill { font-family: var(--df-font-mono); font-size: 0.68rem; color: var(--df-gold); background: var(--df-gold-pale); padding: 0.2rem 0.6rem; text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }
.track-reactions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.reaction-pill { display: flex; align-items: center; gap: 0.3rem; font-family: var(--df-font-mono); font-size: 0.72rem; color: var(--theme-text-mid); background: var(--theme-bg-2); padding: 0.3rem 0.6rem; }
.track-ip-proof { display: flex; gap: 1rem; padding: 1.5rem; background: var(--theme-bg-2); border-left: 2px solid var(--df-gold); margin-bottom: 2rem; }
.ip-proof-label { font-family: var(--df-font-mono); font-size: 0.72rem; color: var(--df-gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; }
.ip-proof-id { font-family: var(--df-font-mono); font-size: 0.72rem; color: var(--theme-text); word-break: break-all; }
.ip-proof-date { font-family: var(--df-font-mono); font-size: 0.68rem; color: var(--theme-text-low); margin-top: 0.25rem; }
.credits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.credit-item { padding: 1rem; background: var(--theme-bg-2); border-left: 2px solid var(--df-gold); }
.credit-role { font-family: var(--df-font-mono); font-size: 0.68rem; color: var(--df-gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; }
.credit-name { font-size: 0.88rem; color: var(--theme-text); }
.credit-share { font-family: var(--df-font-mono); font-size: 0.78rem; color: var(--theme-text-mid); margin-top: 0.25rem; }
.first-believers-list { margin-top: 1rem; }
.first-believer-item { display: flex; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--theme-border-s); }
.fb-position { font-family: var(--df-font-mono); font-size: 0.72rem; color: var(--df-gold); font-weight: 500; }
.fb-name { font-size: 0.88rem; color: var(--theme-text); }
.fb-date { font-family: var(--df-font-mono); font-size: 0.68rem; color: var(--theme-text-low); margin-left: auto; }
.first-believers-open { font-family: var(--df-font-mono); font-size: 0.72rem; color: var(--df-gold); margin-top: 1rem; }
.fb-open-count { font-weight: 700; }
.first-believers-empty { color: var(--theme-text-mid); font-style: italic; }

/* ── Artist page ───────────────────────────────────── */
.artist-page { max-width: 1000px; margin: 0 auto; padding: 2rem 2rem 6rem; }
.artist-name { font-family: var(--df-font-serif); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 300; font-style: italic; color: var(--theme-text); margin-bottom: 0.5rem; }
.artist-sonic-desc { font-size: 0.95rem; color: var(--theme-text-mid); line-height: 1.7; margin-bottom: 1rem; }
.artist-meta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2rem; }
.artist-meta-pill { font-family: var(--df-font-mono); font-size: 0.72rem; color: var(--theme-text-mid); background: var(--theme-bg-2); padding: 0.3rem 0.75rem; letter-spacing: 0.06em; }
.artist-tracks-empty { padding: 3rem 0; color: var(--theme-text-mid); }

/* ── Section label (shared) ────────────────────────── */
.section-label { font-family: var(--df-font-mono); font-size: 0.72rem; color: var(--df-gold); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.5rem; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .track-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .track-hero-art { max-width: 300px; }
  .catalog-page, .track-page, .artist-page { padding: 1.5rem 1.5rem 4rem; }
  .credits-grid { grid-template-columns: 1fr; }
}