/* Lava GEO: carrossel de fotos no corpo do post ([lgeo_carrossel]). Neutro de propósito: herda a
   fonte e a cor do texto do tema e usa só preto/branco translúcidos, pra servir em qualquer site.
   Os seletores começam sempre por .lgeo-carrossel pra vencer o estilo de figure/button/img do tema. */
.lgeo-carrossel {
	--lgeo-carrossel-fundo: rgba(0, 0, 0, .06);
	--lgeo-carrossel-sobra: #111;
	margin: 1.75em auto;
	max-width: min(100%, calc(80vh * var(--lgeo-carrossel-r, 10)));
	position: relative;
}
.lgeo-carrossel .lgeo-carrossel__palco { position: relative; }
.lgeo-carrossel .lgeo-carrossel__trilho {
	display: flex;
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: 8px;
	outline: none;
}
.lgeo-carrossel .lgeo-carrossel__trilho::-webkit-scrollbar { display: none; }
.lgeo-carrossel .lgeo-carrossel__trilho:focus-visible { box-shadow: 0 0 0 3px rgba(0, 0, 0, .45); }
.lgeo-carrossel .lgeo-carrossel__slide {
	flex: 0 0 100%;
	min-width: 100%;
	margin: 0;
	padding: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.lgeo-carrossel .lgeo-carrossel__quadro {
	aspect-ratio: var(--lgeo-carrossel-proporcao, 4 / 3);
	background: var(--lgeo-carrossel-sobra);
	overflow: hidden;
	width: 100%;
}
.lgeo-carrossel .lgeo-carrossel__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
}
.lgeo-carrossel--cobrir .lgeo-carrossel__img { object-fit: cover; }
.lgeo-carrossel .lgeo-carrossel__legenda {
	font-size: .875em;
	line-height: 1.45;
	opacity: .8;
	margin: .6em 0 0;
	padding: 0 2px;
	text-align: center;
}

/* Setas e pontos só aparecem com o JS pronto (sem ele, o trilho rola com o dedo/scroll). */
.lgeo-carrossel .lgeo-carrossel__seta,
.lgeo-carrossel .lgeo-carrossel__rodape { display: none; }
.lgeo-carrossel.is-pronto .lgeo-carrossel__seta { display: flex; }
.lgeo-carrossel.is-pronto .lgeo-carrossel__rodape { display: flex; }

.lgeo-carrossel .lgeo-carrossel__seta {
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	cursor: pointer;
	line-height: 1;
	box-shadow: none;
	text-shadow: none;
	transition: background .2s, opacity .2s;
	z-index: 2;
}
.lgeo-carrossel .lgeo-carrossel__seta:hover,
.lgeo-carrossel .lgeo-carrossel__seta:focus-visible { background: rgba(0, 0, 0, .8); color: #fff; outline: none; }
.lgeo-carrossel .lgeo-carrossel__seta:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85); }
.lgeo-carrossel .lgeo-carrossel__seta[disabled] { opacity: 0; pointer-events: none; }
.lgeo-carrossel .lgeo-carrossel__seta svg { display: block; }
.lgeo-carrossel .lgeo-carrossel__seta--anterior { left: 12px; }
.lgeo-carrossel .lgeo-carrossel__seta--proxima { right: 12px; }
.lgeo-carrossel .lgeo-carrossel__seta--proxima svg { transform: scaleX(-1); }

.lgeo-carrossel .lgeo-carrossel__rodape {
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: .75em;
}
.lgeo-carrossel .lgeo-carrossel__pontos { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.lgeo-carrossel .lgeo-carrossel__ponto {
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit; /* o ponto é currentColor: sem isto o tema que pinta button de branco some com ele */
	cursor: pointer;
	position: relative;
	box-shadow: none;
}
.lgeo-carrossel .lgeo-carrossel__ponto::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .3;
	transition: opacity .2s, transform .2s;
}
.lgeo-carrossel .lgeo-carrossel__ponto[aria-current="true"]::before { opacity: .9; transform: scale(1.25); }
.lgeo-carrossel .lgeo-carrossel__ponto:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 50%; }
.lgeo-carrossel .lgeo-carrossel__contador { font-size: .8125em; opacity: .7; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Muitas fotos: os pontos viram ruído, fica só o contador. */
.lgeo-carrossel.is-muitas .lgeo-carrossel__pontos { display: none; }

@media (max-width: 600px) {
	.lgeo-carrossel .lgeo-carrossel__seta { width: 38px; height: 38px; }
	.lgeo-carrossel .lgeo-carrossel__seta--anterior { left: 8px; }
	.lgeo-carrossel .lgeo-carrossel__seta--proxima { right: 8px; }
}
@media (hover: none) {
	/* No toque o dedo já arrasta: setas mais discretas, pra não tapar a foto. */
	.lgeo-carrossel .lgeo-carrossel__seta { background: rgba(0, 0, 0, .35); }
}
@media (prefers-reduced-motion: reduce) {
	.lgeo-carrossel .lgeo-carrossel__trilho { scroll-behavior: auto; }
}