/* ============================================================
   Groov-illa · ascolto.css — prova di ascolto nella tracklist
   Caricato solo dalle recensioni con `ascolto: true` e, dal 30/10/2026, dalle Scelte del mese
   (home IT/EN e pagina del mese) quando almeno un disco ha il campo `anteprima`.
   Anteprime 30 s di Apple Music, lettore nostro (nessuna grafica esterna).
   ============================================================ */

.ascolto-on .tracklist-item{
  grid-template-columns: 24px 1fr 44px;
  align-items: center;
}

/* ▶ nella tracklist: pulsante tondo (con JS) */
.t-play{
  grid-column: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 1px solid var(--rust); border-radius: 50%;
  background: #fff; color: var(--rust);
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s;
}
.t-play:hover{ background: var(--rust); color: #fff; }
.t-play:focus-visible,
.ap-toggle:focus-visible,
.ascolto-album:focus-visible{
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.t-play[aria-pressed="true"]{ background: var(--rust); color: #fff; }
.t-play-ico{ display: contents; }
.t-play-txt{ display: none; }

/* Senza JS: link ad Apple Music, ▶ tondo più la scritta, su una riga sotto il titolo */
a.t-play{
  grid-column: 2 / 4;
  width: auto; height: auto; min-height: 44px;
  border: 0; border-radius: 0; background: none;
  justify-content: flex-start; gap: 10px;
}
a.t-play:hover{ background: none; color: var(--ink); }
a.t-play .t-play-ico{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 1px solid var(--rust); border-radius: 50%; color: var(--rust);
}
a.t-play .t-play-txt{
  display: inline;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}

/* icona disegnata in CSS: triangolo play, due barre pausa */
.t-play .ico,
.ap-toggle .ico{
  display: block; width: 0; height: 0;
  border-style: solid; border-color: transparent transparent transparent currentColor;
  border-width: 7px 0 7px 12px;
  margin-left: 3px;
}
.t-play[aria-pressed="true"] .ico,
.ap-toggle.is-playing .ico{
  width: 12px; height: 14px; margin-left: 0;
  border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor;
  box-sizing: border-box;
}

/* Lettore */
.ascolto-player{
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
  margin-top: 16px; padding: 12px;
  background: var(--cream); border: 1px solid var(--paper-line);
}
.ascolto-player[hidden]{ display: none; }
.ap-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--rust); color: #fff; cursor: pointer;
}
.ap-info{ min-width: 0; }
.ap-kicker{
  display: block;
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--rust); font-weight: 600;
}
.ap-title{
  display: block; margin: 4px 0 8px;
  font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-bar{
  display: block; height: 3px; background: var(--paper-line); overflow: hidden;
}
.ap-fill{ display: block; height: 100%; width: 0; background: var(--rust); }
.ap-time{
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--ink-mute);
}

/* Fonte e nota, sotto il lettore */
.ascolto-fonte,
.ascolto-nota{
  margin: 12px 0 0;
  font-family: var(--serif); font-size: 13px; line-height: 1.45; color: var(--ink-mute);
}
.ascolto-nota{ margin-top: 4px; font-style: italic; }

/* Link all'album, sotto il lettore */
.ascolto-album{
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rust); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}
.ascolto-album:hover{ color: var(--ink); }

