/* =========================================================================
   WIFA — Gallery slider: draggable + auto-flowing
   Loaded after aboutus.css. Turns the absolutely-positioned, per-item
   CSS-keyframe marquee into a single flex track moved by one transform,
   so js/gallery-slider.js can drive it by hand (mouse/touch drag) or by
   itself (autoplay) without the two fighting each other.
   ========================================================================= */

.slider .list {
	display: flex;
	position: relative;
	width: max-content;
	min-width: 0;
	gap: 14px;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}
.slider .list.dragging {
	cursor: grabbing;
	transition: none !important;
}
.slider .list .item {
	position: relative;
	left: auto;
	animation: none !important;
	flex: 0 0 auto;
}
.slider .list .item img {
	-webkit-user-drag: none;
	user-drag: none;
}

/* A soft cue that the strip can be grabbed */
.gallery .slider { position: relative; }
.gallery .slider::after {
	content: '⇆';
	position: absolute;
	right: 10px;
	bottom: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(0,0,0,0.45);
	color: #fff;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 2;
}
.gallery .slider:hover::after {
	opacity: .85;
}
@media (hover: none) {
	.gallery .slider::after { opacity: .6; }
}