/* L44 Gallery — the strip. Ported from the prototype that was approved. */

.l44g--strip {
	--fs-h: 500px;       /* every picture's height */
	--fs-land: 750px;    /* a landscape's width */
	--fs-vert: 330px;    /* an upright's width */
	--fs-gap: 15px;
	--fs-pace: 560ms;
	--fs-ink: #181617;
	--fs-page: #dcdcdc;
	--fs-blue: #62a8e5;
	--fs-green: #00a95c;
}

/* The whole width of the window, so pictures run off both edges. */
.l44g-fs { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; user-select: none; }

/* No will-change: it kept the whole strip — some 25,000 pixels wide on a
   desktop — as one layer on the graphics card for as long as the page was
   open. The browser lifts it onto its own layer by itself while it moves. */
.l44g-fs__track { display: flex; gap: var(--fs-gap); align-items: flex-start;
	transition: transform var(--fs-pace) cubic-bezier(.22,.61,.36,1); }

.l44g-fs__item { position: relative; flex: 0 0 auto; height: var(--fs-h); cursor: pointer; }
.l44g-fs__item--l { width: var(--fs-land); }
.l44g-fs__item--v { width: var(--fs-vert); }
.l44g-fs__item--auto { width: var(--fs-land); }   /* until its shape is known */
.l44g-fs__item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* Everything but the centre sits a little back and comes forward under the
   pointer. Done with a thin veil over the picture rather than a filter on it:
   a filter makes the browser redraw each large picture separately whenever
   anything moves, and a strip has dozens. A veil is only a fade. */
.l44g-fs__item::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.l44g-fs__item:not(.is-on)::after { opacity: .1; }
.l44g-fs__item:not(.is-on):hover::after { opacity: 0; }
.l44g-fs__item.is-on { cursor: default; }
.l44g-fs__item.is-on[data-l44g-full] { cursor: zoom-in; }

/* The arrows: the artworks ones, centred on the window, 200 apart, 20 below. */
.l44g-fs__nav { position: relative; height: 40px; margin: 20px 0 0; }
.l44g-fs__arrow { position: absolute; top: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0;
	background: var(--fs-blue); color: #fff; cursor: pointer;
	font-family: inherit; font-size: 19px; font-weight: 700; line-height: 40px;
	transition: transform 320ms cubic-bezier(.34,1.56,.64,1), background-color 160ms ease, opacity 200ms ease; }
.l44g-fs__arrow--back { left: calc(50% - 100px - 20px); }
.l44g-fs__arrow--on { left: calc(50% + 100px - 20px); }
.l44g-fs__arrow:hover { background: var(--fs-green); }
.l44g-fs__arrow:active { transform: scale(.82); transition: transform 90ms ease-out; }
.l44g-fs__arrow[disabled] { opacity: .3; cursor: default; background: var(--fs-blue); }
.l44g-fs__arrow[disabled]:active { transform: none; }

/* The phone scrollbar — the thumbnail strip's own. Hidden on a desktop. */
.l44g-fs__bar { display: none; position: relative; height: 15px; margin: 26px 15px 0; }
.l44g-fs__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--fs-ink); }
.l44g-fs__handle { position: absolute; top: 0; left: 0; width: 70px; height: 15px; box-sizing: border-box;
	border: 3px solid var(--fs-ink); border-radius: 8px; background: var(--fs-page); cursor: grab; touch-action: none;
	transition: left var(--fs-pace) cubic-bezier(.22,.61,.36,1); }
.l44g-fs__handle.is-held { cursor: grabbing; transition: none; }

/* A phone: a landscape fills the width, everything takes its height, so an
   upright is narrower and its neighbours show either side of it. */
@media (max-width: 760px) {
	.l44g--strip {
		--fs-land: calc(100vw - 30px);
		--fs-h: calc((100vw - 30px) * 500 / 750);
		--fs-vert: calc((100vw - 30px) * 500 / 750 * 330 / 500);
		--fs-gap: 10px;
	}
	.l44g-fs__nav { display: none; }
	.l44g-fs__bar { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.l44g-fs__track, .l44g-fs__handle, .l44g-fs__item, .l44g-fs__arrow { transition: none !important; }
}