.photo-grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); gap: .65rem; }
.photo-card { position: relative; min-height: 250px; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; border: 0; background: var(--navy); cursor: zoom-in; }
.photo-card.featured { grid-column: span 2; }
.photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.photo-card:hover img, .photo-card:focus-visible img { transform: scale(1.035); filter: brightness(.82); }
.photo-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.photo-card > span { position: absolute; left: .7rem; bottom: .7rem; padding: .42rem .65rem; background: rgba(6,18,28,.92); color: white; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.photo-card > span.after { background: var(--orange); color: var(--ink); }

.lightbox { width: min(1100px, 94vw); height: min(90vh, 860px); padding: 0; overflow: hidden; border: 0; background: #06121c; color: white; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.lightbox::backdrop { background: rgba(2,8,13,.88); backdrop-filter: blur(5px); }
.lightbox figure { width: 100%; height: 100%; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lightbox figure img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lightbox figcaption { padding: .9rem 4rem; text-align: center; font-size: .82rem; color: #cfdae2; }
.lightbox-close, .lightbox-nav { position: absolute; z-index: 2; display: grid; place-items: center; border: 0; background: rgba(6,18,28,.84); color: white; cursor: pointer; }
.lightbox-close { top: .65rem; right: .65rem; width: 42px; height: 42px; font-size: 1.9rem; line-height: 1; }
.lightbox-nav { top: 50%; width: 46px; height: 64px; transform: translateY(-50%); font-size: 2.5rem; }
.lightbox-nav.previous { left: .65rem; }
.lightbox-nav.next { right: .65rem; }
.lightbox-close:hover, .lightbox-nav:hover, .lightbox-close:focus-visible, .lightbox-nav:focus-visible { background: var(--orange); color: var(--ink); }

@media (max-width: 960px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .photo-grid { display: flex; gap: .75rem; padding: 0 1.15rem .9rem 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .photo-card, .photo-card.featured { flex: 0 0 84%; min-height: 360px; aspect-ratio: 4 / 5; grid-column: auto; scroll-snap-align: start; }
  .lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; }
  .lightbox figcaption { padding: .85rem 3.8rem; }
  .lightbox-nav { width: 42px; height: 58px; }
  .lightbox-nav.previous { left: .35rem; }
  .lightbox-nav.next { right: .35rem; }
}