/**
 * Carousel Block Extension - Frontend Styles
 */

/* ================================
   カスタムアニメーションイージング
   https://easings.net/ja/ から選択したイージングを使用
   ================================ */

/* CSS変数を上書き（インラインスタイルで定義されている場合に対応） */
.cb-carousel-block[style] {
    --motion-ease: cubic-bezier(0.17, 0.84, 0.44, 1) !important;
}

/* すべてのカルーセルのスライド移動 */
.cb-carousel-block .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1) !important;
}

/* 中央揃えモードのスケール/透明度アニメーション */
.cb-carousel-block[data-cb-centered="true"] .swiper-slide {
    transition: all 0.3s cubic-bezier(0.17, 0.84, 0.44, 1) !important;
}


/* Prevent horizontal scrollbar when using extended carousel modes */
body:has(.cb-carousel-block[data-cb-auto-width="true"]),
body:has(.cb-carousel-block[data-cb-left-aligned="true"]),
body:has(.cb-carousel-block[data-cb-centered="true"]) {
    overflow-x: hidden;
}

/* Auto Width Mode */
.cb-carousel-block[data-cb-auto-width="true"] {
    overflow: visible;
    margin-left: calc(var(--cb-center-padding, 0px) * -1);
    margin-right: calc(var(--cb-center-padding, 0px) * -1);
    padding-left: var(--cb-center-padding, 0px);
    padding-right: var(--cb-center-padding, 0px);
}

body .cb-carousel-block[data-cb-auto-width="true"] .swiper {
    overflow: visible !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cb-carousel-block[data-cb-auto-width="true"] .swiper-wrapper {
    width: auto;
}

.cb-carousel-block[data-cb-auto-width="true"][data-cb-centered="true"] .swiper {
    padding-left: var(--cb-center-padding, 50px) !important;
    padding-right: var(--cb-center-padding, 50px) !important;
}

.cb-carousel-block[data-cb-auto-width="true"] .swiper-slide > * {
    width: 100%;
    box-sizing: border-box;
}

/* Desktop auto-width styles */
@media (min-width: 769px) {
    .cb-carousel-block[data-cb-auto-width="true"].cb-carousel-block .swiper-slide,
    .wp-block-cb-carousel-v2[data-cb-auto-width="true"] .swiper-slide,
    .wp-block-cb-carousel-v2[data-cb-auto-width="true"] .cb-slide.swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .cb-shows-1-slides .swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .cb-shows-2-slides .swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .cb-shows-3-slides .swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .cb-shows-4-slides .swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .cb-shows-5-slides .swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .cb-shows-6-slides .swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .cb-shows-7-slides .swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .cb-shows-8-slides .swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .cb-shows-9-slides .swiper-slide,
    body .cb-carousel-block[data-cb-auto-width="true"] .cb-shows-10-slides .swiper-slide {
        width: var(--cb-default-width, 300px) !important;
        max-width: none !important;
        min-width: var(--cb-default-width, 300px) !important;
        flex-basis: var(--cb-default-width, 300px) !important;
        flex-shrink: 0 !important;
    }

    .wp-block-cb-carousel-v2[data-cb-auto-width="true"] .wp-block-cb-slide-v2,
    .wp-block-cb-carousel-v2[data-cb-auto-width="true"] .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="cb/slide-v2"] {
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        flex-basis: auto !important;
        flex-shrink: 0 !important;
    }

    html body .cb-carousel-block[data-cb-left-aligned="true"]:not([data-cb-auto-width="true"]) .swiper-slide {
        width: var(--cb-default-width, 400px) !important;
        max-width: var(--cb-default-width, 400px) !important;
        min-width: var(--cb-default-width, 400px) !important;
        flex-basis: var(--cb-default-width, 400px) !important;
        flex-shrink: 0 !important;
    }
}

/* Left Aligned Mode */
.cb-carousel-block[data-cb-left-aligned="true"] {
    overflow: visible;
    margin-right: calc(var(--cb-right-overflow, 80px) * -1);
    padding-right: var(--cb-right-overflow, 80px);
}

.cb-carousel-block[data-cb-left-aligned="true"] .swiper {
    overflow: visible;
    padding-left: 0 !important;
    padding-right: clamp(20px, var(--cb-right-overflow, 80px), 15vw) !important;
    margin-left: 0;
}

.cb-carousel-block[data-cb-left-aligned="true"] .swiper-wrapper {
    align-items: flex-start;
}

.cb-carousel-block[data-cb-left-aligned="true"] .swiper-slide {
    height: auto !important;
    align-self: flex-start !important;
}

.cb-carousel-block[data-cb-left-aligned="true"] .swiper-slide > * {
    height: auto !important;
}

/* Centered Mode */
.cb-carousel-block[data-cb-centered="true"] {
    overflow: visible;
    margin-left: calc(var(--cb-center-padding, 50px) * -1);
    margin-right: calc(var(--cb-center-padding, 50px) * -1);
    padding-left: var(--cb-center-padding, 50px);
    padding-right: var(--cb-center-padding, 50px);
}

.cb-carousel-block[data-cb-centered="true"] .swiper {
    overflow: visible;
    padding: 0 var(--cb-center-padding, 50px);
}

.cb-carousel-block[data-cb-centered="true"] .swiper-wrapper,
.cb-carousel-block[data-cb-auto-width="true"] .swiper-wrapper {
    align-items: flex-start;
}

.cb-carousel-block[data-cb-centered="true"] .swiper-slide,
.cb-carousel-block[data-cb-auto-width="true"] .swiper-slide {
    height: auto !important;
    align-self: flex-start !important;
}

