/* VLIP Carousel Block Styles */

body:not(.wp-admin) .vlip-carousel {
    position: relative;
    margin-right: -50vw !important;
    margin-left: -50vw !important;
    right: 50%;
    left: 50%;
    width: 100vw;
    max-width: none;
}

/* Swiper container with alignment support */
.vlip-carousel .swiper {
    max-width: var(--wp--style--global--content-size, 800px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--carousel-block-gap, var(--wp--preset--spacing--50));
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    position: relative;
    overflow: visible;
    min-height: 0.5rem;
    --swiper-pagination-bullet-width: 0.75rem;
    --swiper-pagination-bullet-size: 0.75rem;
    --swiper-pagination-bullet-border-radius: 0.375rem;
}

/* Position pagination in the margin-bottom space using the block's blockGap value */
.vlip-carousel .swiper-pagination {
    position: absolute;
    top: 100% !important;
    top: calc(100% + var(--carousel-block-gap, var(--wp--preset--spacing--50)) / 2) !important;
    left: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: 2rem;
    margin: 0;
}

.swiper-pagination-bullet {
    margin: 0 !important;
    transition: all 0.3s ease, color 0.3s ease;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 2rem;
}

/* Position navigation buttons at same height as pagination */
.vlip-carousel .swiper-button-next,
.vlip-carousel .swiper-button-prev {
    top: 100% !important;
    top: calc(100% + var(--carousel-block-gap, var(--wp--preset--spacing--50)) / 2) !important;
    bottom: 0 !important;
    /* transform: translateY(-50%) !important; */
    width: 1rem;
    height: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--wp--preset--color--white);
    box-shadow: var(--shadow-elevation-high);
    transition: all 0.3s ease, color 0.3s ease;
}

.vlip-carousel .swiper-button-next>svg,
.vlip-carousel .swiper-button-prev>svg {
    width: auto;
    height: 100%;
    color: var(--wp--preset--color--base);
}

.vlip-carousel .swiper-button-next {
    right: var(--wp--style--root--padding-right) !important;
}

.vlip-carousel .swiper-button-prev {
    left: var(--wp--style--root--padding-left) !important;
}

/* Wide alignment */
.vlip-carousel .swiper.alignwide {
    max-width: var(--wp--style--global--wide-size, 1280px);
}

/* Full alignment */
.vlip-carousel .swiper.alignfull {
    max-width: none;
}

/* Ensure slides maintain proper sizing */
.vlip-carousel .swiper-slide {
    width: auto;
    height: auto;
}

/* Custom slide width when slidesPerView is auto */
.vlip-carousel[style*="--slide-width-mobile"] .swiper-slide {
    width: var(--slide-width-mobile, 80%);
}

@media (min-width: 768px) {
    .vlip-carousel[style*="--slide-width-desktop"] .swiper-slide {
        width: var(--slide-width-desktop, 33%);
    }
}

/* Override constrained layout max-width for slides */
.vlip-carousel .swiper-slide.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none;
}

.vlip-carousel .swiper-slide.is-layout-constrained {
    max-width: none;
}

/* Editor-specific styles */
.vlip-carousel .block-editor-inner-blocks {
    width: 100%;
}

.vlip-carousel .block-editor-block-list__layout {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Ensure child blocks in editor maintain their normal display */
.vlip-carousel .block-editor-block-list__layout > .block-editor-block-list__block {
    flex: 0 0 auto;
    width: 100%;
    display: block;
}

/* Apply swiper-slide styles in editor */
.vlip-carousel .block-editor-block-list__layout > .block-editor-block-list__block .swiper-slide {
    width: auto;
    height: auto;
}

/* .vlip-carousel .block-editor-block-list__layout > .block-editor-block-list__block .swiper-slide.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none;
}

.vlip-carousel .block-editor-block-list__layout > .block-editor-block-list__block .swiper-slide.is-layout-constrained {
    max-width: none;
} */


/* Reset flex behavior for nested blocks inside carousel slides */
.vlip-carousel .wp-block-group .block-editor-block-list__layout {
    display: block;
    overflow-x: visible;
}

.vlip-carousel .wp-block-group .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: block;
}