/* Apenas estrutura. Personalize a aparência no global.css. */
.section-cards-carousel{
    /* Clip at the section edge, not at the centered container. */
    overflow: clip;
    --carousel-image-height: 360px;
    --carousel-gap: 20px;
    /* 3.7 cards: narrow + wide + narrow + 70% wide, with 3 gaps.
       Wide = 1.5 narrow, so the total is 4.55 narrow widths. */

    .cards-carousel-slider{
        visibility: visible;
        /* Use the measured visible area, not Splide's percentage containing block. */
        --carousel-narrow-width: calc((var(--carousel-track-width, 100%) - 3 * var(--carousel-gap)) / 4.55);

        .splide__track{
            width: var(--carousel-track-width, 100%);
        }

        &.is-initialized .splide__track{
            overflow: visible;
        }
    }

    .cards-wrap{
        display: flex;
    }

    .cards-wrap > .card{
        flex: 0 0 auto;
        width: var(--carousel-narrow-width);
        min-width: 0;
        overflow-wrap: anywhere;

        &:nth-child(even){
            width: calc(var(--carousel-narrow-width) * 1.5);
        }

        .card-wrap{
            position: relative;
            height: var(--carousel-image-height);
        }

        .card-image{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .card-category{
            position: absolute;
            top: 12px;
            right: 12px;
        }
    }

    .splide__arrows{
        display: flex;
        justify-content: center;
        gap: 12px;

        button svg{
            width: 20px;
            height: 20px;
        }

    }

    .cards-carousel-slider:not(.is-initialized){
        .splide__track{
            overflow-x: auto;
        }
        .cards-wrap{
            gap: var(--carousel-gap);
        }
        .splide__arrows{
            display: none;
        }
    }

    @media (max-width: 767px){
        --carousel-image-height: 240px;
        --carousel-gap: 16px;

        .cards-wrap > .card,
        .cards-wrap > .card:nth-child(even){
            width: calc((var(--carousel-track-width, 100%) - var(--carousel-gap)) / 1.1);
        }

        .cards-carousel-slider .splide__pagination{
            position: static;
            gap: 4px;
            padding: 20px 0 0;

            li{
                line-height: 0;
            }

            .splide__pagination__page{
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 28px;
                height: 28px;
                margin: 0;
                padding: 0;
                border: 0;
                background: transparent;

                &::before{
                    content: '';
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #ccc;
                }

                &.is-active::before{
                    background: #82c91e;
                }

                &:focus-visible{
                    outline: 2px solid #528c00;
                    outline-offset: 2px;
                }
            }
        }
    }
}