.popular {
    width: 100%;
    height: auto;
    padding: 60px 0 40px;
}



.popular_container {
    position: relative;
    width: 100%;
    height: calc(var(--vh) * 68);
    padding: 36px 0 0;

    overflow: hidden;
    touch-action: pan-y; /* Pouze vertikální posun */
}

.pop_box {
    position: absolute;
    padding: 20px;
    width: 68vw;
    height: calc(var(--vh) * 56);
    left: 50%;
    top: 50%;

    z-index: var(--z);
    transform:
        translate(calc(-50% + var(--x)), -50%) scale(var(--scale));

    background-color: var(--black_vanta);
    border: 1px solid var(--white);
    border-radius: var(--radius-s);
    color: var(--white);

    opacity: var(--opacity);
    filter: grayscale(1);
    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease,
        filter .35s ease;

    overflow: visible;
}


.pop_box.podlahy { background-image: url("../podlahove_studio/img/_pvc.jpg"); }
.pop_box.koberce { background-image: url("../podlahove_studio/img/_koberec.jpg"); background-position: center bottom; }
.pop_box.inter_dvere { background-image: url("../podlahove_studio/img/_interierove-dvere.jpg"); background-position: center top; }
.pop_box.vchod_dvere { background-image: url("../podlahove_studio/img/_vchodove-dvere.jpg"); background-position: top right; }

.pop_box.active {
    z-index: 10;
    transform: translate(-50%, -50%) scale(1);

    opacity: 1;
    filter: grayscale(0);
}

.pop_box.previous {
    z-index: 5;
    transform: translate(calc(-50% - 36vw), -50%) scale(.78);

    opacity: .45;
}

.pop_box.next {
    z-index: 5;
    transform: translate(calc(-50% + 36vw), -50%) scale(.78);

    opacity: .45;
}

.pop_box.hidden {
    z-index: 1;
    transform: translate(-50%, -50%) scale(.78);

    opacity: 0;
}

.pop_box::before {
    content: "";
    position: absolute;

    width: 75%;
    height: 75%;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(-50%, -50%) scale(.75);

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    opacity: .35;
    filter: grayscale(1);

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        opacity .35s ease,
        filter .35s ease;

    pointer-events: none;
}

.tryskani::before { background-image: url("../img/png_tryskani.webp"); }
.frezovani::before { background-image: url("../img/png_frezovani.webp"); }
.brouseni::before { background-image: url("../img/png_brouseni.webp"); }
.sil_freza::before { background-image: url("../img/png_sil_freza.webp"); }


/* .podlahy::before { background-image: url(""); }
.koberce::before { background-image: url(""); }
.inter_dvere::before { background-image: url(""); }
.vchod_dvere::before { background-image: url(""); } */

.pop_box.active::before {
    transform: translate(-50%, -40%) scale(1.8);

    opacity: 1;
    filter: grayscale(0);
}

.sil_freza.active::before { transform: translate(-50%, -30%) scale(1.2); filter: brightness(.6); }

.pop_box .content {
    position: relative;
    z-index: 2;
}





.swipe_hint {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin-top: -40px;

    transform: translateX(-50%);
    opacity: .7;

    pointer-events: none;
    animation: swipe_move 2.2s ease-in-out infinite;
}

.swipe_hint svg {
    display: block;
    width: auto;
    height: 100%;
}


.swipe_finger {
    fill: none;
    stroke: var(--white);
    stroke-width: 2;
}



@keyframes swipe_move {
    0%, 100% {
        opacity: 1;
        transform: translateX(-12px) rotate(-5deg);
    }

    25%, 75% {
        opacity: 1;
    }

    50% {
        opacity: .7;
        transform: translateX(20px) rotate(12deg);
    }
}






/* ------------------------------------------------------ MOBILE HORIZONTAL --------------------------- */
@media (orientation: landscape) and (max-height: 500px) {
    .popular_container {
        height: calc(var(--vh) * 76);
        padding: auto;
    }

    .pop_box {
        width: 58vw;
        height: calc(var(--vh) * 48);
    }

    .pop_box.active::before {
        transform: translate(-20%, -50%) scale(1.8);
        filter: brightness(.6);
    }
}









