.public-gallery {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 42px 0 58px;
    font-family: 'Poppins', Arial, sans-serif;
}

.public-gallery__header { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.public-gallery__header > p { margin: 0 0 7px; color: #17d2ed; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.public-gallery__header h1 { margin: 0; color: #f2f7fb; font-size: clamp(32px, 4vw, 46px); font-weight: 800; }
.public-gallery__header h1 span { color: transparent; background: linear-gradient(90deg, #08d7ec, #5366f5, #a33df0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.public-gallery__header > div { margin-top: 9px; color: #9eb0c4; font-size: 13px; line-height: 1.65; }

.public-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.public-gallery__item { position: relative; min-width: 0; height: 330px; padding: 0; overflow: hidden; background: #0e1b2b; border: 1px solid rgba(116, 160, 198, .2); border-radius: 14px; cursor: zoom-in; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.public-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.public-gallery__item:hover img, .public-gallery__item:focus-visible img { transform: scale(1.045); }
.public-gallery__item:focus-visible { outline: 3px solid rgba(23, 210, 237, .55); outline-offset: 3px; }
.public-gallery__caption { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 38px 18px 16px; color: #fff; background: linear-gradient(transparent, rgba(1, 10, 20, .88)); text-align: left; }
.public-gallery__caption strong { color: #fff !important; font-size: 13px; font-weight: 600; }
.public-gallery__caption small { overflow: hidden; color: #ced9e5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.public-gallery__empty { padding: 60px 20px; color: #9eb0c4; background: rgba(255, 255, 255, .025); border: 1px solid rgba(116, 160, 198, .2); border-radius: 14px; text-align: center; }
.public-gallery__empty > span { display: block; margin-bottom: 8px; color: #17d2ed; font-size: 35px; }
.public-gallery__empty h2 { margin: 0 0 5px; color: #edf5fb; font-size: 20px; }
.public-gallery__empty p { margin: 0; font-size: 12px; }

.gallery-lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 50px 70px; overflow: hidden; color: #fff; background: rgba(0, 7, 15, .94); border: 0; }
.gallery-lightbox::backdrop { background: rgba(0, 7, 15, .82); backdrop-filter: blur(5px); }
.gallery-lightbox[open] { display: grid; place-items: center; }
.gallery-lightbox figure { display: grid; max-width: min(1100px, 82vw); max-height: 88vh; margin: 0; place-items: center; }
.gallery-lightbox figure img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; }
.gallery-lightbox figcaption { margin-top: 10px; color: #e4edf5; font-size: 13px; }
.gallery-lightbox__close, .gallery-lightbox__nav { position: absolute; z-index: 1; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); cursor: pointer; }
.gallery-lightbox__close { top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; font-size: 28px; }
.gallery-lightbox__nav { top: 50%; width: 44px; height: 60px; border-radius: 9px; font-size: 25px; transform: translateY(-50%); }
.gallery-lightbox__nav--previous { left: 20px; }
.gallery-lightbox__nav--next { right: 20px; }
.gallery-lightbox__close:hover, .gallery-lightbox__nav:hover { background: rgba(23, 210, 237, .22); border-color: #17d2ed; }

@media (max-width: 760px) {
    .public-gallery { width: min(100% - 36px, 1120px); padding-block: 28px 42px; }
    .public-gallery__grid { grid-template-columns: 1fr; }
    .public-gallery__item { height: clamp(230px, 70vw, 360px); }
    .gallery-lightbox { padding: 60px 16px; }
    .gallery-lightbox figure { max-width: 92vw; }
    .gallery-lightbox__nav { top: auto; bottom: 14px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .public-gallery__item img { transition: none; }
}