/* L44 Posters — the rail.
 * -------------------------------------------------------------------------
 * Straight from the preview that was approved. The posters are placed by the
 * script, so there is very little here: a strip that hides what runs past its
 * edges, and a poster that keeps its proportions.
 */

.l44g {
	/* The side inset the theme's header uses, so this heading lines up with the
	   ones above and below it. The script replaces the figure with the header's
	   real one; 35 is only what holds until it does. */
	--l44g-inset: 35px;

	/* How tall a poster is.
	   
	   A share of the window with a ceiling in pixels, rather than a fixed
	   figure. Eight hundred is comfortable on a desktop monitor and too tall
	   for a laptop, where the window is often under nine hundred — the row
	   filled the screen and the page had to be scrolled to see one poster. The
	   share settles it on every screen; the ceiling stops it growing
	   ridiculous on a tall one. Both are set from the settings. */
	--l44g-h: min( 800px, 70vh );

	margin: var(--l44g-above, 60px) 0 var(--l44g-below, 60px);
	font-family: "CoFoSans Regular", "CoFo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #181617;

	/* A layer of its own, so the posters' depths mean something only inside
	   this section.
	   
	   They run to about ninety, and a poster travelling inward is lifted a
	   little above its rank on the way — which on a quick scroll was enough to
	   reach the fixed header and pass in front of it. Isolated, the whole
	   section sits at nothing and no depth inside it can climb out, whatever
	   the piles are doing. */
	position: relative;
	z-index: 0;
	isolation: isolate;
}

/* The same measure as every other section heading: 1000px of content with the
   inset added either side, so its left edge sits under the logo. The rail
   itself is deliberately not held to this — the piles run past both edges. */
.l44g__title {
	box-sizing: border-box;
	width: 100%;
	max-width: calc( 1000px + var(--l44g-inset) * 2 );
	margin: 0 auto 18px;
	padding-left: var(--l44g-inset);
	padding-right: var(--l44g-inset);
	font-size: clamp( 26px, 3vw, 40px );
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

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

/* full width, so the piles run off both edges as they do on a wall */
/* Tall enough for the outermost poster, which is the largest: eight places out
   at two per cent a place is about 117%, so 800 becomes 940. Without the room
   the rail simply cut the tops and bottoms off the outer ones. */
.l44g__rail {
	position: relative;
	/* The poster, plus room for the outermost being 17% larger and its
	   shadow. */
	height: calc( var(--l44g-h) * 1.2 );
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}
.l44g__rail.is-dragging { cursor: grabbing; }

/* Composited, so a move is the graphics card shifting a layer rather than the
   browser redrawing the poster. With fifty-one of them that is the difference
   between a movement and a stutter — and the shadow is kept small for the same
   reason: a wide blur has to be recomputed every frame it moves. */
.l44g__sheet {
	/* No forced promotion and no backface rule.
	   
	   Both ask the browser to hold a layer per poster. On a desktop that is
	   free; on iOS, with the list repeated to make the piles endless, it is
	   dozens of layers and the phone starts recycling them — which shows as the
	   outer posters flickering when a drag ends. The browser composites during
	   a transition on its own, which is the only time it is needed. */
	position: absolute;
	top: 50%;
	left: 50%;
	height: var(--l44g-h);

	/* The shape, as a number of times taller than it is wide: 1.4 for the
	   poster the line has always used, 1 for a square. Written on the section
	   from the setting; the figure here is only what holds if it is not.
	   
	   Kept as that one number rather than as a pair, because the height a
	   phone gives the strip is worked out from the same figure below — two
	   places reading one number cannot disagree about it. */
	aspect-ratio: 1 / var(--l44g-tall, 1.4);
	background: #fff;
	box-shadow: 0 2px 10px rgba(24,22,23,.30);
	will-change: transform;
	overflow: hidden;
}
.l44g__sheet img,
.l44g__sheet video { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }

/* The hover highlight: a wash of white over the poster.
   
   A layer of its own rather than a filter or a change of opacity — a filter
   repaints the poster and fading the poster itself makes the one behind show
   through, which reads as a hole rather than a highlight. Only this layer's
   opacity changes, which the compositor handles without redrawing anything. */
.l44g__sheet::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #ffffff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease;
}

@media (hover: hover) {
	.l44g__sheet.in-pile:hover::after { opacity: 0.10; }
}

/* only the piles answer a click; the centre one is already where it belongs */
.l44g__sheet.in-pile { cursor: pointer; }

/* The one in the middle is only clickable when it has somewhere to go. */
.l44g__sheet.has-link { cursor: pointer; }

@media (max-width: 700px) {
	/* The centre poster takes most of the screen, and the piles are five deep
	   either side. Sized from the width rather than the height here: on a phone
	   the width is the scarce thing, and a fixed height would leave the poster
	   either overflowing or lost in the middle of the screen. */
	.l44g__sheet {
		width: 70vw;
		height: auto;
		top: 50%;
	}

	/* The picture is 70vw across, so it stands 70vw times its shape tall —
	   98vw for a poster, 70vw for a square. Five places out on a phone is
	   about 110%, and the strip carries that plus a little. */
	.l44g__rail { height: calc( 70vw * var(--l44g-tall, 1.4) * 1.12 + 20px ); }

	.l44g__title { font-size: clamp( 22px, 6vw, 30px ); }
	.l44g { margin: var(--l44g-above-m, 30px) 0 var(--l44g-below-m, 30px); }
}

@media (prefers-reduced-motion: reduce) {
	.l44g__sheet { transition: none !important; }
}