/* Flow Art: full-page editorial chapters that stack during the pinned scene. */

.gui_flow-art-stack-scene {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    perspective: 1800px;

    /*
     * JS supplies the exact runtime value, including the active fixed header
     * and WordPress admin bar. The calc() remains a safe pre-JS fallback.
     */
    --gui-flow-art-available-height: calc(
            100dvh
            - var(--gui-admin-bar-height, 0px)
            - var(--gui-header-height-main, 0px)
    );
}

.gui_flow-art-stack-scene > .gui_expander,
.gui_flow-art-stack-scene > .gui_expander > .gui_body,
.gui_flow-art-stack-scene > .gui_expander > .gui_body > .gui_expander,
.gui_flow-art-stack-scene .gui_flow-art-stack-module,
.gui_flow-art-stack-scene .gui_flow-art-stack-module > .gui_expander,
.gui_flow-art-stack-scene .gui_flow-art-stack-module > .gui_expander > .gui_body,
.gui_flow-art-stack-scene .gui_flow-art-stack-module > .gui_expander > .gui_body > .gui_expander {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

.gui_flow-art-stack-scene .gui_flow-art-stack-module {
    position: relative !important;
    overflow: visible !important;
}

.gui_flow-art-stack-scene .gui_flow-art-stack-intro {
    display: none !important;
}

.gui_flow-art-stack-scene .gui_flow-art-stack-stage,
.gui_flow-art-stack-scene .gui_flow-art-stack-fill {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.gui_flow-art-stack-scene .gui_flow-art-stack-list {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    transform-style: preserve-3d;
}

/*
 * The LI is the fixed-height scrolling viewport. Its nested content is allowed
 * to grow naturally; only the active card accepts pointer input.
 */
.gui_flow-art-stack-scene .gui_flow-art-stack-card {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    will-change: transform;
    touch-action: pan-y;
}

.gui_flow-art-stack-scene .gui_flow-art-stack-card::-webkit-scrollbar {
    display: none;
}

.gui_flow-art-stack-scene .gui_flow-art-stack-card[data-gui-flow-art-state="active"] {
    pointer-events: auto;
    visibility: visible !important;
}

.gui_flow-art-stack-scene .gui_flow-art-stack-card[data-gui-flow-art-state="covered"],
.gui_flow-art-stack-scene .gui_flow-art-stack-card[data-gui-flow-art-state="stacked"] {
    pointer-events: none;
}

/*
 * Crucial sizing rule: all wrappers inside a card remain height:auto.
 * There is deliberately no height:100% or min-height:100% here.
 */
.gui_flow-art-stack-scene .gui_flow-art-stack-card > .gui_expander,
.gui_flow-art-stack-scene .gui_flow-art-stack-card > .gui_expander > .gui_body,
.gui_flow-art-stack-scene .gui_flow-art-stack-card > .gui_expander > .gui_body > .gui_expander,
.gui_flow-art-stack-scene .gui_flow-art-stack-card .gui_module-holder,
.gui_flow-art-stack-scene .gui_flow-art-stack-card .gui_module {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

/*
 * Each chapter fills the usable viewport as a minimum. If its content is
 * taller, height:auto lets it grow and the outer LI supplies the scrollbar.
 */
.gui_flow-art-stack-scene li[data-gui-item-style="gui_flow-art"] > .gui_expander,
.gui_flow-art-stack-scene li[data-gui-item-style="gui_flow-art"] > .gui_expander > .gui_body,
.gui_flow-art-stack-scene li[data-gui-item-style="gui_flow-art"] > .gui_expander > .gui_body > .gui_expander {
    height: auto !important;
    min-height: var(--gui-flow-art-available-height) !important;
}

.gui_flow-art-stack-scene .gui_flow-art-stack-card .gui_module[data-gui-module-style="gui_flow-art"] {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: var(--gui-flow-art-available-height) !important;
    max-height: none !important;
    overflow: visible !important;
}

.gui_flow-art-stack-mobile {
    perspective: 1300px;
}

.gui_flow-art-stack-mobile .gui_flow-art-stack-card {
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
}

@supports not (height: 100dvh) {
    .gui_flow-art-stack-scene {
        --gui-flow-art-available-height: calc(
                100vh
                - var(--gui-admin-bar-height, 0px)
                - var(--gui-header-height-main, 0px)
        );
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .gui_flow-art-stack-scene {
        perspective: 1300px;
    }

    .gui_flow-art-stack-scene .gui_flow-art-stack-card {
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}