/* MwExpandableContent — Global Stylesheet
   Prefix: mw-ec-*
   Headless expandable body used by MwAccordionItem and MwDataGrid detail rows.
   ========================================================================= */

/* NOTE: Body — expand/collapse animation via CSS grid
   The grid-template-rows trick transitions from 0fr to 1fr,
   which animates height from 0 to auto without needing a fixed max-height. */

.mw-ec-body {
    --mw-ec-duration: 300ms;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--mw-ec-duration) cubic-bezier(0.25, 0.8, 0.5, 1);
}

.mw-ec-body--expanded {
    grid-template-rows: 1fr;
}

/* NOTE: Hidden state — used by LazyOnce and Eager modes when collapsed.
   Content stays in DOM but grid rows collapse to zero. */
.mw-ec-body--hidden {
    grid-template-rows: 0fr;
}

/* NOTE: Clip layer — overflow:hidden with NO padding.
   MUST have no padding so the grid row can fully collapse to zero height. */

.mw-ec-clip {
    overflow: hidden;
}

.mw-ec-body:not(.mw-ec-body--expanded) .mw-ec-clip {
    visibility: hidden;
}

.mw-ec-body--expanded .mw-ec-clip {
    visibility: visible;
}

/* NOTE: Inner content with padding.
   Lives inside the clip layer so its padding doesn't interfere
   with the grid collapse animation. */

.mw-ec-inner {
    padding: 16px 20px 20px 20px;
}

/* NOTE: Loading indicator */

.mw-ec-loading {
    padding: 0 20px 12px 20px;
}