/* ─────────────────────────────────────────────────────────────────────────
   CLOUDINARY MEDIA GRID + LIGHTBOX
───────────────────────────────────────────────────────────────────────── */

/* hidden slides must never intercept clicks */
.slide-img:not(.visible) {
  pointer-events: none !important;
}

/* ── GRID: absolutely fills the entire works-right panel ─────────────────── */
.work-grid {
  position: absolute;
  inset: 0;
  padding: 12px 12px 56px 12px; /* small gap around edges; bottom clears counter */
  box-sizing: border-box;
}

.work-grid-inner {
  display: grid;
  /* columns set dynamically by JS per-project */
  gap: 16px;
  width: 100%;
  height: 100%;
}

/* ── CELLS: 4:5 ratio tiles that fill their grid area ────────────────────── */
.work-grid-cell {
  position: relative;
  cursor: pointer;
  background: #0c140c;
  overflow: hidden;
  /* aspect-ratio set per-project by JS */
  /* no opacity animation on cells — slide-img handles the fade */
  transition: filter 0.2s ease;
  min-height: 0;
  min-width: 0;
}

.slide-img:not(.visible) .work-grid-cell {
  pointer-events: none;
}

.work-grid-cell:hover {
  filter: brightness(1.12);
}

/* image fills the cell completely — cover crops to fit, no empty space */
.work-grid-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── VIDEO CELLS ─────────────────────────────────────────────────────────── */
.work-grid-cell--video .cell-media-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.work-grid-cell--video .cell-media-icon svg {
  width: 28px;
  height: 28px;
  color: #f0ece4;
  opacity: 0.75;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.8));
}

.work-grid-cell--video:hover .cell-media-icon {
  opacity: 0;
}

/* ── AUDIO CELLS ─────────────────────────────────────────────────────────── */
.work-grid-cell--audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0d160d;
  transition: background 0.2s ease, filter 0.2s ease;
}

.work-grid-cell--audio:hover { background: #131e13; }

.audio-cell-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.work-grid-cell--audio:hover .audio-cell-bars { opacity: 0.6; }
.audio-cell-bars span { display: block; width: 2px; background: #f0ece4; border-radius: 1px; }
.audio-cell-bars span:nth-child(1)  { height: 30%; }
.audio-cell-bars span:nth-child(2)  { height: 55%; }
.audio-cell-bars span:nth-child(3)  { height: 80%; }
.audio-cell-bars span:nth-child(4)  { height: 45%; }
.audio-cell-bars span:nth-child(5)  { height: 90%; }
.audio-cell-bars span:nth-child(6)  { height: 60%; }
.audio-cell-bars span:nth-child(7)  { height: 100%; }
.audio-cell-bars span:nth-child(8)  { height: 70%; }
.audio-cell-bars span:nth-child(9)  { height: 50%; }
.audio-cell-bars span:nth-child(10) { height: 85%; }
.audio-cell-bars span:nth-child(11) { height: 40%; }
.audio-cell-bars span:nth-child(12) { height: 25%; }

.cell-audio-icon { display: flex; align-items: center; justify-content: center; }
.cell-audio-icon svg { width: 18px; height: 18px; color: #f0ece4; opacity: 0.4; transition: opacity 0.2s ease; }
.work-grid-cell--audio:hover .cell-audio-icon svg { opacity: 0.75; }

.audio-cell-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--text-xs, 0.5625rem);
  color: #555;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}
.work-grid-cell--audio:hover .audio-cell-label { color: #f0ece4; }

/* ── LIGHTBOX ────────────────────────────────────────────────────────────── */
#lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
#lightbox.open { opacity: 1; pointer-events: all; }
#lightbox-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.92); cursor: pointer; }
#lightbox-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  max-width: 92vw; max-height: 88vh;
}
#lightbox-close {
  position: absolute; top: 20px; right: 24px; z-index: 3;
  background: none; border: none; color: #f0ece4; font-size: 1.6rem;
  cursor: pointer; opacity: 0.45; transition: opacity 0.15s ease;
  line-height: 1; padding: 4px 8px;
}
#lightbox-close:hover { opacity: 1; }
#lightbox-img { max-width: 90vw; max-height: 86vh; object-fit: contain; display: block; }
#lightbox-video { max-width: 90vw; max-height: 86vh; display: block; outline: none; background: #000; }

#lightbox-audio-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 44px 40px; min-width: min(420px, 80vw);
  border: 1px solid rgba(237,76,12,0.12); background: rgba(15,24,15,0.97);
}
#lightbox-audio-label {
  font-family: 'Share Tech Mono', monospace; font-size: var(--text-sm, 0.6875rem);
  color: #f0ece4; text-align: center; letter-spacing: 0.06em; text-transform: lowercase;
}
#lightbox-audio-viz { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
#lightbox-audio-viz span { display: block; width: 3px; background: #ed4c0c; border-radius: 2px; height: 4px; }
#lightbox-audio-viz.playing span { animation: audioBar 0.8s ease-in-out infinite alternate; }
@keyframes audioBar { 0% { height: 4px; } 100% { height: 38px; } }
#lightbox-audio-viz span:nth-child(1)  { animation-duration: 0.55s; }
#lightbox-audio-viz span:nth-child(2)  { animation-duration: 0.72s; }
#lightbox-audio-viz span:nth-child(3)  { animation-duration: 0.61s; }
#lightbox-audio-viz span:nth-child(4)  { animation-duration: 0.80s; }
#lightbox-audio-viz span:nth-child(5)  { animation-duration: 0.48s; }
#lightbox-audio-viz span:nth-child(6)  { animation-duration: 0.90s; }
#lightbox-audio-viz span:nth-child(7)  { animation-duration: 0.65s; }
#lightbox-audio-viz span:nth-child(8)  { animation-duration: 0.75s; }
#lightbox-audio-viz span:nth-child(9)  { animation-duration: 0.52s; }
#lightbox-audio-viz span:nth-child(10) { animation-duration: 0.83s; }
#lightbox-audio-viz span:nth-child(11) { animation-duration: 0.69s; }
#lightbox-audio-viz span:nth-child(12) { animation-duration: 0.58s; }
#lightbox-audio-viz span:nth-child(13) { animation-duration: 0.77s; }
#lightbox-audio-viz span:nth-child(14) { animation-duration: 0.44s; }
#lightbox-audio-viz span:nth-child(15) { animation-duration: 0.88s; }
#lightbox-audio-viz span:nth-child(16) { animation-duration: 0.63s; }
#lightbox-audio-viz span:nth-child(17) { animation-duration: 0.71s; }
#lightbox-audio-viz span:nth-child(18) { animation-duration: 0.50s; }
#lightbox-audio-viz span:nth-child(19) { animation-duration: 0.84s; }
#lightbox-audio-viz span:nth-child(20) { animation-duration: 0.67s; }
#lightbox-audio-viz span:nth-child(21) { animation-duration: 0.78s; }
#lightbox-audio-viz span:nth-child(22) { animation-duration: 0.56s; }
#lightbox-audio-viz span:nth-child(23) { animation-duration: 0.92s; }
#lightbox-audio-viz span:nth-child(24) { animation-duration: 0.60s; }
#lightbox-audio { width: 100%; max-width: 340px; outline: none; accent-color: #ed4c0c; }