/* works.css: owned by the works worker (065/004), design package §7 (Works with: the logo carousel). */

/*
  Without JS the eight marks are a static grid: 8 across on wide screens, 4 × 2 on medium and
  2 × 4 on narrow. carousel.js turns the region live:
    .is-live    the row drifts toward the inline-start and loops (clones appended, aria-hidden);
    .is-scroll  reduced motion: no drift, a row you scroll or drag, with Previous and Next.
  Only the row moves: a mark is never recoloured, cropped or animated on its own.
  The card under a mouse or pen gets a Gold hairline (065/019): .is-hot, set by carousel.js
  while the row drifts, since :hover doesn't follow a card moving under a still pointer; plain
  :hover in the .is-scroll row, which never drifts.
*/

.works {
  --works-tile: 200px;
  --works-tile-h: 132px;
  --works-gap: 20px;
  --works-fade: 110px;
  --works-hot: color-mix(in srgb, var(--gold) 70%, transparent); /* the hovered card's hairline */
  --works-hot-dur: 150ms;
  text-align: center;
}

.works__label {
  margin-block-end: 2rem;
}

/* ---------- The marks: a grid until carousel.js takes over ---------- */
.works__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 721px) {
  .works__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) and (orientation: landscape) {
  .works__track {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.works__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  min-height: var(--works-tile-h);
  padding: 1.25rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  transition: border-color var(--works-hot-dur) var(--ease-out);
}
/* Only the border's colour changes, so the card keeps its size and place. */
.works.is-live .works__item.is-hot {
  border-color: var(--works-hot);
}
@media (hover: hover) {
  .works.is-scroll .works__item:hover {
    border-color: var(--works-hot);
  }
}
.works__mark {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}
.works__name {
  color: var(--ivory);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ---------- The live row ---------- */
.works.is-live .works__viewport,
.works.is-scroll .works__viewport {
  overflow: hidden;
  /* Only the mask's alpha counts: the edges fade into the Night behind them. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    var(--night) var(--works-fade),
    var(--night) calc(100% - var(--works-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--night) var(--works-fade),
    var(--night) calc(100% - var(--works-fade)),
    transparent
  );
  cursor: grab;
  user-select: none;
}
.works.is-live .works__viewport {
  touch-action: pan-y;
}
.works.is-scroll .works__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.works.is-scroll .works__viewport::-webkit-scrollbar {
  display: none;
}
.works.is-dragging .works__viewport {
  cursor: grabbing;
}
.works.is-live .works__track,
.works.is-scroll .works__track {
  display: flex;
  gap: var(--works-gap);
  width: max-content;
}
.works.is-live .works__track {
  will-change: transform;
}
.works.is-live .works__item,
.works.is-scroll .works__item {
  flex: none;
  width: var(--works-tile);
}
@media (max-width: 720px) {
  .works {
    --works-tile: 140px;
    --works-tile-h: 116px;
    --works-gap: 12px;
  }
}

/* ---------- Previous and Next ----------
   No Pause button (the owner, round 2, 2026-10-15): focus still stops the drift; hover doesn't
   (round 3, 065/019).
   Previous and Next show on keyboard focus, and keep their place while hidden, so showing them
   never moves the page. With reduced motion nothing drifts, and they stay shown. */
.works__controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-block-start: 1.25rem;
}
.works__controls[hidden] {
  display: none;
}
.works__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ivory);
  font: 500 0.875rem / 1 var(--font-body);
  cursor: pointer;
  transition: opacity var(--dur-1) var(--ease-out);
}
.works__btn:hover {
  border-color: var(--border-strong);
}
.works__step {
  padding: 0;
}
.works__icon {
  width: 18px;
  height: 18px;
  flex: none;
}
/* A chevron points the way the row goes: mirrored in RTL. */
.works__icon--dir {
  transform: scaleX(var(--dir));
}

.works__step {
  opacity: 0;
  pointer-events: none;
}
.works__step:focus-visible,
.works__controls:has(:focus-visible) .works__step {
  opacity: 1;
  pointer-events: auto;
}
.works.is-scroll .works__step {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 720px) {
  .works__btn {
    min-width: var(--tap);
    min-height: var(--tap);
  }
}