/**
 * generaPagPodcast — elenco dei programmi.
 *
 * 38 nomi senza immagini: e' un indice da scorrere con l'occhio, non una colonna
 * da scrollare, quindi va su piu' colonne. Le righe non sono separate da filetti
 * ma dal respiro, e l'unico elemento che si muove e' la tacca rossa a sinistra:
 * assente a riposo, piena sulla voce in ascolto. E' una tacca di sintonia, non un
 * ornamento — dice dove sei.
 *
 * Nessun webfont: si eredita lo stack del tema, come in crtv-grid.css, e si
 * riusano gli stessi token perche' le due pagine siano riconoscibilmente lo
 * stesso sito. Niente prefers-color-scheme: il tema e' sempre chiaro.
 */

.gpp-lista {
	--gpp-ink: #14141a;
	--gpp-signal: #e5202e;
	--gpp-wash: rgba(229, 32, 46, 0.06);
	--gpp-rule: rgba(20, 20, 26, 0.09);

	columns: 3;
	column-gap: clamp(1rem, 2.5vw, 2.25rem);
	margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.75rem, 4vw, 2.75rem);
	padding-top: 0.8rem;
	border-top: 1px solid var(--gpp-rule);
}

@media (max-width: 1100px) {
	.gpp-lista { columns: 2; }
}

@media (max-width: 620px) {
	.gpp-lista { columns: 1; }
}

/* --- Riga ------------------------------------------------------------- */

.gpp-lista a.gpp-voce,
.gpp-lista a.gpp-voce:visited {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	/* 44px: resta un bersaglio comodo anche sul telefono. */
	min-height: 44px;
	padding: 0.4rem 0.6rem 0.4rem 0.5rem;
	border-radius: 6px;
	break-inside: avoid;
	color: var(--gpp-ink);
	text-decoration: none;
	transition: background-color 180ms ease;
}

.gpp-lista a.gpp-voce:hover,
.gpp-lista a.gpp-voce:focus-visible {
	background-color: var(--gpp-wash);
	color: var(--gpp-ink);
	text-decoration: none;
}

.gpp-lista a.gpp-voce:focus-visible {
	outline: 2px solid var(--gpp-signal);
	outline-offset: 2px;
}

/* La voce che il player sta suonando: tacca piena e nome piu' pesante. */
.gpp-lista a.gpp-voce.is-ascolto,
.gpp-lista a.gpp-voce.is-ascolto:visited {
	background-color: var(--gpp-wash);
	font-weight: 600;
}

/* --- Tacca di sintonia ------------------------------------------------ */

.gpp-lista .gpp-tacca {
	flex: 0 0 3px;
	align-self: stretch;
	min-height: 1.15em;
	border-radius: 2px;
	background: var(--gpp-signal);
	transform: scaleY(0);
	transition: transform 200ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

.gpp-lista a.gpp-voce:hover .gpp-tacca,
.gpp-lista a.gpp-voce:focus-visible .gpp-tacca,
.gpp-lista a.gpp-voce.is-ascolto .gpp-tacca {
	transform: scaleY(1);
}

.gpp-lista .gpp-nome {
	line-height: 1.3;
	text-wrap: pretty;
}

/* --- Approdo del player ----------------------------------------------- */

/*
 * I link dell'elenco puntano a #gpp-player. Lo scarto tiene conto dell'header
 * del tema, che resta appiccicato in alto (td-affix) e coprirebbe la testata del
 * player; quel che resta lascia in vista l'ultima riga dell'elenco, cosi' si
 * capisce da dove si e' arrivati.
 */
.gpp-player {
	scroll-margin-top: clamp(72px, 12vh, 120px);
}

@media (prefers-reduced-motion: reduce) {
	.gpp-lista a.gpp-voce,
	.gpp-lista .gpp-tacca {
		transition: none;
	}
}