/* test.css - Staging & Experimental Utilities */

/*
   Layout Flow Utility
*/
.layout-flow {
    display: flow-root;
}

/* Icon System (Staging) */
.icon {
    width: 1em;
    height: 1em;
    box-sizing: content-box;
    display: block;
    cursor: pointer;
}

/*
   Dynamic State System (Checkbox Hack)
*/
.state-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.state-target-slide-vertical {
    /* Base transition for closing (hiding) */
    transition: max-height 0.3s ease-in;
    overflow: hidden;
}

/* Adaptive Collapse (Open on Desktop, Collapsible on Mobile) */
@media (max-width: 767.98px) {
    .state-target-collapse-below-level-4 {
        max-height: 0;
    }

    /* Transition for opening (showing) */
    .state-toggle:checked ~ .state-target-collapse-below-level-4 {
        max-height: 800px;
        transition: max-height 0.5s ease-out;
    }
}

/* Ensure Desktop is unaffected by toggle state */
@media (min-width: 768px) {
    .state-target-collapse-below-level-4 {
        max-height: none !important;
        overflow: visible !important;
    }
}