/* =====================================================
   SKIMAX GALLERY
===================================================== */

.skimax-gallery {
    width: 100%;
}


/* původní obrázky schová JS až po inicializaci */

.skimax-gallery.skimax-gallery-ready > img {
    display: none;
}


/* =====================================================
   HLAVNÍ FOTO
===================================================== */

.skimax-gallery-main {
    width: 100%;

    cursor: zoom-in;

    overflow: hidden;

    border-radius: 3rem;
}


.skimax-gallery-main img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: inherit;
}


/* =====================================================
   NÁHLEDY
===================================================== */

.skimax-gallery-thumbs {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 1.5rem;

    margin-top: 1.5rem;
}


.skimax-gallery-thumb {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 1.5rem;

    cursor: pointer;

    background: #f5f5f5;
}


.skimax-gallery-thumb img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: inherit;

    transition:
        transform .5s ease;
}


.skimax-gallery-thumb:hover img {
    transform: scale(1.05);
}


/* =====================================================
   + POČET DALŠÍCH FOTEK
===================================================== */

.skimax-gallery-more::after {
    content:
        attr(data-more);

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(9, 23, 26, .40);

    color: white;

    font-size: 2rem;

    font-weight: 700;

    pointer-events: none;
}


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

.skimax-lightbox {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 3rem;

    background:
        rgba(13, 35, 40, .72);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


.skimax-lightbox.is-open {
    display: flex;
}


/* =====================================================
   OKNO
===================================================== */

.skimax-lightbox-inner {
    position: relative;

    width:
        min(1100px, 100%);

    max-height:
        calc(100vh - 6rem);

    overflow-y: auto;

    background: #fff;

    border-radius: 3rem;

    padding:
        4rem
        4rem
        3rem;

    box-sizing: border-box;

    scrollbar-width: none;
}


.skimax-lightbox-inner::-webkit-scrollbar {
    display: none;
}


/* =====================================================
   ZAVŘÍT
===================================================== */

.skimax-lightbox-close {
    position: absolute;

    top: 1.5rem;

    right: 1.5rem;

    z-index: 5;

    width: 5rem;

    height: 5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: #0d2328;

    color: white;

    font-size: 3rem;

    line-height: 1;

    cursor: pointer;
}


/* =====================================================
   VELKÝ OBRÁZEK
===================================================== */

.skimax-lightbox-image-wrap {
    position: relative;

    display: flex;

    justify-content: center;

    overflow: hidden;

    border-radius: 1.5rem;
}


.skimax-lightbox-image {
    display: block;

    max-width: 100%;

    max-height: 70vh;

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 1.5rem;
}


/* =====================================================
   ŠIPKY
===================================================== */

.skimax-lightbox-nav {
    display: flex;

    justify-content: center;

    gap: 1.5rem;

    margin-top: -2.5rem;

    position: relative;

    z-index: 2;
}


.skimax-lightbox-prev,
.skimax-lightbox-next {
    width: 5rem;

    height: 5rem;

    border: 0;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .12);

    font-size: 3rem;

    cursor: pointer;
}


/* =====================================================
   POČÍTADLO
===================================================== */

.skimax-lightbox-counter {
    text-align: center;

    margin-top: 1.5rem;

    font-size: 1.5rem;
}


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

.skimax-lightbox-thumbs {
    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 1.5rem;

    margin-top: 3rem;
}


.skimax-lightbox-thumb {
    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 1rem;

    cursor: pointer;

    opacity: .65;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.skimax-lightbox-thumb:hover,
.skimax-lightbox-thumb.is-active {
    opacity: 1;
}


.skimax-lightbox-thumb.is-active {
    transform: scale(1.04);
}


.skimax-lightbox-thumb img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: inherit;
}


/* =====================================================
   MOBIL
===================================================== */

@media (max-width: 767px) {

    .skimax-gallery-main {
        border-radius: 1.5rem;
    }


    .skimax-gallery-thumbs {
        gap: 1rem;

        margin-top: 1rem;
    }


    .skimax-gallery-thumb {
        border-radius: 1rem;
    }


    .skimax-gallery-more::after {
        font-size: 1.5rem;
    }


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

    .skimax-lightbox {
        padding: 1.5rem;
    }


    /* =========================
       OKNO MAX 80 % VÝŠKY
    ========================= */

    .skimax-lightbox-inner {
        width: 100%;

        max-height: 80vh;
        max-height: 80dvh;

        overflow-y: auto;

        padding:
            4rem
            1.5rem
            2rem;

        border-radius: 2rem;

        scroll-behavior: smooth;
    }


    /* =========================
       ZAVŘÍT
    ========================= */

    .skimax-lightbox-close {
        width: 4.5rem;

        height: 4.5rem;

        top: 1rem;

        right: 1rem;

        font-size: 2.6rem;
    }


    /* =========================
       VELKÝ OBRÁZEK
    ========================= */

    .skimax-lightbox-image-wrap {
        border-radius: 1.5rem;
    }


    .skimax-lightbox-image {
        max-height: 55vh;
        max-height: 55dvh;

        border-radius: 1.5rem;
    }


    /* =========================
       THUMBNAILY
    ========================= */

    .skimax-lightbox-thumbs {
        grid-template-columns:
            repeat(4, 1fr);

        gap: 1rem;
    }

}