/*
 * Visor de imagem — par de `assets/js/visor-imagem.js`
 * ============================================================================
 *
 * O desenho é o do visor do feed (`.fd-modal--visor` em `_feed.scss`): tela
 * inteira, palco escuro nos dois temas (foto se vê melhor sobre fundo neutro),
 * X redondo de 44px no canto e a foto em `contain`, inteira, sem corte.
 *
 * Folha solta e não SCSS do bundle pelo mesmo motivo da trava de fundo: vale
 * para o tema todo e é versionada por `filemtime` em `inc/enqueues.php`.
 */

/* ------------------------------------------------------------------ gatilho */

/*
 * O botão que envolve a imagem não pode mudar o desenho dela: sem moldura, sem
 * fundo, sem espaço. As regras de `img` de cada tela (`.clt-cartaz img`...)
 * continuam valendo porque são de descendente.
 *
 * `max-height: inherit` + `overflow: hidden`: a notícia corta a foto pela
 * FIGURA (`max-height` de 320px no modal, 420px na página, com transbordo
 * escondido). Sem herdar o teto, o botão ficava da altura da foto inteira e
 * o selo do canto caía na parte cortada, invisível. O raio também vem da
 * figura, para o corte do botão não arredondar o que ela deixa reto.
 */
.congrega-visor-gatilho {
	position: relative;
	display: block;
	width: 100%;
	max-height: inherit;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: inherit;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: zoom-in;
	-webkit-tap-highlight-color: transparent;
}

.congrega-visor-gatilho:focus-visible {
	outline: 3px solid var(--congrega-primary, #2563eb);
	outline-offset: 3px;
}

/*
 * No celular não existe cursor de lupa: sem um sinal na própria imagem,
 * ninguém descobre que ela abre. O selo fica no canto, escuro e translúcido,
 * legível sobre qualquer cartaz.
 */
.congrega-visor-dica {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(11, 17, 32, 0.62);
	color: #ffffff;
	font-size: 14px;
	pointer-events: none;
}

/* ------------------------------------------------------------------- camada */

.congrega-visor {
	position: fixed;
	inset: 0;
	z-index: 10700;
	display: flex;
	flex-direction: column;
	background: #0b1120;
	color: #ffffff;
	animation: congrega-visor-entra 0.18s ease-out;
}

.congrega-visor[hidden] {
	display: none;
}

.congrega-visor *,
.congrega-visor *::before,
.congrega-visor *::after {
	box-sizing: border-box;
}

.congrega-visor-x {
	position: absolute;
	top: calc(12px + env(safe-area-inset-top));
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	font-size: 18px;
	cursor: pointer;
}

.congrega-visor-x:hover {
	background: rgba(255, 255, 255, 0.28);
}

.congrega-visor-x:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.6);
}

.congrega-visor-palco {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: calc(64px + env(safe-area-inset-top)) 8px calc(16px + env(safe-area-inset-bottom));
	cursor: zoom-out;
}

.congrega-visor-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: default;
	user-select: none;
}

@keyframes congrega-visor-entra {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.congrega-visor {
		animation: none;
	}
}