/* ── Scelte del mese: ▶ a destra di ogni disco, lettore unico che si sposta sotto il disco in ascolto ── */
.scelta-play{ width: 48px; height: 48px; align-self: center; }
.scelta-play .ico{ border-width: 8px 0 8px 14px; }
button.scelta-play[aria-pressed="true"] .ico{ width: 14px; height: 16px; }
/* senza JS: solo il ▶ tondo, la scritta resta nell'aria-label */
a.t-play.scelta-play{ grid-column: auto; width: 48px; min-height: 48px; justify-content: center; }
a.t-play.scelta-play .t-play-ico{ width: 48px; height: 48px; }
a.t-play.scelta-play .t-play-txt{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.scelte-player{ grid-column: 1 / -1; grid-template-columns: 44px 1fr 44px; margin-top: 4px; position: relative; z-index: 2; }
/* X: chiude il lettore */
.ap-close{
  display: inline-flex; align-items: center; justify-content: center; align-self: start;
  width: 44px; height: 44px; padding: 0; margin: -6px -6px 0 0;
  border: 0; background: none; color: var(--ink-mute); cursor: pointer; position: relative;
}
.ap-close span::before,
.ap-close span::after{
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px;
  background: currentColor; transform: translate(-50%, -50%) rotate(45deg);
}
.ap-close span::after{ transform: translate(-50%, -50%) rotate(-45deg); }
.ap-close:hover{ color: var(--rust); }
.scelte-player .ap-title{ white-space: normal; overflow: visible; }
.ap-close:focus-visible{ outline: 2px solid var(--ink); outline-offset: -4px; }
/* «Ascolta · titolo»: il brano dichiarato prima del clic */
.scelta-brano{
  display: block; margin-top: 4px;
  font-family: var(--serif); font-size: 15px; line-height: 1.3; color: var(--ink-2);
}
.scelta-brano .sb-l{
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--rust);
}
.scelta-brano.is-attiva{ position: relative; z-index: 2; cursor: pointer; }
.scelta-brano.is-attiva:hover em{ color: var(--rust); }
.scelte-player .ap-kicker .ascolto-fonte{ margin: 0; font: inherit; color: inherit; }

/* home: la riga è un .xl-card (link esteso sul titolo); stessa resa del vecchio <a> che la avvolgeva */
.ascolto-on .scelta-item{ grid-template-columns: 36px 1fr auto 48px; }
.ascolto-on .scelta-item > .scelta-play{ grid-column: 4; }
.scelta-item.xl-card a.scelta-album{ color: var(--ink); }
.scelta-item.xl-card:hover a.scelta-album{ text-decoration: none; }
/* telefono, e la fascia 901-940 px dove la lista è stretta: la quarta colonna stringerebbe i titoli,
   il ▶ va sotto il numero, nello spazio libero a sinistra */
@media (max-width: 600px), (min-width: 901px) and (max-width: 940px){
  .ascolto-on .scelta-item{ grid-template-columns: 36px 1fr auto; row-gap: 8px; }
  .ascolto-on .scelta-item > .scelta-n{ grid-column: 1; grid-row: 1; }
  .ascolto-on .scelta-item > .scelta-info{ grid-column: 2; grid-row: 1 / span 2; }
  .ascolto-on .scelta-item > .scelta-right{ grid-column: 3; grid-row: 1 / span 2; }
  .ascolto-on .scelta-item > .scelta-play{ grid-column: 1; grid-row: 2; width: 44px; height: 44px; align-self: start; }
  .ascolto-on .scelta-item > .scelta-play .t-play-ico{ width: 44px; height: 44px; }
  .ascolto-on .scelta-item > .scelte-player{ grid-row: 3; }
}
/* telefono: artista e anno non si prendono tutta la riga; l'artista va a capo a destra,
   così genere e brano restano su una riga a sinistra */
@media (max-width: 600px){
  .ascolto-on .scelta-right{ max-width: 34vw; }
  .ascolto-on .scelta-artist{ text-align: right; }
}

/* pagina del mese: ▶ e titolo del brano sotto la copertina, nella colonna di sinistra che sotto l'immagine è vuota.
   Fuori dal flusso (absolute), così la scheda non cambia di un pixel; il lettore invece si apre sotto il titolo. */
.ascolto-on .scelta-card{ position: relative; }
.ascolto-on .scelta-card .scelta-ascolta{
  position: absolute; z-index: 2; top: 192px; left: 0; width: 140px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.scelta-ascolta .scelta-brano{ margin: 0; font-size: 14px; padding: 0 4px; overflow-wrap: anywhere; }
.scelta-ascolta .scelta-brano .sb-l{ display: block; margin-bottom: 2px; }
.scelta-ascolta .scelta-brano .sb-sep{ display: none; }
@media(max-width:600px){
  .ascolto-on .scelta-card .scelta-ascolta{ top: 152px; width: 100px; }
  .scelta-ascolta .scelta-brano{ font-size: 13px; }
}
.scelta-card-head > .scelte-player{ margin-top: 12px; }

@media (prefers-reduced-motion: reduce){
  .t-play{ transition: none; }
}