/**
 * Foto ampliada do texto (assets/js/ampliar.js).
 * Pedido com vbox_irb_use( 'ampliar' ).
 */

/* A foto que amplia avisa com o cursor. */
.js [data-irb-ampliar] a:has(> img) {
	cursor: zoom-in;
}

.ampliada {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--e-7) var(--e-5) var(--e-5);
	border: 0;
	background: rgb(20 20 22 / 96%);
	color: #fff;
}

.ampliada::backdrop {
	background: transparent;
}

/* A página por baixo não rola enquanto a foto está aberta. */
.ampliada-aberta {
	overflow: hidden;
}

.ampliada__figura {
	display: grid;
	grid-template-rows: minmax(0, auto) auto;
	gap: var(--e-3);
	place-items: center;
	align-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: zoom-out;
}

.ampliada__foto {
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
	border-radius: var(--raio);
	object-fit: contain;
	cursor: default;
}

.ampliada__legenda {
	max-width: 46rem;
	font-size: var(--t-sm);
	text-align: center;
	cursor: default;
}

.ampliada__botao {
	position: absolute;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0 0 0.15em;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 14%);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.ampliada__botao:hover {
	background: var(--irb-vermelho);
}

.ampliada__botao:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ampliada__fechar {
	top: var(--e-3);
	right: var(--e-3);
}

.ampliada__anterior,
.ampliada__proxima {
	top: 50%;
	transform: translateY(-50%);
}

.ampliada__anterior {
	left: var(--e-3);
}

.ampliada__proxima {
	right: var(--e-3);
}

.ampliada__posicao {
	position: absolute;
	top: var(--e-4);
	left: var(--e-4);
	margin: 0;
	font-size: var(--t-sm);
	opacity: 0.85;
}

@media (max-width: 40rem) {
	.ampliada {
		padding: var(--e-7) var(--e-2);
	}

	/* No celular as setas ficam embaixo, fora da foto. */
	.ampliada__anterior,
	.ampliada__proxima {
		top: auto;
		bottom: var(--e-3);
		transform: none;
	}
}