.img-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.img-grid figure { margin: 0; }
.img-grid a { display: block; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; background: var(--panel); }
.img-grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
.img-grid a:hover img { transform: scale(1.035); }
.img-grid figcaption { font-size: .72rem; color: var(--muted); line-height: 1.55; padding-top: .6rem; }
.gallery-pagination { margin-top: 2.5rem; text-align: center; }
.gallery-pagination ul { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.gallery-pagination a, .gallery-pagination [aria-current] { display: inline-block; padding: .4rem 1rem; border: 1px solid var(--border); border-radius: 3px; text-decoration: none; min-width: 44px; }
.gallery-pagination [aria-current] { background: var(--teal); color: var(--btn-text); border-color: var(--teal); }
.gallery-pagination p { font-size: .8rem; color: var(--muted); }
body.gallery-lightbox-open { overflow: hidden; }
.gallery-lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 4rem 5rem; border: 0; color: var(--ink); background: rgba(5, 16, 26, .97); }
.gallery-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.gallery-lightbox::backdrop { background: #05101a; }
.gallery-lightbox-img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-lightbox button { position: absolute; background: var(--panel); color: var(--teal); border: 1px solid var(--border); border-radius: 3px; min-width: 44px; min-height: 44px; font-size: 1.75rem; line-height: 1; }
.gallery-lightbox-close { top: 1rem; right: 1rem; }
.gallery-lightbox-prev, .gallery-lightbox-next { top: calc(50% - 22px); }
.gallery-lightbox-prev { left: 1rem; }
.gallery-lightbox-next { right: 1rem; }
.gallery-lightbox-counter { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; text-align: center; font-size: .8rem; margin: 0; line-height: 1.5; }
@media (max-width: 900px) { .img-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .img-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .gallery-lightbox { padding: 4.5rem .5rem 5.5rem; }
    .gallery-lightbox-prev { left: .5rem; }
    .gallery-lightbox-next { right: .5rem; }
}