/* Labbo Image Hotspots — front-end
   Todos os valores expostos como custom properties para o tema sobrescrever. */

.lbih {
	--lbih-spot-base: clamp( 22px, 3.4vw, 40px );
	--lbih-spot-scale: 1;
	--lbih-spot-bg: #1d4ed8;
	--lbih-spot-ring: #fff;
	--lbih-tip-w: min( 300px, 70vw );
	--lbih-tip-bg: #fff;
	--lbih-tip-color: #1f2933;
	--lbih-gap: 12px;
	--lbih-radius: 8px;

	position: relative;
	width: 100%;
	margin-inline: auto;
}

.lbih__frame {
	position: relative;
	display: block;
	line-height: 0;
}

.lbih__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* ---- Ponto ---- */

.lbih__point {
	/* Declarado aqui de propósito: a substituição de var() em custom property
	   acontece no elemento que a declara, então é neste ponto que o
	   --lbih-spot-scale inline precisa ser lido. */
	--lbih-spot-size: calc( var( --lbih-spot-base ) * var( --lbih-spot-scale ) );

	position: absolute;
	width: var( --lbih-spot-size );
	height: var( --lbih-spot-size );
	line-height: 0;
	z-index: 2;

	/* Sem margin negativa aqui de propósito: o desconto de meio marcador está
	   no left/top inline, gerado no PHP. Reset universal de tema zera margem e
	   deslocaria todos os pontos; left/top praticamente nenhum tema mexe. */
}

.lbih__point.is-open {
	z-index: 6;
}

.lbih__spot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var( --lbih-spot-bg );
	box-shadow: 0 0 0 2px var( --lbih-spot-ring ), 0 2px 8px rgba( 0, 0, 0, 0.3 );
	cursor: pointer;
	appearance: none;
	transition: transform 0.15s ease;
}

.lbih__spot--custom {
	background: transparent;
	box-shadow: none;
}

.lbih__spot:hover,
.lbih__point.is-open .lbih__spot {
	transform: scale( 1.12 );
}

.lbih__spot:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Pulso discreto apenas no marcador padrão */
.lbih__spot:not( .lbih__spot--custom )::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var( --lbih-spot-bg );
	opacity: 0.55;
	animation: lbih-pulse 2.4s ease-out infinite;
}

@keyframes lbih-pulse {
	0% { transform: scale( 1 ); opacity: 0.55; }
	70% { transform: scale( 1.9 ); opacity: 0; }
	100% { transform: scale( 1.9 ); opacity: 0; }
}

.lbih__icon {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lbih__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* ---- Tooltip ---- */

.lbih__tip {
	position: absolute;
	width: var( --lbih-tip-w );
	padding: 14px 16px;
	background: var( --lbih-tip-bg );
	color: var( --lbih-tip-color );
	border-radius: var( --lbih-radius );
	box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.18 );
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 4px );
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 10;
}

.lbih__tip:focus {
	outline: none;
}

.lbih__point.is-open .lbih__tip {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

/* Posicionamento horizontal (definido no PHP conforme a coordenada X) */
.lbih--h-start .lbih__tip { left: 0; }
.lbih--h-end .lbih__tip { right: 0; }
/* Mesmo motivo do ponto: a centralização não pode depender de margem. */
.lbih--h-center .lbih__tip { left: calc( 50% - var( --lbih-tip-w ) / 2 ); }

/* Posicionamento vertical */
.lbih--v-bottom .lbih__tip { top: calc( 100% + var( --lbih-gap ) ); }
.lbih--v-top .lbih__tip { bottom: calc( 100% + var( --lbih-gap ) ); }

/* Ponte invisível para o hover não "cair" no vão */
.lbih__tip::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: var( --lbih-gap );
}

.lbih--v-bottom .lbih__tip::after { top: calc( var( --lbih-gap ) * -1 ); }
.lbih--v-top .lbih__tip::after { bottom: calc( var( --lbih-gap ) * -1 ); }

.lbih__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	padding-right: 18px;
}

/* O espaçamento interno do balão vai com !important porque temas com reset
   universal (`.content * { margin: 0 }`, especificidade alta) grudam todo o
   texto do tooltip. Restrito ao conteúdo do balão. */
.lbih__title { margin: 0 0 6px !important; }
.lbih__content > * { margin: 0 0 0.85em !important; }
.lbih__content > *:last-child { margin-bottom: 0 !important; }

.lbih__content img {
	max-width: 100%;
	height: auto;
}

.lbih__close {
	position: absolute;
	top: 4px;
	right: 6px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.5;
}

.lbih__close:hover { opacity: 1; }

/* ---- Telas pequenas: painel fixo, sem risco de estouro ---- */

@media ( max-width: 600px ) {
	.lbih:not( .lbih--anchored-tip ) .lbih__tip {
		position: fixed;
		top: auto !important;
		bottom: 12px !important;
		left: 50% !important;
		right: auto !important;
		margin-left: 0 !important;
		width: min( 92vw, 360px );
		transform: translate( -50%, 8px );
		z-index: 9999;
	}

	.lbih:not( .lbih--anchored-tip ) .lbih__point.is-open .lbih__tip {
		transform: translate( -50%, 0 );
	}

	.lbih:not( .lbih--anchored-tip ) .lbih__tip::after {
		display: none;
	}

	/* Fallback aplicado pelo JS: algum ancestral cria containing block
	   (transform/filter/contain) e o position:fixed ancoraria nele em vez da
	   viewport. O balão continua preso ao ponto, só mais estreito. */
	.lbih--anchored-tip {
		--lbih-tip-w: min( 260px, 64vw );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lbih__spot,
	.lbih__tip {
		transition: none;
	}

	.lbih__spot::before {
		animation: none;
	}
}