.cb-carousel-block[data-cb-centered="true"] .swiper-slide > *,
.cb-carousel-block[data-cb-auto-width="true"] .swiper-slide > * {
    height: auto !important;
}

.cb-carousel-block[data-cb-centered="true"]:not(.cbe-initialized) .swiper-slide,
.cb-carousel-block[data-cb-auto-width="true"]:not(.cbe-initialized) .swiper-slide {
    transition: none !important;
}

.cb-carousel-block[data-cb-centered="true"] .swiper-slide {
    transition: all 0.3s ease;
    opacity: 0.7;
    transform: scale(0.9);
}

.cb-carousel-block[data-cb-centered="true"] .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.cb-carousel-block[data-cb-centered="true"] .swiper-slide-next,
.cb-carousel-block[data-cb-centered="true"] .swiper-slide-prev {
    opacity: 0.8;
    transform: scale(0.95);
}

.cb-carousel-block[data-cb-centered="true"] .cb-button-prev,
.cb-carousel-block[data-cb-centered="true"] .cb-button-next {
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.cb-carousel-block[data-cb-centered="true"] .cb-pagination {
    bottom: 10px;
}

/* Shared image styles */
.cb-carousel-block[data-cb-auto-width="true"] .swiper-slide img,
.cb-carousel-block[data-cb-centered="true"] .swiper-slide img,
.cb-carousel-block[data-cb-left-aligned="true"] .swiper-slide img {
    max-width: 100%;
    /* height: auto; */
    object-fit: cover;
}

/* Mobile responsive behavior */
@media (max-width: 768px) {
    .cb-carousel-block[data-cb-auto-width="true"],
    .cb-carousel-block[data-cb-left-aligned="true"] {
        contain: layout;
        position: relative;
    }

    .cb-carousel-block[data-cb-centered="true"] {
        overflow: hidden !important;
        --cb-center-padding: 15px;
    }

    .cb-carousel-block[data-cb-centered="true"] .swiper {
        overflow: hidden !important;
        padding: 0 var(--cb-center-padding, 15px);
    }

    /* Auto-width mode on mobile */
    html body .cb-carousel-block[data-cb-auto-width="true"] .swiper-slide[style],
    html body .cb-carousel-block[data-cb-auto-width="true"] .swiper-slide {
        width: 84vw !important;
        max-width: 84vw !important;
        min-width: 84vw !important;
        flex-basis: 84vw !important;
        flex: 0 0 84vw !important;
    }

    /* Left-aligned + auto-width mode on mobile */
    html body .cb-carousel-block[data-cb-auto-width="true"][data-cb-left-aligned="true"] .swiper-slide[style],
    html body .cb-carousel-block[data-cb-auto-width="true"][data-cb-left-aligned="true"] .swiper-slide {
        width: 84vw !important;
        max-width: 84vw !important;
        min-width: 84vw !important;
        flex-basis: 84vw !important;
        flex: 0 0 84vw !important;
    }

    .cb-carousel-block[data-cb-auto-width="true"] .swiper {
        padding-left: 0 !important;
        padding-right: clamp(20px, var(--cb-right-overflow, 80px), 15vw) !important;
    }

    html body .cb-carousel-block[data-cb-left-aligned="true"]:not([data-cb-auto-width="true"]) .swiper-slide[style],
    html body .cb-carousel-block[data-cb-left-aligned="true"]:not([data-cb-auto-width="true"]) .swiper-slide {
        width: 84vw !important;
        max-width: 84vw !important;
        min-width: 84vw !important;
        flex-basis: 84vw !important;
        flex: 0 0 84vw !important;
    }
}

@media (max-width: 480px) {
    .cb-carousel-block[data-cb-centered="true"] {
        --cb-center-padding: 10px;
    }
}

/* Custom Navigation - Bottom Right Position */
.cb-carousel-block[data-cb-navigation-position="bottom-right"] {
    position: relative;
    margin-bottom: 60px;
}

.cb-carousel-block[data-cb-navigation-position="bottom-right"] .cb-custom-navigation {
    position: absolute;
    bottom: -64px;
    right: 0;
    z-index: 10;
    display: flex;
    gap: 12px;
}

.cb-custom-navigation .cb-nav-button {
    width: var(--wp--custom--carousel-block--navigation-size, 40px);
    height: var(--wp--custom--carousel-block--navigation-size, 40px);
    background: rgba(200, 200, 200, 0.3);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--wp--custom--carousel-block--navigation-color, #333);
}

.cb-custom-navigation .cb-nav-button:hover {
    background: rgba(200, 200, 200, 0.2);
    transform: scale(1.1);
}

.cb-custom-navigation .cb-nav-button.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.cb-custom-navigation .cb-nav-button::after {
    content: '';
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
}

.cb-custom-navigation .cb-nav-prev::after {
    transform: rotate(135deg);
    margin-left: 2px;
}

.cb-custom-navigation .cb-nav-next::after {
    transform: rotate(-45deg);
    margin-right: 2px;
}

.cb-carousel-block[data-cb-navigation-position="bottom-right"] .cb-button-prev,
.cb-carousel-block[data-cb-navigation-position="bottom-right"] .cb-button-next {
    display: none !important;
}

@media (max-width: 768px) {
    .cb-carousel-block[data-cb-navigation-position="bottom-right"] {
        margin-bottom: 50px;
    }

    .cb-carousel-block[data-cb-navigation-position="bottom-right"] .cb-custom-navigation {
        bottom: -52px;
        right: 0;
    }

    .cb-custom-navigation .cb-nav-button {
        width: 36px;
        height: 36px;
    }
}