/* Lineup: cut-outs on an arc (layout by lineup.js; a swipeable row without it). */
.lineup {
  position: relative;
  /* Keeps the figures' z-order inside the section (never above the sticky header). */
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding-block: 1.5rem;
  overflow: hidden;
  background: var(--color-background);
  color: var(--color-foreground);
}

.lineup__heading {
  margin: 0;
  padding-inline: var(--page-margin);
  text-align: center;
}

/* No-JS / not-yet-ready: a row of figures standing on one line. */
.lineup__stage {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  padding-inline: var(--page-margin);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  outline: none;
}

.lineup__figure {
  flex: 0 0 auto;
  scroll-snap-align: center;
}

.lineup__image {
  display: block;
  width: auto;
  height: var(--lineup-height, 60svh);
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Arc mode (JS ready): figures are absolutely placed and transformed. */
.lineup.is-ready .lineup__stage {
  position: relative;
  display: block;
  overflow: hidden;
  scroll-snap-type: none;
  cursor: grab;
  touch-action: pan-y;
}

.lineup.is-ready .lineup__stage:active {
  cursor: grabbing;
}

.lineup.is-ready .lineup__figure {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform-origin: 50% 100%;
  will-change: transform;
}

.lineup.is-ready .lineup__figure[data-hidden] {
  visibility: hidden;
}

.lineup__stage:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: -0.5rem;
}

/* Hover treatments (pointer devices only). */
@media (hover: hover) {
  .lineup--hover-grayscale .lineup__image {
    filter: grayscale(1);
    transition: filter 400ms ease;
  }

  .lineup--hover-grayscale .lineup__figure:hover .lineup__image,
  .lineup--hover-grayscale .lineup__figure.is-active .lineup__image {
    filter: none;
  }

  .lineup--hover-lift .lineup__image {
    transition: translate 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .lineup--hover-lift .lineup__figure:hover .lineup__image {
    translate: 0 -2%;
  }
}

.lineup__footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-inline: var(--page-margin);
}

.lineup__title {
  grid-column: 2;
  min-height: 1.5em;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

.lineup__title:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.lineup__controls {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.lineup__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.125rem;
  cursor: pointer;
}

.lineup__arrow:focus-visible {
  outline: 1px solid currentColor;
}

.lineup:not(.is-ready) :is(.lineup__title, .lineup__arrow) {
  display: none;
}

@media (max-width: 749px) {
  .lineup {
    min-height: 85svh;
  }

  .lineup__image {
    height: min(var(--lineup-height, 60svh), 58svh);
  }

  .lineup__footer {
    grid-template-columns: 1fr auto;
  }

  .lineup__title {
    grid-column: 1;
    text-align: start;
  }

  .lineup__controls {
    grid-column: 2;
  }
}