/* ================================================================
   Simple Slider Block — フロントエンドスタイル
   ================================================================ */

/* ── スライダーコンテナ ─────────────────────────────────────────── */

.simple-slider-block {
    position: relative;
    overflow: hidden;
    /* ブロックテーマが付与する可能性のある padding を打ち消す */
    padding: 0 !important;
}

/*
 * alignfull / alignwide の幅制御はブロックテーマ（Twenty Twenty-Five 等）が
 * theme.json の設定から生成する CSS に委ねる。
 * クラシックテーマ用のフォールバックのみここで定義する。
 */
.simple-slider-block.alignfull {
    /* クラシックテーマ用フォールバック */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/*
 * ブロックテーマ環境では上記フォールバックより
 * テーマが生成した .is-layout-constrained > .alignfull の CSS が優先される。
 * そのため alignfull で意図せず適用されるフォールバックを
 * .has-global-padding 配下では無効化する。
 */
.has-global-padding > .simple-slider-block.alignfull,
.is-layout-constrained > .simple-slider-block.alignfull {
    width: auto;
    max-width: none;
    margin-left: revert;
    margin-right: revert;
}

.simple-slider-block.alignwide {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* ── 各スライド（カバーブロック）──────────────────────────────── */

/*
 * JS 初期化前: カバーブロックを通常フロー表示（スタック崩れ防止）
 * JS が slider-slide クラスを付与した後: position:absolute に切り替わる
 */
.simple-slider-block > .wp-block-cover:not(.slider-slide) {
    display: block;
}

/* JS 初期化後 */
.simple-slider-block > .wp-block-cover.slider-slide {
    position: absolute;
    inset: 0;              /* top/right/bottom/left: 0 の短縮記法 */
    width: 100%;
    min-height: 0 !important;   /* カバーブロックの min-height インラインスタイルを上書き */
    margin: 0 !important;        /* テーマが付与する margin を打ち消す */
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.simple-slider-block > .wp-block-cover.slider-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* カバーブロック内の is-layout-constrained が幅を制限しないよう調整 */
.simple-slider-block > .wp-block-cover > .wp-block-cover__inner-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── アニメーション ─────────────────────────────────────────────── */

.simple-slider-block.animation-fade > .wp-block-cover.slider-slide {
    transform: none;
}

.simple-slider-block.animation-slide-left > .wp-block-cover.slider-slide {
    transform: translateX(100%);
}
.simple-slider-block.animation-slide-left > .wp-block-cover.slider-slide.active {
    transform: translateX(0);
}

.simple-slider-block.animation-slide-right > .wp-block-cover.slider-slide {
    transform: translateX(-100%);
}
.simple-slider-block.animation-slide-right > .wp-block-cover.slider-slide.active {
    transform: translateX(0);
}

.simple-slider-block.animation-zoom > .wp-block-cover.slider-slide {
    transform: scale(1.15);
}
.simple-slider-block.animation-zoom > .wp-block-cover.slider-slide.active {
    transform: scale(1);
}

.simple-slider-block.animation-flip > .wp-block-cover.slider-slide {
    transform: perspective(800px) rotateY(90deg);
}
.simple-slider-block.animation-flip > .wp-block-cover.slider-slide.active {
    transform: perspective(800px) rotateY(0);
}

/* ── ドットコントロール ─────────────────────────────────────────── */

.simple-slider-block .slider-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.simple-slider-block .slider-controls .control {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s;
}

.simple-slider-block .slider-controls .control.active,
.simple-slider-block .slider-controls .control:hover {
    background: rgba(255, 255, 255, 1);
}