/* moments (templates/components/moments.html): the chip strip over the gallery,
 * and, when the event has a Programme too, the one row of its sessions with their
 * moments (programme_row, .moments--programme, drawn where the first of the two
 * blocks is). It scrolls sideways inside itself; min-width: 0
 * keeps it from widening its grid or flex parent, and so the page, at 390 px.
 * Templates shape the chips with --chip-r (their corners). */

.moments { --chip-r: 999px; min-width: 0; }
/* position: relative on the strip and each chip keeps the chips' visually hidden
   counts (.sr-only, absolutely positioned) inside the scroller, so they can't
   widen the page from where they would sit off to the right. */
.moments__strip {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 2px 0 8px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.moments__strip > li { flex: none; scroll-snap-align: start; }
.moment-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border);
  border-radius: var(--chip-r);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.moment-chip--all, .moment-chip--bare { padding-left: 14px; }
.moment-chip:hover { color: var(--ink); border-color: var(--border-strong); }
.moment-chip.is-on, .moment-chip.is-on:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.moment-chip__cover {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tile);
}
.moment-chip__count { font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.7; }
.moment-chip:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* The programme's row: a session with several moments has a chevron; chosen (it
   or one of its moments), its moments follow its chip on a band. */
.moment-chip__more { flex: none; margin: 0 -4px 0 -2px; opacity: 0.7; }
.moment-chip.is-within { border-color: var(--ink); }
.moments__session.is-open {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: var(--chip-r);
  background: var(--tile);
}
.moments__session.is-open > .moment-chip { min-height: 34px; }
.moments__within { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.moments__within > li { flex: none; }
.moment-chip--within { min-height: 34px; font-size: 13px; }