/* ==========================================================
   PAGINA BRANO PUBBLICA — /records/<slug>/
   ==========================================================
   Da non confondere con css/landing.css, che veste le landing
   pubblicitarie nella root: quelle sono una schermata sola, senza
   navigazione, fatte per il tap. Questa e' una pagina del sito, e si
   comporta come le altre (stessa navbar, stesso fondo, stesse insegne).

   Il colore dell'artista arriva da --record-clr, iniettato da
   js/record-template.js. Base tipografica e navbar stanno in
   css/pishkey.css: qui solo cio' che e' specifico del brano.
   ========================================================== */

.record-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9rem 2rem 4rem;
  position: relative;
}

/* Lo stesso bagliore dietro la cover delle landing: il brano si riconosce
   dal colore del suo mondo prima ancora di leggerne il nome. */
.record-hero::before {
  content: '';
  position: absolute;
  top: 18%; left: 50%;
  width: min(560px, 80vw);
  aspect-ratio: 1;
  transform: translate(-50%, -20%);
  background: radial-gradient(circle, var(--record-clr, var(--accent)) 0%, transparent 65%);
  opacity: 0.28;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.record-hero > * { position: relative; z-index: 1; }

.record-cover {
  width: 280px; height: 280px;
  max-width: 70vw;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
  margin-bottom: 2.5rem;
}

.record-kicker {
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 1rem;
}

.record-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.12;
  max-width: 900px;
}

.record-ribbon { margin-top: 1.5rem; }

.record-date {
  margin-top: 1.25rem;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.45;
}

/* ── Player ────────────────────────────────────────────── */
/* L'embed Spotify: si ascolta senza uscire dal sito, invece del solo
   bottone che rimanda fuori. */
.record-player {
  width: 100%;
  max-width: 680px;
  margin-top: 3rem;
}
.record-player iframe {
  display: block;
  border-radius: 12px;
}

/* ── Negozi ────────────────────────────────────────────── */
.record-stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 3rem;
}

.record-store {
  font-family: var(--font-head);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.record-store:hover {
  transform: translateY(-2px);
  border-color: var(--record-clr, var(--accent));
  color: var(--record-clr, var(--accent));
}

/* Spotify resta il bottone principale: e' li' che finisce la maggior
   parte degli ascolti, e la gerarchia deve dirlo. */
.record-store.is-spotify {
  background: var(--record-clr, var(--accent));
  border-color: var(--record-clr, var(--accent));
  color: #0d0a12;
  font-weight: 700;
}
.record-store.is-spotify:hover {
  color: #0d0a12;
  filter: brightness(1.1);
}

/* ── Corpo ─────────────────────────────────────────────── */
.record-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 2rem 6rem;
}

.record-h2 {
  font-family: var(--font-head);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--record-clr, var(--accent));
  margin-bottom: 2rem;
  text-align: center;
}

.record-prose p {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.9;
  opacity: 0.78;
  margin-bottom: 1.5rem;
}

.record-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--record-clr, var(--accent));
  opacity: 0.85;
  transition: opacity 0.3s;
}
.record-more:hover { opacity: 1; }

/* ── Le porte verso il resto del parco ─────────────────── */
/* Il punto di tutta la pagina: da un brano si continua a girare per il
   sito (l'Archive, il mondo dell'artista) invece di uscirne. */
.record-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 5rem;
}

.record-link-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 1.75rem;
  background: var(--bg-shadow);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.record-link-card:hover {
  transform: translateY(-4px);
  border-color: var(--record-clr, var(--accent));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.record-link-kicker {
  font-family: var(--font-head);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--record-clr, var(--accent));
  opacity: 0.9;
}

.record-link-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.record-link-note {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.5;
}

/* ── Altri brani dello stesso mondo ───────────────────────── */
.record-related { margin-top: 5rem; }

.record-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
}

.record-related-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
  transition: transform 0.3s;
}
.record-related-card:hover { transform: translateY(-4px); }

.record-related-cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.record-related-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0.85;
}

.record-back {
  margin-top: 4rem;
  text-align: center;
}
.record-back a {
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.45;
  transition: opacity 0.3s, color 0.3s;
}
.record-back a:hover { opacity: 1; color: var(--record-clr, var(--accent)); }

@media (max-width: 620px) {
  .record-hero { min-height: auto; padding: 8rem 1.5rem 3rem; }
  .record-cover { width: 220px; height: 220px; margin-bottom: 2rem; }
  .record-player { max-width: 100%; }
  .record-stores { flex-direction: column; align-items: stretch; }
  .record-store { text-align: center; }
  .record-body { padding: 1rem 1.5rem 4rem; }
}