/* gallery.css — static gallery strip + lightbox slideshow, ported from
   cue-vox's gallery-strip/lightbox. Layout only; colour via Haberdash tokens so
   it picks up the Spectra theme. Rendered by gallery.js off the lineone:project
   event. No vault ports — image srcs resolve straight off the portfolio. */

/* ---- the strip (thumbnails in a chat card) ---- */
.gallery-strip { position: relative; width: 100%; margin-top: var(--space-sm, 0.5rem); }
.gallery-strip__title {
  margin: 0 0 var(--space-xs, 0.25rem);
  font-size: var(--font-size-sm, 0.8125rem);
  color: var(--text-secondary, #9aa0a6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gallery-strip__track {
  display: flex; gap: var(--space-xs, 0.25rem);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-xs, 0.25rem);
}
.gallery-strip__track::-webkit-scrollbar { height: 4px; }
.gallery-strip__track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.gallery-strip__item {
  flex: 0 0 120px; scroll-snap-align: start;
  appearance: none; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--bg-surface, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 0.25rem);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.gallery-strip__item:hover { border-color: var(--accent, rgba(255,255,255,0.35)); transform: translateY(-1px); }
.gallery-strip__thumb { display: block; width: 100%; height: 80px; object-fit: cover; }
.gallery-strip__item--error .gallery-strip__thumb { display: none; }
.gallery-strip__item--error {
  display: flex; align-items: center; justify-content: center; min-height: 80px;
  background: rgba(255,255,255,0.02);
}
.gallery-strip__item--error::before {
  content: "image missing"; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #9aa0a6);
}

/* ---- the lightbox (fullscreen slideshow) ---- */
.lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb__backdrop { position: absolute; inset: 0; background: rgba(6,6,8,0.92); backdrop-filter: blur(6px); }
.lb__stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm, 0.5rem);
  width: min(1100px, 92vw); max-height: 92vh;
}
.lb__img {
  max-width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: var(--radius-md, 0.5rem); background: rgba(0,0,0,0.3);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
/* Loading state — dim + blur until the slide decodes, so a slow image reads as
   "loading" instead of a blank stage. Cleared on load/error by gallery.js. */
.lb__img.is-loading { opacity: 0.4; filter: blur(10px); }
.lb__caption {
  color: var(--text-primary, #e9e9ee); font-size: var(--font-size-sm, 0.875rem);
  text-align: center; line-height: 1.5; max-width: 60ch; min-height: 1.4em;
}
.lb__bar { display: flex; align-items: center; justify-content: center; gap: var(--space-md, 0.75rem); }
.lb__counter { color: var(--text-secondary, #9aa0a6); font-size: var(--font-size-sm, 0.875rem); font-variant-numeric: tabular-nums; }
.lb__nav, .lb__close, .lb__pause {
  appearance: none; cursor: pointer;
  background: rgba(255,255,255,0.08); color: var(--text-primary, #e9e9ee);
  border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-full, 999px);
  width: 2.5rem; height: 2.5rem; font-size: 1.1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lb__nav:hover, .lb__close:hover, .lb__pause:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.3); }
/* The pause/play toggle is a hair smaller and quieter than the nav arrows — it's
   a secondary control, not part of the primary prev/next rhythm. */
.lb__pause { width: 2rem; height: 2rem; font-size: 0.8rem; color: var(--text-secondary, #9aa0a6); }
.lb__close { position: absolute; top: -0.5rem; right: -0.5rem; z-index: 2; }
@media (max-width: 640px) {
  .lb__close { top: 0.25rem; right: 0.25rem; }
  .lb__img { max-height: 68vh; }
}