/* Podcast Manager - stili frontend di base. Ogni template puo' aggiungere/
   sovrascrivere queste classi tramite il proprio CSS personalizzato. */

:root {
	--pm-primary: #7b2ff7;
}

.pm-episode-cover,
.pm-topic-image {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

.pm-topic-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(123, 47, 247, 0.1);
	color: var(--pm-primary);
	font-size: 12px;
	text-decoration: none;
	margin: 2px 4px 2px 0;
}

.pm-explicit-badge {
	display: inline-block;
	background: #333;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 3px;
	vertical-align: middle;
	margin-left: 6px;
}

/* ----- Player ----- */
.pm-player {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #f4f4f6;
	flex-wrap: wrap;
}
.pm-player--dark {
	background: #1c1c22;
	color: #fff;
}
.pm-player__audio { display: none; }

.pm-player__playpause {
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 50%;
	border: none;
	background: var(--pm-primary);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.pm-player__playpause .pm-icon-pause { display: none; }
.pm-player.is-playing .pm-icon-play { display: none; }
.pm-player.is-playing .pm-icon-pause { display: inline; }

.pm-player__timeline {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 200px;
}
.pm-player__seek {
	flex: 1;
	accent-color: var(--pm-primary);
}
.pm-player__time {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	min-width: 38px;
}

.pm-player__extra {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pm-player__speed {
	font-size: 12px;
	border-radius: 6px;
	border: 1px solid #ddd;
	padding: 3px 6px;
}
.pm-player__volume {
	width: 70px;
	accent-color: var(--pm-primary);
}
.pm-player__download {
	text-decoration: none;
	color: var(--pm-primary);
	font-size: 18px;
}
.pm-no-audio { font-style: italic; color: #888; }

/* ----- Lista episodi ----- */
.pm-episode-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.pm-episode-item {
	display: flex;
	gap: 16px;
	padding: 16px;
	border: 1px solid #eaeaea;
	border-radius: 12px;
}
.pm-episode-item__cover-link { flex-shrink: 0; }
.pm-episode-item__cover-link img { width: 110px; height: 110px; object-fit: cover; }
.pm-episode-item__body { flex: 1; min-width: 0; }
.pm-episode-item__title { margin: 0 0 6px; }
.pm-episode-item__title a { text-decoration: none; color: inherit; }
.pm-episode-item__meta {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 13px;
	color: #777;
	margin: 8px 0;
	flex-wrap: wrap;
}
.pm-pagination { margin-top: 20px; text-align: center; }
.pm-pagination a, .pm-pagination span { margin: 0 4px; }

/* ----- Argomenti ----- */
.pm-topics-grid {
	display: grid;
	grid-template-columns: repeat(var(--pm-columns, 3), 1fr);
	gap: 16px;
}
@media (max-width: 780px) {
	.pm-topics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.pm-topics-grid { grid-template-columns: 1fr; }
}
.pm-topic-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #eaeaea;
	border-top: 3px solid var(--pm-topic-color, var(--pm-primary));
	border-radius: 10px;
	padding: 14px;
	transition: box-shadow .15s ease;
}
.pm-topic-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.pm-topic-card__name { margin: 8px 0 4px; }
.pm-topic-card__desc { font-size: 13px; color: #777; margin: 0 0 6px; }
.pm-topic-card__count {
	display: inline-block;
	font-size: 12px;
	background: #f2f2f2;
	padding: 2px 8px;
	border-radius: 999px;
}

/* ----- Episodio singolo ----- */
.pm-episode-single__header {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-bottom: 20px;
}
.pm-episode-single__header .pm-episode-cover { width: 200px; height: 200px; object-fit: cover; }
.pm-episode-single__title { margin: 0 0 6px; }
.pm-episode-single__subtitle { color: #777; margin: 0 0 10px; }
.pm-episode-single__meta { display: flex; gap: 14px; font-size: 13px; color: #888; flex-wrap: wrap; }
.pm-episode-single__player { margin-bottom: 24px; }