/* L44 Gallery — the column. Ported from the approved prototype. */

.l44g--column {
	--cg-size: 550px;   /* the picture */
	--cg-th: 50px;      /* a thumbnail */
	--cg-on: 70px;      /* the one being shown */
	--cg-tg: 30px;      /* between thumbnails */
	--cg-side: 15px;    /* between the picture and the column */
	--cg-pace: 620ms;
	--cg-blue: #62a8e5;
	--cg-green: #00a95c;
}

/* A light panel behind the picture, the thumbnails and the arrows: as wide as
   the picture and its column together, and ending where the arrows do. Only as
   wide as what is in it, so it is a card and not a band across the page. */
.l44g-cg { display: flex; justify-content: center; gap: var(--cg-side); align-items: flex-start;
	width: fit-content; max-width: 100%; margin: 0 auto; background: #efefef; }
.l44g-cg.is-flipped { flex-direction: row-reverse; }

/* The picture: the new one slides in over the old, which goes to black and
   white underneath as it is covered. */
.l44g-cg__main { flex: 0 0 auto; width: var(--cg-size); }
.l44g-cg__stage { position: relative; width: var(--cg-size); height: var(--cg-size); overflow: hidden; background: #fff; touch-action: pan-y; }
.l44g-cg__stage.can-open { cursor: zoom-in; }
.l44g-cg__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform var(--cg-pace) cubic-bezier(.22,.61,.36,1), filter var(--cg-pace) ease; }
.l44g-cg__stage img.is-under { filter: grayscale(1); z-index: 1; }
.l44g-cg__stage img.is-over { z-index: 2; }

/* The arrows: the strip gallery's, 10 below, 200 apart, centred. */
/* Centred in the 50 between the picture's foot and the panel's: 5 above,
   the 40 of the arrows, 5 below — so the panel still ends at 600. */
.l44g-cg__nav { position: relative; height: 40px; margin-top: 5px; margin-bottom: 5px; }
.l44g-cg__arrow { position: absolute; top: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0;
	background: var(--cg-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-cg__arrow--back { left: calc(50% - 100px - 20px); }
.l44g-cg__arrow--on { left: calc(50% + 100px - 20px); }
.l44g-cg__arrow:hover { background: var(--cg-green); }
.l44g-cg__arrow:active { transform: scale(.82); transition: transform 90ms ease-out; }
.l44g-cg__arrow[disabled] { opacity: .3; cursor: default; background: var(--cg-blue); }
.l44g-cg__arrow[disabled]:active { transform: none; }

/* The column: exactly the picture's height. It moves as one, and the active
   thumbnail grows from its outer edge so it stays lined up with the rest. */
.l44g-cg__col { position: relative; flex: 0 0 auto; width: var(--cg-on); height: var(--cg-size); overflow: hidden; }
.l44g-cg__track { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: var(--cg-tg);
	transition: transform var(--cg-pace) cubic-bezier(.22,.61,.36,1); }
.l44g-cg__thumb { flex: 0 0 auto; width: var(--cg-th); height: var(--cg-th); border: 0; padding: 0; margin: 0;
	background: #fff; cursor: pointer; overflow: hidden; border-radius: 0; transform-origin: left center;
	transition: width var(--cg-pace) cubic-bezier(.22,.61,.36,1), height var(--cg-pace) cubic-bezier(.22,.61,.36,1), filter .2s ease; }
.l44g-cg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.l44g-cg__thumb:not(.is-on) { filter: brightness(.9); }
.l44g-cg__thumb:not(.is-on):hover { filter: brightness(1.05); }
.l44g-cg__thumb.is-on { width: var(--cg-on); height: var(--cg-on); cursor: default; }
.l44g-cg.is-flipped .l44g-cg__track { align-items: flex-end; }
.l44g-cg.is-flipped .l44g-cg__thumb { transform-origin: right center; }

/* A phone: picture, then thumbnails as a row, then arrows. */
@media (max-width: 760px) {
	.l44g--column { --cg-size: calc(100vw - 30px); --cg-th: 44px; --cg-on: 56px; --cg-tg: 10px; }
	.l44g-cg, .l44g-cg.is-flipped { flex-direction: column; align-items: center; }
	.l44g-cg__main { display: contents; }
	.l44g-cg__stage { order: 1; }
	.l44g-cg__col { order: 2; width: var(--cg-size); height: var(--cg-on); }
	.l44g-cg__nav { order: 3; width: var(--cg-size); margin-top: 0; }
	.l44g-cg__track { flex-direction: row; height: var(--cg-on); align-items: flex-start; right: auto; }
	.l44g-cg__thumb, .l44g-cg.is-flipped .l44g-cg__thumb { transform-origin: center top; }
}

@media (prefers-reduced-motion: reduce) {
	.l44g-cg__stage img, .l44g-cg__track, .l44g-cg__thumb, .l44g-cg__arrow { transition: none !important; }
}