/**
 * Sons — listagem ([sons_lista] / widget "Sons (Museu)")
 * Markup: .mmp-sons > .mmp-som — ver inc/sons.php.
 *
 * Colunas: pessoa (nome + localidade) | título | duração | player.
 * A linha ativa recebe .is-playing (via assets/js/sons.js).
 *
 * Nota de especificidade: os seletores levam o prefixo .mmp-sons e os
 * botões/título têm reset explícito, para ganhar aos estilos globais do
 * tema pai e do kit do Elementor (que pintam button e h3). Os controlos
 * do widget ({{WRAPPER}} …) continuam a sobrepor-se a tudo isto.
 */

:root {
	--mmp-sons-accent: #C1504D; /* vermelho do logótipo (play ativo, progresso) */
	/* Largura partilhada do mini-player e do prompt "continuar a ouvir". */
	--mmp-sons-largura: min(360px, calc(100vw - 60px));
}

.mmp-sons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Larguras das colunas configuráveis pelo widget Elementor (CSS vars).
   align-items: start — todas as colunas arrancam na linha do título
   (nome, título, duração e botões do player ficam na mesma linha de
   texto; a barra de progresso fica por baixo).
   A coluna da duração é flexível (0.9fr): reparte o espaço livre com a
   do título, para o tempo flutuar entre os dois em vez de ficar colado
   ao player. Se o widget definir uma largura, essa passa a ser fixa. */
.mmp-som {
	display: grid;
	grid-template-columns:
		minmax(140px, var(--mmp-som-col-pessoa, 180px))
		1fr
		var(--mmp-som-col-duracao, minmax(70px, 0.9fr))
		minmax(220px, var(--mmp-som-col-player, 270px));
	align-items: start;
	gap: 24px;
	background: #f6f6f6;
	padding: 20px 28px;
}

/* Sem a coluna da duração (opção do widget). */
.mmp-sons--sem-duracao .mmp-som {
	grid-template-columns:
		minmax(140px, var(--mmp-som-col-pessoa, 180px))
		1fr
		minmax(220px, var(--mmp-som-col-player, 270px));
}

.mmp-sons--sem-duracao .mmp-som__duracao {
	display: none;
}

/* --- Volume global ---------------------------------------------------- */

.mmp-sons__volume {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	color: #1a1a1a;
	margin-bottom: 4px;
}

.mmp-sons__volume svg {
	display: block;
	width: 18px;
	height: 18px;
	flex: none;
}

.mmp-sons .mmp-sons__volume-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 120px;
	height: 3px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: #ddd;
	accent-color: var(--mmp-sons-accent);
	cursor: pointer;
}

.mmp-sons .mmp-sons__volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: var(--mmp-sons-accent);
	cursor: pointer;
}

.mmp-sons .mmp-sons__volume-slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: var(--mmp-sons-accent);
	cursor: pointer;
}

/* --- Texto ----------------------------------------------------------- */

.mmp-sons .mmp-som__nome {
	display: block;
	color: #1a1a1a;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
}

.mmp-sons .mmp-som__local {
	display: block;
	font-size: 12px;
	color: #a0a0a0;
	margin-top: 2px;
}

/* É um h3 — anula o estilo de headings do tema/kit.
   line-height igual ao do nome, para as primeiras linhas baterem certo. */
.mmp-sons .mmp-som__titulo {
	margin: 0;
	padding: 0;
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
}