/* ---------------------------------------------------------- TABLET ---------------------------------- */
@media (min-width: 768px) and (orientation: portrait) {
    .popular_container {
        height: calc(var(--vh) * 56);
        padding: auto;
    }

    .pop_box {
        width: 52vw;
        height: calc(var(--vh) * 42);
    }

    .pop_box.active::before {
        transform: translate(-50%, -40%) scale(1.6);
        filter: brightness(.6);
    }

    .sil_freza.active::before { transform: translate(-50%, -30%) scale(1.2); filter: brightness(.6); }
}









/* -------------------------------------------------- NOTEBOOK ------------------------------------ */
@media (min-width: 1024px) {
    .popular_container {
        height: calc(var(--vh) * 56);
        padding: auto;
    }

    .pop_box {
        width: 52vw;
        height: calc(var(--vh) * 42);
    }

    .pop_box.active::before {
        transform: translate(-30%, -50%) scale(1.6);
        filter: brightness(1);
    }

    .sil_freza.active::before { transform: translate(-30%, -40%) scale(1.2); filter: brightness(1); }
}









/* --------------------------------------------------- DELL ------------------------------------- */
@media (min-width: 1200px) {
    .popular_container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* align-items: stretch; */

        width: 100%;
        height: max(calc(var(--vh) * 46), 560px);
        padding: 80px 8% 60px;

        perspective: 1000px;
        overflow: visible;
        touch-action: auto;
    }

    .pop_box {
        position: relative;
        left: auto;
        top: auto;
        width: 22%;
        height: auto;
        z-index: 1;
        padding: 2% 16px 16px;

        opacity: 1;
        filter: none;
        transform: none;

        transition:
            width .8s cubic-bezier(.22,.61,.36,1),
            transform 1s cubic-bezier(.22,.61,.36,1),
            box-shadow 1s ease;
        transform-style: preserve-3d;

        overflow: hidden;
        box-sizing: border-box;
    }


    /* -------------------- CAROUSEL OFF -------------------- */
    .pop_box.active, .pop_box.previous, .pop_box.next, .pop_box.hidden {
        width: 22%;
        z-index: 1;

        opacity: 1;
        transform: none;
        filter: none;
    }

    .swipe_hint {
        display: none;
    }

    .pop_box::before {
        content: "";
        position: absolute;

        width: 100%;
        height: 100%;
        left: 0;
        top: 10%;
        z-index: -1;

        transform: none;

        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;

        opacity: 1;
        filter: brightness(.7) saturate(.7);
        transition:
            transform 1s cubic-bezier(.22,.61,.36,1),
            filter 1s ease;
    }

    .sil_freza::before {
        transform: scale(.6);
    }

    @media (hover: hover) and (pointer: fine) {
        .popular_container:has(.pop_box:hover) .pop_box {
            width: 18%;
        }

        .popular_container:has(.pop_box:hover) .pop_box:hover {
            width: 30%;
            z-index: 5;

            box-shadow:
                0 16px 42px 18px rgba(246, 132, 43, .6);
        }

        .popular_container:has(.pop_box:hover) .pop_box:nth-child(1):hover {
            transform: rotateY(6deg);
        }

        .popular_container:has(.pop_box:hover) .pop_box:nth-child(2):hover {
            transform: rotateX(6deg);
        }

        .popular_container:has(.pop_box:hover) .pop_box:nth-child(3):hover {
            transform: rotateX(-6deg);
        }

        .popular_container:has(.pop_box:hover) .pop_box:nth-child(4):hover {
            transform: rotateY(-6deg);
        }


        .popular_container:has(.pop_box:hover) .pop_box:hover::before {
            filter:
                grayscale(0)
                brightness(.6)
                saturate(1.2);

            transform: scale(1.1);
        }

        .popular_container:has(.pop_box:hover) .tryskani.pop_box:hover::before {
            transform: scale(1.3);
        }

        .popular_container:has(.pop_box:hover) .frezovani.pop_box:hover::before {
            transform: scale(1.3);
        }

        .popular_container:has(.pop_box:hover) .brouseni.pop_box:hover::before {
            transform: scale(1.2);
        }

        .popular_container:has(.pop_box:hover) .sil_freza.pop_box:hover::before {
            transform: scale(1);
        }


        /* -------------------- POPIS, kdybych chtěl mít všude vyjíždějící text -------------------- */
        /* .pop_box:hover .desc {
            opacity: 1;
            transform: translateY(0);
            max-height: 300px;
        } */
    }
}