/* =========================================================
   GALERÍA PÚBLICA
========================================================= */

.public-gallery-section {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfe
        );
}


.public-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.public-gallery-item {
    position: relative;

    overflow: hidden;

    width: 100%;

    aspect-ratio:
        4 / 3;

    padding: 0;

    border: none;

    border-radius: 18px;

    background: #edf1f5;

    cursor: pointer;

    box-shadow:
        0 9px 30px
        rgba(
            15,
            23,
            42,
            .055
        );
}


.public-gallery-item.featured {
    grid-column:
        span 2;

    grid-row:
        span 2;

    aspect-ratio:
        auto;

    min-height:
        100%;
}


.public-gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease;
}


.public-gallery-item:hover img {
    transform:
        scale(1.055);
}


.gallery-hover {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 22px;

    background:
        rgba(
            15,
            23,
            42,
            .28
        );

    opacity: 0;

    transition:
        opacity .25s ease;
}


.public-gallery-item:hover
.gallery-hover {
    opacity: 1;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox {
    position: fixed;

    inset: 0;

    z-index: 5000;

    padding: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            4,
            8,
            17,
            .92
        );

    backdrop-filter:
        blur(8px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.gallery-lightbox.show {
    opacity: 1;

    visibility: visible;
}


.gallery-lightbox-image {
    max-width:
        min(
            1100px,
            87vw
        );

    max-height:
        86vh;

    object-fit:
        contain;

    border-radius:
        16px;

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            .35
        );
}


.gallery-lightbox-close {
    position: absolute;

    top: 22px;
    right: 24px;

    width: 46px;
    height: 46px;

    border: none;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    background:
        rgba(
            255,
            255,
            255,
            .10
        );

    font-size: 18px;

    cursor: pointer;

    transition: .2s ease;
}


.gallery-lightbox-nav {
    position: absolute;

    top: 50%;

    width: 48px;
    height: 48px;

    transform:
        translateY(-50%);

    border: none;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    background:
        rgba(
            255,
            255,
            255,
            .10
        );

    font-size: 18px;

    cursor: pointer;

    transition: .2s ease;
}


.gallery-lightbox-nav:hover,
.gallery-lightbox-close:hover {
    background:
        rgba(
            255,
            255,
            255,
            .18
        );
}


.gallery-lightbox-prev {
    left: 24px;
}


.gallery-lightbox-next {
    right: 24px;
}


.gallery-lightbox-counter {
    position: absolute;

    bottom: 20px;

    padding:
        7px 12px;

    border-radius: 20px;

    color:
        rgba(
            255,
            255,
            255,
            .82
        );

    background:
        rgba(
            255,
            255,
            255,
            .09
        );

    font-size: 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .public-gallery-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .public-gallery-item.featured {
        grid-column:
            span 2;

        min-height:
            330px;
    }
}


/* =========================================================
   TELÉFONO
========================================================= */

@media (max-width: 520px) {

    .public-gallery-grid {
        gap: 8px;
    }


    .public-gallery-item {
        border-radius:
            12px;
    }


    .public-gallery-item.featured {
        min-height:
            260px;
    }


    .gallery-lightbox {
        padding:
            15px;
    }


    .gallery-lightbox-prev {
        left: 10px;
    }


    .gallery-lightbox-next {
        right: 10px;
    }


    .gallery-lightbox-nav {
        width: 40px;
        height: 40px;
    }


    .gallery-lightbox-close {
        width: 40px;
        height: 40px;

        top: 12px;
        right: 12px;
    }
}