/* =============================================================================
   PAN TALKS — copertine da YouTube
   -----------------------------------------------------------------------------
   Aggiunto il 19 agosto 2026, quando /podcast/pan-talks/ ha smesso di prendere
   le copertine dal feed RSS del podcast.

   PERCHÉ UN FOGLIO A PARTE
   Il sistema 2026 vorrebbe gli stili di una pagina sola dentro xpan-2026.css.
   Quel foglio però lo usano tutte le pagine del sito: riscriverlo per intero
   solo per aggiungere in fondo trenta righe vuol dire rischiare di riportare
   indietro qualcosa. Questo si carica solo dal template delle categorie del
   podcast e si spegne cancellando una riga di enqueue.

   PERCHÉ 16:9 QUI E QUADRATO ALTROVE
   Tutte le copertine del sito sono quadrate, e c'è una regola precisa: qualunque
   riquadro non 1:1 le taglia, e sulle copertine di Sotto la Buccia il nome della
   sezione è stampato nella metà bassa. Le copertine YouTube sono un'altra cosa
   — sono disegnate 1280x720, con i volti e il titolo dentro — e vanno mostrate
   nella loro forma. Le altre cinque sezioni restano quadrate, e continuano a
   usare le regole di xpan-2026.css.
   ============================================================================= */

/* --- La copertina della testata, quando arriva da YouTube ---------------- */

/* `.hero-podcast-cover` è quadrata con `object-fit: contain`: un'immagine 16:9
   ci sta dentro, ma con due bande vuote sopra e sotto. */
.xpan .hero-podcast-cover.cover-169 {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* --- L'elenco ------------------------------------------------------------ */

.xpan .talks-list {
	display: flex;
	flex-direction: column;
	gap: 56px;
	margin-top: 8px;
}

.xpan .talk {
	display: block;
	border: 1px solid #111;
	background: #fff;
}

.xpan .talk-cover {
	display: block;
	border-bottom: 1px solid #111;
	background: #111; /* si vede solo mentre l'immagine carica */
}

.xpan .talk-cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: opacity .2s;
}
.xpan .talk-cover:hover img { opacity: .9; }

/* Le puntate senza indirizzo YouTube ripiegano sulla copertina quadrata:
   `contain` invece di `cover`, se no il nome della sezione stampato in basso
   viene tagliato via. */
.xpan .talk-quadrata .talk-cover img {
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: #f6f3eb;
}

.xpan .talk-testo { padding: 26px 30px 30px; }

.xpan .talk-data {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .6;
}

.xpan .talk-testo h3 {
	margin: 0 0 12px;
	font-size: clamp(22px, 2.1vw, 31px);
	line-height: 1.1;
	letter-spacing: -.035em;
}
.xpan .talk-testo h3 a { color: inherit; }
.xpan .talk-testo h3 a:hover { color: var(--purple); }

.xpan .talk-estratto {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.55;
	max-width: 70ch;
	opacity: .8;
}

/* --- I due pulsanti ------------------------------------------------------ */

.xpan .talk-azioni { display: flex; flex-wrap: wrap; gap: 12px; }

.xpan .talk-btn {
	border: 1px solid #111;
	padding: 13px 20px;
	font-weight: 900;
	font-size: 14.5px;
	line-height: 1;
	transition: background .18s, color .18s;
}

/* YouTube porta il colore suo, Spotify il suo: sono due posti diversi e la
   differenza si vede prima di leggere. */
.xpan .talk-btn.talk-yt { background: #111; color: #fff; }
.xpan .talk-btn.talk-yt:hover { background: #ff0000; border-color: #ff0000; color: #fff; }

.xpan .talk-btn.talk-sp { background: #fff; color: #111; }
.xpan .talk-btn.talk-sp:hover { background: #1db954; border-color: #1db954; color: #fff; }

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

@media (max-width: 860px) {
	.xpan .talks-list { gap: 34px; }
	.xpan .talk-testo { padding: 20px 18px 24px; }
	.xpan .talk-testo h3 { font-size: clamp(20px, 5.4vw, 26px); }
	.xpan .talk-estratto { font-size: 14.5px; margin-bottom: 18px; }
	/* I pulsanti a tutta larghezza, uno sotto l'altro: affiancati a 390 px
	   «Guarda su YouTube» e «Ascolta su Spotify» non ci stanno. */
	.xpan .talk-azioni { flex-direction: column; }
	.xpan .talk-btn { text-align: center; padding: 15px 18px; }
}