/* L44 Posters — the wheel.
 * -------------------------------------------------------------------------
 * Straight from the preview that was approved. The panels are placed by the
 * script; this sets up the space they stand in.
 */

/* The space either side comes from the section, which carries what the
   gallery was set to. The figures here are only what to fall back on. */
.l44g--wheel { margin: var(--l44g-above, 60px) 0 var(--l44g-below, 60px); }

@media (max-width: 700px) {
	/* Less room around it on a phone.
	   
	   The wheel is far taller than the line here — the poster takes the full
	   width, so its height follows — and the sixty either side that suits a
	   short section leaves the page looking half empty around a tall one. */
	.l44g--wheel { margin: var(--l44g-above-m, 24px) 0 var(--l44g-below-m, 24px); }
	.l44g--wheel .l44g__title { margin-bottom: 10px; }
}

/* The stage carries the perspective; everything inside it is in one space. */
.l44g__stage {
	position: relative;
	width: 100%;
	/* A starting figure only: the script sets the real height from the poster,
	   which is itself sized to the page. */
	height: 620px;
	perspective: 1500px;
	perspective-origin: 50% 50%;
	/* Clipped at the sides only.
	   
	   overflow: hidden clipped top and bottom too, which is what cut the panels
	   off as soon as the ring leaned — tipping it makes it taller than its
	   frame. But the clipping is still wanted left and right, or a ring set to
	   run past the screen would give the page a sideways scrollbar.
	   
	   A clip with negative top and bottom insets does exactly that: the edges
	   stay where they are, and the top and bottom are pushed six hundred pixels
	   out of the way, which is more than any lean needs. */
	overflow: visible;
	clip-path: inset( -600px 0 -600px 0 );
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
}
.l44g__stage.is-dragging { cursor: grabbing; }

/* A panel with somewhere to go says so; the rest keep the grab cursor, since
   clicking them turns the wheel rather than following anything. */
.l44g__panel[data-l44g-href]:not([data-l44g-href=""]),
.l44g__panel[data-l44g-full]:not([data-l44g-full=""]) { cursor: pointer; }

.l44g__wheel {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform-style: preserve-3d;
	will-change: transform;
}

.l44g__panel {
	position: absolute;
	transform-style: preserve-3d;
	transition: transform 0.22s ease, filter 0.3s ease;
	/* Placed by the script: turned to its own angle, then pushed out to the rim. */
}

.l44g__face, .l44g__back {
	position: absolute;
	inset: 0;
	pointer-events: none;         /* the panel answers, not its two faces */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 6px 22px rgba(24,22,23,.28);
}

/* The image takes no pointer of its own: a drag started on a poster has to
   reach the stage like any other, and a browser's own image-dragging has to be
   out of the way. Without this the wheel only turned when the drag began in
   the gaps between panels. */
.l44g__face img,
.l44g__face video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

/* The reverse of a poster: blank paper, shaded a little so the wheel reads as
   solid rather than as a ring of floating rectangles. */
.l44g__back {
	/* Seen through the gaps from the far side of the wheel, so it wants a
	   little shading of its own — a flat white reads as a hole in the page. */
	background: linear-gradient( 100deg, #ffffff 0%, #f4f2ef 45%, #e2ded9 100% );
	transform: rotateY(180deg);
}

@media (max-width: 700px) {
	.l44g__stage { height: 420px; }   /* likewise, until the script measures */
}