.mmp-sons .mmp-som__duracao {
	color: #1a1a1a;
	font-size: 14px;
	line-height: 1.4; /* ~mesma linha de texto do título (15px × 1.3) */
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- Player ---------------------------------------------------------- */

.mmp-sons .mmp-som__controlos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mmp-sons .mmp-som__botoes {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Reset completo: o tema pai/kit pinta <button> (fundo vermelho, padding,
   texto branco) — aqui os botões são só o ícone, sem caixa. */
.mmp-sons .mmp-som__play,
.mmp-sons .mmp-som__pause {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	line-height: 0;
	color: #1a1a1a;
	cursor: pointer;
	text-transform: none;
	transition: color 0.15s ease;
}

/* Hover/focus: o ícone ganha a cor de destaque (o fundo fica limpo,
   para o kit do Elementor não pintar a caixa nesses estados). */
.mmp-sons .mmp-som__play:hover,
.mmp-sons .mmp-som__play:focus,
.mmp-sons .mmp-som__play:active,
.mmp-sons .mmp-som__pause:hover,
.mmp-sons .mmp-som__pause:focus,
.mmp-sons .mmp-som__pause:active {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--mmp-sons-accent);
}

.mmp-sons .mmp-som__play:focus-visible,
.mmp-sons .mmp-som__pause:focus-visible {
	outline: 2px solid var(--mmp-sons-accent);
	outline-offset: 3px;
}

.mmp-sons .mmp-som__play svg,
.mmp-sons .mmp-som__pause svg {
	display: block;
	width: 19px;
	height: 18px;
}

/* Linha ativa: o play fica com a cor de destaque (inclui hover/focus,
   para o tema não o repor a preto). Fica DEPOIS das regras de hover. */
.mmp-sons .mmp-som.is-playing .mmp-som__play,
.mmp-sons .mmp-som.is-playing .mmp-som__play:hover,
.mmp-sons .mmp-som.is-playing .mmp-som__play:focus {
	color: var(--mmp-sons-accent);
	background: transparent;
}

.mmp-sons .mmp-som__tempo {
	font-size: 11px;
	color: #a0a0a0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mmp-sons .mmp-som__barra {
	position: relative;
	height: 2px;
	margin-top: 10px;
	background: #ddd;
	cursor: pointer;
}

/* Alvo de clique/toque maior sem engrossar a linha de 2px. */
.mmp-sons .mmp-som__barra::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	bottom: -8px;
}

.mmp-sons .mmp-som__progresso {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: var(--mmp-sons-accent);
}

/* --- Mini-player global (continuação pelo site) ----------------------- */

.mmp-som-global {
	position: fixed;
	left: 30px;
	bottom: 30px;
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 12px;
	width: var(--mmp-sons-largura);
    box-sizing: border-box;
	padding: 12px 16px 15px;
	background: #F4F4F4;
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(188, 188, 188, 0.5);
	overflow: hidden;
    animation: mmp-som-prompt-in 0.25s ease;
}

.mmp-som-global[hidden] {
	display: none;
}

/* Reset com prefixo .mmp-som-global para ganhar ao kit do Elementor,
   que pinta <button> com fundo/padding próprios. */
.mmp-som-global .mmp-som-global__toggle,
.mmp-som-global .mmp-som-global__fechar {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	line-height: 0;
	color: #1a1a1a;
	cursor: pointer;
	flex: none;
	transition: color 0.15s ease;
}

.mmp-som-global .mmp-som-global__toggle:hover,
.mmp-som-global .mmp-som-global__toggle:focus,
.mmp-som-global .mmp-som-global__toggle:active,
.mmp-som-global .mmp-som-global__fechar:hover,
.mmp-som-global .mmp-som-global__fechar:focus,
.mmp-som-global .mmp-som-global__fechar:active {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--mmp-sons-accent);
}

.mmp-som-global .mmp-som-global__toggle svg {
	display: block;
	width: 17px;
	height: 16px;
}

.mmp-som-global .mmp-som-global__fechar svg {
	display: block;
	width: 10px;
	height: 10px;
}

/* O botão alterna o ícone conforme o estado (classe no #mmp-som-global).
   Seletores mais específicos que o "display: block" do svg acima. */
.mmp-som-global .mmp-som-global__toggle .mmp-som-global__ic-pause { display: none; }
.mmp-som-global.is-playing .mmp-som-global__toggle .mmp-som-global__ic-play { display: none; }
.mmp-som-global.is-playing .mmp-som-global__toggle .mmp-som-global__ic-pause { display: block; }
.mmp-som-global.is-playing .mmp-som-global__toggle { color: var(--mmp-sons-accent); }

