/* Gallery grid + lightbox */
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 26px; }
.gallery-filters[hidden] { display: none; }
.gallery-grid { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; }
.gal-cell[hidden] { display: none; }
.gal-item { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--blue-50); box-shadow: var(--shadow-sm); aspect-ratio: 3 / 4; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .5s ease; }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.05); }
.gal-cap { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 34px 12px 10px; color: #fff; font-size: .8125rem; font-weight: 600; line-height: 1.3; background: linear-gradient(180deg, transparent, rgba(8, 29, 56, .82)); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { opacity: 1; transform: none; }
@media (hover: none) { .gal-cap { opacity: 1; transform: none; font-size: .75rem; } }
.gal-note { margin-top: 28px; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 960px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lightbox { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: #fff; }
.lightbox::backdrop { background: rgba(6, 18, 36, .94); }
.lightbox[open] { animation: lbfade .2s ease-out; }
@keyframes lbfade { from { opacity: 0; } to { opacity: 1; } }
.lb-stage { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 56px 12px 12px; }
.lb-fig { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; max-width: min(1100px, 100%); max-height: 100%; }
.lb-img { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transition: opacity .2s; }
.is-loading .lb-img { opacity: .25; }
.lb-spin { position: absolute; top: 40%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; opacity: 0; }
.is-loading .lb-spin { opacity: 1; }
.lb-cap { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 12px 4px 0; font-size: .9375rem; color: #dbe7f5; }
.lb-count { flex: none; color: #9fb8d3; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background .15s; }
.lb-btn:hover { background: rgba(255, 255, 255, .28); }
.lb-btn .icon { width: 24px; height: 24px; }
.lb-close { top: 10px; right: 10px; }
.lb-prev { left: 10px; top: 50%; margin-top: -23px; }
.lb-next { right: 10px; top: 50%; margin-top: -23px; }
@media (max-width: 599px) {
  .lb-prev, .lb-next { top: auto; bottom: 14px; margin: 0; }
  .lb-prev { left: calc(50% - 56px); } .lb-next { right: calc(50% - 56px); }
  .lb-img { max-height: calc(100dvh - 210px); }
}