/*
 * The post's screenshots: carousels of several, figures of one, and the larger view either opens.
 *
 * Every image sits on the same 16:9 stage, letterboxed on the panel tone, so a carousel keeps its height from slide to slide and a strip
 * or a square crop never resizes the page under the reader.
 */

.carousel-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.carousel-title {
  margin-right: auto;
  font-size: var(--t-small);
  font-weight: 600;
}

.carousel-count {
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  min-width: 4.5em;
  text-align: right;
}

.carousel-head .btn {
  width: 32px;
  height: 32px;
  padding: 0;
}

/* Native scrolling does the work: a swipe, a trackpad or the arrow keys move one slide and snap. */
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.slide,
.figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.figure {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  overflow: hidden;
}

.slide-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--surface-2);
  cursor: zoom-in;
}

.slide-open:focus-visible {
  outline-offset: -3px;
}

.slide-open img {
  display: block;
  width: 100%;
  height: auto;
}

/* A carousel's slides share the stage; a figure stands alone and keeps its own shape. */
.slide .slide-open img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* For a carousel of browser-window screenshots, which run about twice as wide as they are tall. */
.stage-2x1 .slide .slide-open img {
  aspect-ratio: 2 / 1;
}

.slide figcaption,
.figure figcaption {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Which game a screenshot is from, where a carousel mixes them. */
.tag {
  display: inline-block;
  margin-right: var(--s1);
  padding: 0 var(--s2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: var(--t-caption);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  vertical-align: 1px;
}

.tag.real {
  border-color: var(--accent);
  color: var(--accent);
}

/* The larger view. */

.lightbox {
  width: min(96vw, 1840px);
  max-width: none;
  max-height: 96vh;
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-0);
  color: var(--text);
  box-shadow: var(--shadow-overlay);
}

.lightbox::backdrop {
  background: rgb(0 0 0 / 78%);
}

.lightbox-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.lightbox-count {
  margin-right: auto;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.lightbox-head .btn {
  width: 32px;
  height: 32px;
  padding: 0;
}

.lightbox img {
  display: block;
  width: 100%;
  height: calc(96vh - 140px);
  object-fit: contain;
  background: var(--surface-2);
  border-radius: var(--r);
}

.lightbox-caption {
  margin-top: var(--s3);
  font-size: var(--t-small);
  color: var(--text-muted);
}