/* ==========================================================================
   NAA Lean - rail navigation
   Arrows and drag affordance for the horizontally scrolling card rails.
   Loaded on both lean templates, alongside lean-redesign.css.
   ========================================================================== */

.naa-lean-rail-wrap {
	position: relative;
}

/* The rail keeps its native scrolling; we only stop snap fighting the drag. */
.naa-lean-rail.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.naa-lean-rail:focus-visible {
	outline: 2px solid var(--naa-brand);
	outline-offset: 4px;
	border-radius: var(--naa-radius);
}

.naa-lean-rail-nav {
	position: absolute;
	top: 40%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--naa-border);
	border-radius: 999px;
	background: #fff;
	color: var(--naa-brand);
	box-shadow: 0 6px 20px rgba(9, 20, 15, 0.14);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}

.naa-lean-rail-nav--prev {
	left: 4px;
}

.naa-lean-rail-nav--prev svg {
	transform: rotate(180deg);
}

.naa-lean-rail-nav--next {
	right: 4px;
}

/* Visible only when there is something to scroll to in that direction. */
.naa-lean-rail-wrap--nav.is-scrollable .naa-lean-rail-nav:not(:disabled) {
	opacity: 1;
	pointer-events: auto;
}

.naa-lean-rail-nav:hover {
	background: var(--naa-brand);
	border-color: var(--naa-brand);
	color: var(--naa-brand-fg);
}

.naa-lean-rail-nav:focus-visible {
	outline: 2px solid var(--naa-brand);
	outline-offset: 2px;
	opacity: 1;
	pointer-events: auto;
}

/* On the dark brand sections the buttons need the inverse treatment. */
.naa-lean-section--brand .naa-lean-rail-nav,
.naa-lean-next .naa-lean-rail-nav {
	background: rgba(249, 253, 251, 0.12);
	border-color: rgba(249, 253, 251, 0.35);
	color: var(--naa-brand-fg);
	box-shadow: none;
}

.naa-lean-section--brand .naa-lean-rail-nav:hover,
.naa-lean-next .naa-lean-rail-nav:hover {
	background: rgba(249, 253, 251, 0.22);
	border-color: rgba(249, 253, 251, 0.6);
	color: #fff;
}

/* Touch devices swipe; the buttons would only cover a card. */
@media (hover: none) and (pointer: coarse) {
	.naa-lean-rail-nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.naa-lean-rail-nav {
		transition: none;
	}
}