/* ==========================================================
   BLOCO
   ========================================================== */

.leo-home-categorias {

    position:
        relative;

    width:
        min(
            1320px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

    padding:
        18px 0 34px;

    box-sizing:
        border-box;
}


/* ==========================================================
   VIEWPORT DESKTOP
   ========================================================== */

.leo-home-categorias-viewport {

    width:
        100%;

    overflow:
        visible;
}


/* ==========================================================
   DESKTOP - 7 CATEGORIAS
   ========================================================== */

.leo-home-categorias-track {

    width:
        100%;

    display:
        grid;

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

    gap:
        18px;

    align-items:
        start;

    margin:
        0;

    padding:
        0;
}


/* ==========================================================
   ITEM
   ========================================================== */

.leo-home-categoria {

    min-width:
        0;

    margin:
        0;

    padding:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    text-align:
        center;

    color:
        #111111;

    text-decoration:
        none !important;

    box-sizing:
        border-box;

    transition:
        transform .18s ease;
}


@media (hover:hover) {

    .leo-home-categoria:hover {

        transform:
            translateY(-3px);
    }
}


/* ==========================================================
   ÁREA DA IMAGEM
   ========================================================== */

.leo-home-categoria-image-area {

    position:
        relative;

    width:
        100%;

    max-width:
        150px;

    aspect-ratio:
        1 / 1;

    margin:
        0 auto 10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


/* ==========================================================
   CÍRCULO AMARELO
   ========================================================== */

.leo-home-categoria-circle {

    position:
        absolute;

    z-index:
        1;

    left:
        50%;

    top:
        52%;

    width:
        92px;

    height:
        92px;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        #FFD400;
}


/* ==========================================================
   IMAGEM
   ========================================================== */

.leo-home-categoria-image {

    position:
        relative !important;

    z-index:
        2;

    display:
        block !important;

    width:
        138px !important;

    height:
        138px !important;

    max-width:
        100% !important;

    max-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    background:
        transparent !important;
}


/* ==========================================================
   NOME
   ========================================================== */

.leo-home-categoria-name {

    display:
        block;

    width:
        100%;

    min-height:
        36px;

    margin:
        0;

    padding:
        0 3px;

    box-sizing:
        border-box;

    color:
        #111111;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        500;

    line-height:
        1.25;

    text-align:
        center;
}


/* ==========================================================
   PAGINAÇÃO
   DESKTOP NÃO EXIBE
   ========================================================== */

.leo-home-categorias-pagination {

    display:
        none;
}


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

@media
(min-width:690px)
and
(max-width:999px) {


    .leo-home-categorias {

        width:
            calc(
                100% - 32px
            );

        padding:
            16px 0 32px;
    }


    .leo-home-categorias-viewport {

        width:
            100%;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        scroll-snap-type:
            x mandatory;

        overscroll-behavior-x:
            contain;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none;

        touch-action:
            pan-x;
    }


    .leo-home-categorias-viewport::-webkit-scrollbar {

        display:
            none;
    }


    .leo-home-categorias-track {

        display:
            flex;

        flex-wrap:
            nowrap;

        gap:
            16px;

        width:
            auto;
    }


    /*
     * 4 categorias visíveis.
     */

    .leo-home-categoria {

        flex:
            0 0
            calc(
                (
                    100%
                    -
                    48px
                )
                /
                4
            );

        scroll-snap-align:
            start;

        scroll-snap-stop:
            always;
    }


    .leo-home-categorias-pagination {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            6px;

        margin:
            17px 0 0;
    }
}


/* ==========================================================
   CELULAR
   ========================================================== */

@media
(max-width:689px) {


    /*
     * O componente ocupa praticamente
     * toda a largura real do aparelho.
     */

    .leo-home-categorias {

        width:
            min(
                430px,
                calc(100vw - 18px)
            );

        max-width:
            none;

        margin:
            0 auto;

        padding:
            12px 0 28px;
    }


    /* -------------------------------------------------------
       ÁREA ROLÁVEL
       ------------------------------------------------------- */

    .leo-home-categorias-viewport {

        width:
            100%;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        scroll-snap-type:
            x mandatory;

        overscroll-behavior-x:
            contain;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width:
            none;

        touch-action:
            pan-x;
    }


    .leo-home-categorias-viewport::-webkit-scrollbar {

        display:
            none;
    }


    /* -------------------------------------------------------
       TRILHO
       ------------------------------------------------------- */

    .leo-home-categorias-track {

        display:
            flex;

        flex-wrap:
            nowrap;

        width:
            auto;

        gap:
            12px;

        margin:
            0;

        padding:
            0 4px;

        box-sizing:
            border-box;
    }


    /* -------------------------------------------------------
       EXATAMENTE 2 POR TELA
       ------------------------------------------------------- */

    .leo-home-categoria {

        flex:
            0 0
            calc(
                (
                    100%
                    -
                    12px
                )
                /
                2
            );

        min-width:
            0;

        scroll-snap-align:
            start;

        scroll-snap-stop:
            always;
    }


    /* -------------------------------------------------------
       IMAGEM
       ------------------------------------------------------- */

    .leo-home-categoria-image-area {

        width:
            100%;

        max-width:
            150px;

        aspect-ratio:
            1 / 1;

        margin:
            0 auto 8px;
    }


    .leo-home-categoria-circle {

        width:
            86px;

        height:
            86px;
    }


    .leo-home-categoria-image {

        width:
            138px !important;

        height:
            138px !important;

        max-width:
            100% !important;

        max-height:
            100% !important;

        object-fit:
            contain !important;
    }


    /* -------------------------------------------------------
       NOME
       ------------------------------------------------------- */

    .leo-home-categoria-name {

        min-height:
            34px;

        padding:
            0 4px;

        font-size:
            14px;

        font-weight:
            500;

        line-height:
            1.25;

        color:
            #111111;
    }


    /* -------------------------------------------------------
       BOLINHAS
       ------------------------------------------------------- */

    .leo-home-categorias-pagination {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            6px;

        min-height:
            10px;

        margin:
            16px 0 0;
    }
}


/* ==========================================================
   BOLINHAS
   ========================================================== */

.leo-home-categoria-dot {

    width:
        8px;

    height:
        8px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        #c5cbd0;

    cursor:
        pointer;

    transition:
        width .18s ease,
        background .18s ease;
}


.leo-home-categoria-dot.is-active {

    width:
        38px;

    background:
        #FFB800;
}


/* ==========================================================
   CELULAR PEQUENO
   ========================================================== */

@media
(max-width:359px) {


    .leo-home-categorias {

        width:
            calc(
                100vw - 14px
            );
    }


    .leo-home-categorias-track {

        gap:
            8px;
    }


    .leo-home-categoria {

        flex-basis:
            calc(
                (
                    100%
                    -
                    8px
                )
                /
                2
            );
    }


    .leo-home-categoria-image-area {

        max-width:
            135px;
    }


    .leo-home-categoria-image {

        width:
            128px !important;

        height:
            128px !important;
    }


    .leo-home-categoria-circle {

        width:
            80px;

        height:
            80px;
    }


    .leo-home-categoria-name {

        font-size:
            13px;
    }
}