/**
 * Rodyklės paslaugų kortelių lange.
 *
 * Mygtukai dedami į patį langą (.service-modal), o ne į kortelę, nes
 * kortelė turi savo slinkimą ir neigiami atstumai joje sukurtų
 * horizontalią slinkimo juostą.
 */

.jmp-svc-nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 9999px;
	border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
	background: var(--ink-deep, #0b1730);
	color: var(--ink-soft, #b9c4da);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

/* Kortelė yra iki 54rem pločio, tai mygtukus statome tiesiai už jos krašto,
   o siaurame ekrane prispaudžiame prie ekrano krašto. */
.jmp-svc-nav--prev { left: max(0.75rem, calc(50% - 30.5rem)); }
.jmp-svc-nav--next { right: max(0.75rem, calc(50% - 30.5rem)); }

.jmp-svc-nav:hover,
.jmp-svc-nav:focus-visible {
	color: var(--accent, #e3a13c);
	border-color: var(--accent, #e3a13c);
}

.jmp-svc-nav:focus-visible {
	outline: 2px solid var(--accent, #e3a13c);
	outline-offset: 2px;
}

/* Uždarytame lange rodyklių nerodom. */
.service-modal:not(.is-open) .jmp-svc-nav {
	display: none;
}

@media (max-width: 900px) {
	/* Telefone šonuose vietos nėra, tai rodykles nuleidžiame į apačią,
	   pakankamai dideles pirštui (44 px riba). */
	.jmp-svc-nav {
		top: auto;
		bottom: 1rem;
		transform: none;
		width: 3rem;
		height: 3rem;
	}
	.jmp-svc-nav--prev { left: 1rem; right: auto; }
	.jmp-svc-nav--next { right: 1rem; left: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.jmp-svc-nav { transition: none; }
}