/* Shop highlights — a rail of shop tiles.
 * -------------------------------------------------------------------------
 * The tiles themselves are the shop's: .lob-card and its parts are styled by
 * lobshop-browse.css and nothing here repeats them. This file lays out the
 * rail, and draws the scrollbar under it — the same one the Upcoming events
 * strip uses, rebuilt here because the two live in different plugins and
 * either has to be able to change without the other.
 */

.lobhl {
	--lobhl-ink: #181617;
	--lobhl-cell: #dcdcdc;
	--lobhl-gap: 20px;
	--lobhl-w: 320px;
	--lobhl-inset: 35px;

	box-sizing: border-box;
	width: 100%;
	max-width: calc( 1000px + var(--lobhl-inset) * 2 );
	margin: 60px auto;
	padding-left: var(--lobhl-inset);
	padding-right: var(--lobhl-inset);
	font-family: "CoFoSans Regular", "CoFo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--lobhl-ink);
}

.lobhl__title {
	margin: 0 0 18px;
	font-size: clamp( 26px, 3vw, 40px );
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

.lobhl__rail {
	display: flex;
	align-items: flex-start;
	gap: var(--lobhl-gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	/* The rail scrolls, but its own scrollbar is replaced by the drawn one
	   below — two scrollbars for one rail is one too many. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.lobhl__rail::-webkit-scrollbar { display: none; }

.lobhl__item {
	flex: 0 0 var(--lobhl-w);
	max-width: var(--lobhl-w);
}

/* ---- the drawn scrollbar ---- */
.lobhl__bar {
	position: relative;
	height: 15px;          /* the handle's height; the line sits in the middle */
	margin-top: 26px;
}

.lobhl__bar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	background: var(--lobhl-ink);
}

.lobhl__handle {
	position: absolute;
	top: 0;
	left: 0;
	width: 70px;
	height: 15px;
	box-sizing: border-box;
	border: 3px solid var(--lobhl-ink);
	border-radius: 8px;                /* fully rounded ends at 15px tall */
	background: var(--lobhl-cell);     /* page colour, so it reads as an outline on the line */
	cursor: grab;
	transition: border-color 0.14s ease, transform 0.14s ease;
}

.lobhl__handle[hidden] { display: none; }
.lobhl__handle:active { cursor: grabbing; }

/* Hover only where there is a real pointer — on a touch screen :hover sticks
   after a tap and the handle would stay green and enlarged. */
@media (hover: hover) {
	.lobhl__handle:hover {
		border-color: #00a95c;
		transform: scale( 1.1 );
	}
}

@media (max-width: 1000px) {
	.lobhl { --lobhl-inset: 15px; }
}

@media (max-width: 640px) {
	.lobhl {
		margin: 25px auto;
		--lobhl-gap: 10px;
	}
	/* Two to a screen, as the events strip does. */
	.lobhl__item {
		flex-basis: calc( ( 100% - var(--lobhl-gap) ) / 2 );
		max-width: calc( ( 100% - var(--lobhl-gap) ) / 2 );
	}
}

@media (prefers-reduced-motion: reduce) {
	.lobhl__rail { scroll-behavior: auto; }
	.lobhl__handle { transition: none; }
}