/* Contenitore principale: 80% centrato */
.song-page {
  box-sizing: border-box;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;           /* spazio tra blocchi, regola a gusto */
  color:white; /* colore del testo */
}

/* Box sinistra e destra (due colonne da 50%) */
.song-box-sx,
.song-box-dx {
  box-sizing: border-box;
  flex: 1 1 calc(50% - 12px); /* 50% con gap bilanciato */
  max-width: calc(50% - 12px);
}

/* Allineamenti specifici */
.song-box-sx { text-align: left; }
.song-box-dx { text-align: right; }



/* SoundCloud: larghezza 100% */
.soundcloud {
  flex: 1 1 100%;
  max-width: 100%;
}



/* Testo canzone: due colonne 50% + 50% */
.song-text {
  box-sizing: border-box;
  flex: 1 1 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.song-text .presentation,
.song-text .lyric {
  box-sizing: border-box;
  flex: 1 1 calc(50% - 12px);
  max-width: calc(50% - 12px);
}

/* Un po’ di spacing tipografico (opzionale) */
.song-box-sx h1,
.song-box-dx h2,
.song-box-dx h3 {
  margin: 0 0 8px;
}

.song-box-sx ul {
  margin: 0;
  padding: 0;
}
.song-page h1{font-size: 24px;}
.song-page ul{color:var(--colore-base);}
/* Responsive: sotto 768px tutto in colonna */
@media (max-width: 768px) {
  .song-box-sx,
  .song-box-dx,
  .song-text .presentation,
  .song-text .lyric {
    flex: 1 1 100%;
    max-width: 100%;
    text-align: left; /* su mobile riallineo a sinistra, cambia se preferisci */
  }

  .song-page {
    gap: 16px;
  }

  .song-text {
    gap: 16px;
  }
}