/**
 * Seção de podcasts.
 *
 * O HTML histórico salvo nos widgets é normalizado em tempo de renderização
 * para nomes em inglês/kebab-case sem alterar os dados armazenados no banco.
 */

.podcast-section {
	width: 100%;
	margin-bottom: var(--space-lg);
	padding-inline: var(--page-padding);
}

.podcast-section > .section-inner .section-title {
	margin-bottom: var(--space-lg);
}

.podcast-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg);
	width: 100%;
}

.podcast-column,
.podcast-widget {
	min-width: 0;
	width: 100%;
}

/* Estrutura interna normalizada dos widgets de podcast. */
.podcast-column > .podcast-widget > img,
.podcast-column .podcast-player + img,
.podcast-column > img {
	max-width: 120px;
	height: auto;
}

.podcast-player {
	display: flex;
	padding: 20px;
	border-radius: 10px;
	flex-direction: column;
	align-items: flex-start;
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

.podcast-player-title {
	margin-bottom: var(--space-sm);
	color: var(--color-primary);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.podcast-player-content {
	display: flex;
	width: 100%;
	margin-bottom: var(--space-sm);
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}

.podcast-player-content img {
	width: calc(100% - 110px);
	height: auto;
}

.podcast-player-platform {
	display: flex;
	width: 100px;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	color: var(--color-text-muted);
	font-size: 14px;
	text-decoration: none;
}

.podcast-player-platform img {
	display: block;
	width: 90px;
	height: auto;
	margin: auto;
	padding: 5px;
	filter: grayscale(1);
}

.podcast-player-more {
	color: var(--color-link);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.podcast-player-more:hover,
.podcast-player-more:focus-visible {
	color: var(--color-primary);
	text-decoration: underline;
}

@media (max-width: 650px) {
	.podcast-section > .section-inner .section-title {
		margin-bottom: var(--space-md);
	}

	.podcast-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}