/* screenshots.css — store screenshots gallery */
.shots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 10px; }
.shot {
  background: #fff; border: 1.5px solid var(--ink); border-radius: 22px;
  overflow: hidden; box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: zoom-in; padding: 0; font: inherit;
}
.shot:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: 8px 8px 0 var(--blue); }
.shot img { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; object-position: top; }
.shots-wide { margin-top: 18px; }
.shots-wide figure {
  border: 1.5px solid var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink); background: var(--black); margin: 0;
}
.shots-wide img { display: block; width: 100%; height: auto; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(11, 11, 12, 0.82); }
.lightbox figure { position: relative; margin: 0; max-height: 88vh; }
.lightbox img { max-height: 82vh; width: auto; max-width: min(92vw, 420px); border-radius: 20px; border: 2px solid #fff; }
.lightbox__close {
  position: absolute; top: -16px; right: -16px; width: 42px; height: 42px;
  border-radius: 50%; border: 1.5px solid var(--ink); background: #fff;
  font-size: 1.4rem; font-weight: 800; cursor: pointer; line-height: 1;
}
.lightbox__cap { text-align: center; color: #fff; font-weight: 600; margin-top: 12px; }

@media (max-width: 960px) {
  /* All 5 shots stay reachable via horizontal scroll instead of being hidden. */
  .shots {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; gap: 14px;
    padding: 6px var(--gutter) 18px; margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: thin;
  }
  .shot { flex: 0 0 clamp(150px, 30vw, 210px); scroll-snap-align: center; }
  .shot:nth-child(n+4) { display: block; }
}

@media (max-width: 560px) {
  .shot { flex: 0 0 62vw; }
  .shot:nth-child(n+3) { display: block; }
}