/* Stacked Cards: one measured card height shared by the complete pinned stack. */

.gui_stacked-cards-scene {
    --gui-stacked-card-height: 420px;
    --gui-stacked-stage-height: 480px;
    --gui-stacked-stage-pad-top: 40px;
    --gui-stacked-stage-pad-bottom: 20px;
    --gui-stacked-card-inline-gap: clamp(0rem, 2vw, 1.5rem);

    position: relative;
    width: 100%;
    /*overflow: hidden;*/
    isolation: isolate;
}

#gui #gui_sub .gui_li.gui_stacked-cards-scene {
    position: relative;
    top: auto;
}

/*.gui_stacked-cards-scene > .gui_expander,*/
/*.gui_stacked-cards-scene > .gui_expander > .gui_body,*/
.gui_stacked-cards-scene > .gui_expander > .gui_body > .gui_expander,
.gui_stacked-cards-scene .gui_stacked-cards-module > .gui_expander,
.gui_stacked-cards-scene .gui_stacked-cards-module > .gui_expander > .gui_body,
.gui_stacked-cards-scene .gui_stacked-cards-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_stacked-cards-scene .gui_stacked-cards-module {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

.gui_stacked-cards-scene .gui_stacked-cards-intro {
    position: relative !important;
    top: auto !important;
    z-index: 200;
    flex: 0 0 auto;
}

.gui_stacked-cards-scene .gui_stacked-cards-stage {
    position: relative !important;
    top: auto !important;
    flex: 0 0 var(--gui-stacked-stage-height) !important;
    width: 100% !important;
    height: var(--gui-stacked-stage-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    /*overflow: hidden !important;*/
}

.gui_stacked-cards-scene .gui_stacked-cards-fill {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.gui_stacked-cards-scene .gui_stacked-cards-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;
    /*overflow: hidden !important;*/
}

.gui_stacked-cards-scene .gui_stacked-card {
    position: absolute !important;
    top: var(--gui-stacked-stage-pad-top) !important;
    left: 50% !important;
    display: block !important;
    width: calc(100% - (2 * var(--gui-stacked-card-inline-gap))) !important;
    height: var(--gui-stacked-card-height) !important;
    min-height: var(--gui-stacked-card-height) !important;
    max-height: var(--gui-stacked-card-height) !important;
    margin: 0 !important;
    /*overflow-x: hidden !important;*/
    overflow-y: auto !important;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box !important;
    transform-origin: 50% 0%;
    backface-visibility: hidden;
    border-top-left-radius: var(--gui-border-radius-top-left, 0px);
    border-top-right-radius: var(--gui-border-radius-top-right, 0px);
    border-bottom-right-radius: var(--gui-border-radius-bottom-right, 0px);
    border-bottom-left-radius: var(--gui-border-radius-bottom-left, 0px);
    background: var(--gui-bg, #fff);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
    will-change: transform, opacity;
    touch-action: pan-y;
}

.gui_stacked-cards-scene .gui_stacked-card::-webkit-scrollbar {
    display: none;
}

.gui_stacked-cards-scene .gui_stacked-card[data-gui-stacked-card-state="active"] {
    pointer-events: auto;
    visibility: visible !important;
}

.gui_stacked-cards-scene .gui_stacked-card[data-gui-stacked-card-state="covered"],
.gui_stacked-cards-scene .gui_stacked-card[data-gui-stacked-card-state="queued"] {
    pointer-events: none;
}

.gui_stacked-cards-scene .gui_stacked-card > .gui_expander,
.gui_stacked-cards-scene .gui_stacked-card > .gui_expander > .gui_body,
.gui_stacked-cards-scene .gui_stacked-card > .gui_expander > .gui_body > .gui_expander,
.gui_stacked-cards-scene .gui_stacked-card .gui_module-holder,
.gui_stacked-cards-scene .gui_stacked-card .gui_module {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

/* Temporarily releases the shared height while JavaScript measures content. */
.gui_stacked-cards-scene.gui_stacked-cards-measuring .gui_stacked-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.gui_stacked-cards-scene.gui_stacked-cards-measuring .gui_stacked-card > .gui_expander,
.gui_stacked-cards-scene.gui_stacked-cards-measuring .gui_stacked-card > .gui_expander > .gui_body,
.gui_stacked-cards-scene.gui_stacked-cards-measuring .gui_stacked-card > .gui_expander > .gui_body > .gui_expander,
.gui_stacked-cards-scene.gui_stacked-cards-measuring .gui_stacked-card .gui_module-holder,
.gui_stacked-cards-scene.gui_stacked-cards-measuring .gui_stacked-card .gui_module {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.gui_stacked-cards-mobile {
    --gui-stacked-card-inline-gap: clamp(0rem, 2.5vw, 0.75rem);
}

.gui_stacked-cards-mobile .gui_stacked-card {
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.15);
}

/* Reduced-motion users receive the ordinary document-flow card list. */
.gui_stacked-cards-flow .gui_stacked-card {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: auto;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .gui_stacked-cards-scene {
        --gui-stacked-card-inline-gap: clamp(0rem, 2.5vw, 0.75rem);
    }

    .gui_stacked-cards-scene .gui_stacked-card {
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.15);
    }
}

#gui #gui_sub .gui_stacked-card > .gui_expander > .gui_body > .gui_expander > .gui_module-holder > .gui_module {height:var(--gui-stacked-card-height) !important;}