/* =============================================================================
   LA PUNTATA DOPPIA — Spotify + YouTube
   -----------------------------------------------------------------------------
   Aggiunto il 17 settembre 2026.

   COSA CAMBIA
   Quando una puntata esce in tutti e due i posti, la colonna di destra della
   testata smette di fare il lettore e diventa una vetrina: copertina YouTube
   16:9 in alto, i due bottoni sotto. Le puntate che stanno solo su Spotify non
   cambiano di una virgola — questo foglio tocca soltanto le classi nuove.

   PERCHE UN FOGLIO A PARTE
   Gli stili di una pagina sola vorrebbero stare in xpan-2026.css, ma quel file
   lo usano tutte le pagine del sito e la copia sul server puo essere piu avanti
   di quella locale: riscriverlo per intero solo per aggiungere trenta righe in
   fondo vuol dire rischiare di riportare indietro qualcosa. Stessa scelta gia
   fatta per xpan-pantalks.css. Si spegne cancellando l'enqueue dentro
   single-puntata_podcast.php.
   ============================================================================= */

/* --- La colonna di destra ------------------------------------------------ */

/* Meno imbottitura di quella del lettore: qui dentro ci vanno due cose, non una,
   e su schermi normali la colonna e alta 620 px. */
.xpan .episode-player-doppia { padding: 56px 5vw; }

.xpan .episode-doppia {
	width: 100%;
	max-width: 620px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

/* --- La copertina -------------------------------------------------------- */

/* `cover` e non `contain`: le copertine YouTube sono disegnate 1280x720, quindi
   il riquadro 16:9 e la loro forma vera e non taglia niente. La regola del sito
   che le vuole quadrate vale per le copertine della libreria, dove il nome della
   sezione e stampato nella meta bassa. Il fondo nero si vede solo mentre carica
   e mentre si ripiega su hqdefault. */
.xpan .episode-cover-169 {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #111;
	border: 1px solid rgba(255, 255, 255, .14);
}

/* --- I due bottoni ------------------------------------------------------- */

/* Affiancati e della stessa larghezza, cosi nessuno dei due sembra il principale. */
.xpan .episode-player-doppia .podcast-azioni { gap: 12px; }
.xpan .episode-player-doppia .podcast-azioni .button {
	flex: 1 1 210px;
	justify-content: space-between;
	gap: 18px;
}

/* Spotify resta il giallo del sito. YouTube parte bianco — sul fondo nero della
   colonna e l'unico modo perche si legga — e diventa rosso al passaggio del
   mouse: il colore arriva quando serve a dire dove si sta andando. */
.xpan .button.episode-btn-yt {
	background: #fff;
	color: #111;
	transition: background .18s, color .18s;
}
.xpan .button.episode-btn-yt span { color: #ff0000; }
.xpan .button.episode-btn-yt:hover { background: #ff0000; color: #fff; }
.xpan .button.episode-btn-yt:hover span { color: #fff; }

/* --- Telefono ------------------------------------------------------------ */

@media (max-width: 900px) {
	.xpan .episode-player-doppia { padding: 34px 20px 48px; }
	.xpan .episode-doppia { gap: 18px; max-width: none; }
}

/* Sotto i 560 px «Ascolta su Spotify» e «Guarda su YouTube» affiancati non ci
   stanno: xpan-2026.css li impila gia, qui si toglie solo lo stiramento. */
@media (max-width: 560px) {
	.xpan .episode-player-doppia .podcast-azioni .button { flex: 1 1 auto; }
}