.mmp-som-global__info {
	flex: 1 1 auto; /* ocupa o espaço disponível… */
	min-width: 0;   /* …mas encolhe com ellipsis quando falta */
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.mmp-som-global__titulo {
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mmp-som-global__pessoa {
	color: #a0a0a0;
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mmp-som-global__tempo {
	color: #a0a0a0;
	font-size: 11px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	flex: none;
}

.mmp-som-global__barra {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: #CCCCCC9C;
	cursor: pointer;
    margin: 0px 16px 4px;
}

.mmp-som-global__progresso {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: var(--mmp-sons-accent);
}

@media (max-width: 600px) {
    :root {
		--mmp-sons-largura: calc(100vw - 32px);
	}
	.mmp-som-global {
		left: 16px;
		bottom: 16px;
	}
}

/* --- Prompt "Quer continuar a ouvir?" ---------------------------------
   Mesma linguagem visual do prompt da música ambiente (music.css),
   mas em baixo à esquerda, por cima do mini-player. */

.mmp-som-prompt {
	position: fixed;
	left: 30px;
	bottom: 100px;
	z-index: 9999;
	width: var(--mmp-sons-largura);
    box-sizing: border-box;
	padding: 16px;
	border-radius: 10px;
	background: #F4F4F4;
	box-shadow: 0 2px 12px rgba(188, 188, 188, 0.5);
	font-size: 13px;
	line-height: 1.45;
	color: #333;
	animation: mmp-som-prompt-in 0.25s ease;
}

.mmp-som-prompt[hidden] { display: none; }

.mmp-som-prompt p {
	margin: 0;
	line-height: 1.5em;
}

.mmp-som-prompt__titulo {
	color: #1a1a1a;
}

.mmp-som-prompt__actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/* Prefixo .mmp-som-prompt + estados: ganha ao kit do Elementor. */
.mmp-som-prompt .mmp-som-prompt__actions button,
.mmp-som-prompt .mmp-som-prompt__actions button:hover,
.mmp-som-prompt .mmp-som-prompt__actions button:focus,
.mmp-som-prompt .mmp-som-prompt__actions button:active {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	padding: 8px 10px;
	margin: 0;
	min-height: 0;
	border: 1px solid #ccc;
	border-radius: 0px;
	box-shadow: none;
	background: transparent;
	color: #333;
	font: inherit;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	cursor: pointer;
	text-transform: uppercase;
	transition: opacity 0.15s ease;
}

.mmp-som-prompt .mmp-som-prompt__actions .mmp-som-prompt__yes,
.mmp-som-prompt .mmp-som-prompt__actions .mmp-som-prompt__yes:hover,
.mmp-som-prompt .mmp-som-prompt__actions .mmp-som-prompt__yes:focus,
.mmp-som-prompt .mmp-som-prompt__actions .mmp-som-prompt__yes:active {
	background: var(--mmp-sons-accent);
	border-color: var(--mmp-sons-accent);
	color: #fff;
}

.mmp-som-prompt .mmp-som-prompt__actions button:hover {
	opacity: 0.85;
}

@keyframes mmp-som-prompt-in {
	from { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
	.mmp-som-prompt { animation: none; }
}

@media (max-width: 600px) {
	.mmp-som-prompt {
		left: 16px;
		bottom: 88px;
	}
}

/* --- Responsivo ------------------------------------------------------ */

/* Tablet: 3 colunas (a duração sai — o contador já mostra o total). */
@media (max-width: 900px) {
	.mmp-som {
		grid-template-columns: minmax(120px, 160px) minmax(140px, 1fr) minmax(200px, 240px);
		gap: 18px;
	}
	.mmp-sons .mmp-som__duracao {
		display: none;
	}
}

/* Mobile: empilhado — pessoa, título e player a toda a largura.
   (Aos 782px, antes de as 3 colunas começarem a espremer o título.) */
@media (max-width: 782px) {
	.mmp-som {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 16px 18px;
	}
	.mmp-sons .mmp-som__titulo {
		line-height: 1.4; /* já não precisa de alinhar com o nome ao lado */
	}
	.mmp-som__player {
		margin-top: 8px;
	}
}