/**
 * Podcast Manager Accordion — regole responsive di base.
 * I breakpoint qui sotto riflettono i valori PREDEFINITI delle Impostazioni
 * di stile (960px tablet, 600px mobile). Se l'amministratore cambia i
 * breakpoint in "CSS e stile", deve replicare le query equivalenti nella
 * textarea "Responsive mobile" (i CSS custom properties non possono essere
 * usati dentro una condizione @media, e' un limite del CSS stesso).
 */

@media (max-width: 960px) {
	.pma-latest { grid-template-columns: 1fr; }
	.pma-topics { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 600px) {
	.pma-podcast-manager { padding: var(--pma-spacing-sm, 16px) var(--pma-spacing-xs, 8px); }

	.pma-latest { grid-template-columns: 1fr; gap: var(--pma-spacing-sm, 16px); }
	.pma-latest__image { order: -1; max-width: 260px; margin: 0 auto var(--pma-spacing-sm, 16px); }

	.pma-topics { grid-template-columns: 1fr; }

	.pma-categories { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }

	.pma-episode-row__toggle {
		grid-template-columns: 32px 1fr 20px;
		grid-template-areas:
			"number title chevron"
			"number meta chevron";
		row-gap: 4px;
	}
	.pma-episode-row__number { grid-area: number; font-size: 28px; }
	.pma-episode-row__title { grid-area: title; }
	.pma-episode-row__duration, .pma-episode-row__date { grid-area: meta; display: inline-block; margin-right: 8px; }
	.pma-episode-row__chevron { grid-area: chevron; }

	.pma-player { width: 100%; }
	.pma-player__progress { width: 100%; order: 3; flex-basis: 100%; }

	.pma-btn, .pma-player__play, .pma-player__mute, .pma-player__speed, .pma-categories__tab, .pma-episode-row__toggle {
		min-height: 44px;
		min-width: 44px;
	}
}