/* ==========================================================================
   Galleries, lightbox and video.
   ========================================================================== */

/* --- Thumbnail grid ----------------------------------------------------- */
.shots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
         grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .shots { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .shots { grid-template-columns: repeat(4, 1fr); } }
.shots__item { margin: 0; }
.shots__link {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-flat); background: var(--surface-sunk);
  cursor: zoom-in;
}
.shots__link img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  filter: saturate(.94);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.shots__link:hover img { transform: scale(1.03); filter: saturate(1.05); }
.shots__link::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(20,18,58,.08);
  border-radius: inherit; pointer-events: none;
}

/* --- Lightbox ----------------------------------------------------------- */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center;
  gap: clamp(.5rem, 2vw, var(--s5));
  padding: clamp(1rem, 4vw, var(--s7));
  background: rgba(8, 7, 24, .93);
  backdrop-filter: blur(6px);
}
.lb[hidden] { display: none; }
.lb__stage { margin: 0; display: grid; gap: var(--s4); justify-items: center; min-width: 0; }
.lb__img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: var(--r-flat); background: #0b0a1f;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9);
}
.lb__cap { color: #cfc8e6; font-size: var(--step--1); text-align: center; max-width: 60ch; line-height: 1.5; }
.lb__cap[hidden] { display: none; }
.lb__count { position: absolute; left: 0; right: 0; bottom: clamp(.75rem, 2.5vw, var(--s5));
             text-align: center; color: #9d95c0; }

.lb__close, .lb__nav {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  color: #efe9fb; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill);
  cursor: pointer; transition: background-color var(--dur) var(--ease);
}
.lb__close:hover, .lb__nav:hover { background: rgba(255,255,255,.2); }
.lb__nav[hidden] { visibility: hidden; display: grid; }
.lb__close { position: absolute; top: clamp(.75rem, 2.5vw, var(--s5)); right: clamp(.75rem, 2.5vw, var(--s5)); }
@media (max-width: 620px) {
  .lb { grid-template-columns: 1fr; }
  .lb__nav { position: absolute; bottom: clamp(2.6rem, 8vw, 4rem); }
  .lb__nav--prev { left: 1rem; }
  .lb__nav--next { right: 1rem; }
}

/* --- Video -------------------------------------------------------------- */
.video { margin: 0; position: relative; }
.video__play {
  display: block; position: relative; width: 100%; padding: 0;
  border: 0; background: none; cursor: pointer; border-radius: var(--r-flat);
  overflow: hidden; color: inherit;
}
.video__poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
                 transition: transform .5s var(--ease), filter var(--dur) var(--ease); }
.video__play::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(11,10,31,.05) 0%, rgba(11,10,31,.62) 100%);
}
.video__play:hover .video__poster { transform: scale(1.02); filter: brightness(1.04); }

.video__button {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%;
  color: #fff; background: var(--accent);
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.75);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
  padding-left: 4px;
}
.video__play:hover .video__button { transform: translate(-50%, -50%) scale(1.07); background: var(--accent-ink); }

.video__label {
  position: absolute; z-index: 2; left: clamp(1rem, 3vw, var(--s6)); bottom: clamp(.9rem, 3vw, var(--s5));
  color: #fff; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-stretch: 110%;
  font-size: var(--step-1); letter-spacing: -.01em;
}
.video__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-flat); display: block; }

@media (prefers-reduced-motion: reduce) {
  .shots__link:hover img, .video__play:hover .video__poster { transform: none; }
}