/* ── Horizontal Scroll Block ─────────────────────────────────────────────── */

/*
 * Prevent the 100vw breakout from causing a horizontal scrollbar.
 * On Windows, 100vw includes the scrollbar width, making the element
 * slightly wider than the visible page.
 */
body { overflow-x: hidden; }

.oi-hscroll {
    overflow:    hidden;
    position:    relative;

    /*
     * Full-width breakout.
     * post-content uses layout:constrained which injects
     * `margin: auto !important` on non-alignfull children.
     * We must use !important to override it.
     * Formula mirrors WordPress's own alignfull CSS:
     * margin = (parent_width - 100vw) / 2
     */
    width:        100vw !important;
    max-width:    none  !important;
    margin-left:  calc( (100% - 100vw) / 2 ) !important;
    margin-right: calc( (100% - 100vw) / 2 ) !important;
}

.oi-hscroll__track {
    display:     flex;
    flex-wrap:   nowrap;
    will-change: transform;
}

.oi-hscroll__slide {
    flex:            0 0 100vw;
    width:           100vw;
    min-height:      var( --oi-slide-height, 80vh );
    display:         flex;
    flex-direction:  column;
    justify-content: center;   /* default — overridden by is-vertically-aligned-* */
    overflow:        hidden;
    box-sizing:      border-box;

    /* Let inner blocks stretch to the full slide width */
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size:    100%;
}

/* Vertical alignment modifiers set via toolbar */
.oi-hscroll__slide.is-vertically-aligned-top    { justify-content: flex-start; }
.oi-hscroll__slide.is-vertically-aligned-center  { justify-content: center;     }
.oi-hscroll__slide.is-vertically-aligned-bottom  { justify-content: flex-end;   }

/* Direct children (group/cover) fill the slide's full height */
.oi-hscroll__slide > * {
    flex:       1 0 0;
    width:      100%;
    max-width:  100%;
    min-height: 0;
}


/* ── Editor — single-slide preview driven by List View selection ─────────── */

.editor-styles-wrapper .oi-hscroll--editor {
    /* Reset the frontend breakout — editor canvas handles its own width */
    width:        auto !important;
    max-width:    none !important;
    margin-left:  0    !important;
    margin-right: 0    !important;
    overflow:     visible;
}

/* Track is block-level in editor (only one slide visible at a time) */
.editor-styles-wrapper .oi-hscroll--editor .oi-hscroll__track {
    display: block;
}

/*
 * Hide inactive slides using strict child combinators so that only the
 * top-level slide wrappers are targeted — NOT the blocks inside each slide.
 * Structure: .track > .block-editor-inner-blocks > .block-editor-block-list__layout > [slide wrapper]
 */
.editor-styles-wrapper .oi-hscroll--editor .oi-hscroll__track
    > .block-editor-inner-blocks
    > .block-editor-block-list__layout
    > * {
    display: none !important;
}

/* Show only the active slide — supports up to 8 slides */
.editor-styles-wrapper .oi-hscroll--editor .oi-hscroll__track[data-active="0"]
    > .block-editor-inner-blocks > .block-editor-block-list__layout > *:nth-child(1),
.editor-styles-wrapper .oi-hscroll--editor .oi-hscroll__track[data-active="1"]
    > .block-editor-inner-blocks > .block-editor-block-list__layout > *:nth-child(2),
.editor-styles-wrapper .oi-hscroll--editor .oi-hscroll__track[data-active="2"]
    > .block-editor-inner-blocks > .block-editor-block-list__layout > *:nth-child(3),
.editor-styles-wrapper .oi-hscroll--editor .oi-hscroll__track[data-active="3"]
    > .block-editor-inner-blocks > .block-editor-block-list__layout > *:nth-child(4),
.editor-styles-wrapper .oi-hscroll--editor .oi-hscroll__track[data-active="4"]
    > .block-editor-inner-blocks > .block-editor-block-list__layout > *:nth-child(5),
.editor-styles-wrapper .oi-hscroll--editor .oi-hscroll__track[data-active="5"]
    > .block-editor-inner-blocks > .block-editor-block-list__layout > *:nth-child(6),
.editor-styles-wrapper .oi-hscroll--editor .oi-hscroll__track[data-active="6"]
    > .block-editor-inner-blocks > .block-editor-block-list__layout > *:nth-child(7),
.editor-styles-wrapper .oi-hscroll--editor .oi-hscroll__track[data-active="7"]
    > .block-editor-inner-blocks > .block-editor-block-list__layout > *:nth-child(8) {
    display: block !important;
}

/* Slide sizing in the editor — height set via --oi-slide-height on the parent */
.editor-styles-wrapper .oi-hscroll__slide {
    width:          100%;
    min-height:     var( --oi-slide-height, 80vh );
    display:        flex;
    flex-direction: column;
}

/* InnerBlocks wrapper fills the slide height so the group inside can too */
.editor-styles-wrapper .oi-hscroll__slide > .block-editor-inner-blocks {
    flex:           1 0 0;
    display:        flex;
    flex-direction: column;
    min-height:     0;
    width:          100%;
    max-width:      none;
}

.editor-styles-wrapper .oi-hscroll__slide > .block-editor-inner-blocks
    > .block-editor-block-list__layout {
    flex:       1 0 0;
    min-height: 0;
    width:      100%;
    max-width:  none;
}

/* The .wp-block wrapper around each child block also fills the layout height */
.editor-styles-wrapper .oi-hscroll__slide > .block-editor-inner-blocks
    > .block-editor-block-list__layout > .wp-block {
    flex:       1 0 0;
    min-height: 0;
}

/* Block wrappers inside the slide fill width */
.editor-styles-wrapper .oi-hscroll__slide .wp-block {
    max-width: none;
}