/* user.photos-list/css/scrollable-horizontal.css
 *
 * Vanilla replacement for jQuery Tools .scrollable(). CSS now does
 * the work that overflow:hidden + width:20000em did before, using
 * a flex container with native horizontal scrolling and snap points.
 *
 * Mobile-first: .scrollable occupies 100% of its parent; on ≥768px
 * the original 880px fixed width is restored so 6 thumbs fit per page.
 */
.scrollable {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	max-width: 880px;
	height: 120px;
	border: 1px solid var(--c-border-strong, #ccc);
	background: var(--c-surface, #fafafa);
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* Hide scrollbar on WebKit (mobile) but keep functionality */
	scrollbar-width: thin;
}

/* Outer wrapper: arrows | scrollable | arrows (flex) */
.photos-list-carousel {
	display: flex;
	align-items: center;
	gap: var(--sp-2, 8px);
	width: 100%;
}

.scrollable .items {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	/* No width:20000em — native scrollbar handles overflow. */
}

.items > div,
.photos-list-page {
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	scroll-snap-align: start;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 4px;
	padding: 0 4px;
	box-sizing: border-box;
}

/* single scrollable item */
.scrollable img {
	float: none;
	margin: 10px 2px 20px 2px;
	background-color: #fff;
	padding: 2px;
	border: 1px solid var(--c-border, #ccc);
	height: 80px;
	width: auto;
	max-width: 130px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

/* active item (kept for compatibility with old markup, no longer used) */
.scrollable .active {
	border: 2px solid #000;
	position: relative;
	cursor: default;
}

/* Desktop (≥768px): restore original 880px scrollable width so the
   6-thumbs-per-page layout designed for 2008 desktops still works. */
@media (min-width: 768px) {
	.scrollable {
		width: 880px;
		flex: 0 0 880px;
	}
	.items > div,
	.photos-list-page {
		flex: 0 0 880px;
		width: 880px;
		min-width: 880px;
	}
	.scrollable img {
		height: 90px;
	}
}

/* На мобиле (<768) arrows занимают место и плохо читаются — скрыть.
   Native swipe + scroll-snap достаточно для навигации. */
@media (max-width: 767px) {
	.photos-list-carousel {
		justify-content: center;
	}
	.photos-list-carousel > a.browse {
		display: none;
	}
}