/* =========================================================
   MICROLEARNING BIBLIOTHEEK — open kaart in de normale grid
   v0.18.132

   Doel:
   - geopende kaart blijft onderdeel van de pagina
   - geen overlap met kaarten eronder
   - geen zwevende/floating bediening
   - CTA blijft op de logische plek onderaan de kaart
   - geopende kaart wordt tijdelijk bovenaan in de grid geplaatst
   - bij sluiten terug naar de oorspronkelijke plek
   - geen automatische scroll
   ========================================================= */

/* De grid moet zijn hoogte altijd laten bepalen door de inhoud. */
.vk8-library-grid{
    align-items: start !important;
    overflow: visible !important;
}

/*
 * Een geopende kaart mag nooit als overlay/absoluut element boven
 * andere kaarten komen te liggen. Op desktop krijgt hij een eigen
 * volledige rij; de volgende kaarten schuiven daardoor vanzelf omlaag.
 */
.vk8-library-card.is-open,
.vk8-library-card[aria-expanded="true"]{
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    /* Visueel als eerste item tonen zonder de kaart in de DOM te verplaatsen. */
    order: -1 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 1 !important;
}

/* Ook het uitklappaneel blijft gewoon in de documentstroom. */
.vk8-library-card.is-open .vk8-library-card-panel,
.vk8-library-card[aria-expanded="true"] .vk8-library-card-panel{
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    box-sizing: border-box !important;
}

/*
 * De footer/CTA blijft onderaan staan. In 0.18.129 werd deze naar boven
 * gehaald; dat maakte onduidelijk bij welke kaart de knop hoorde.
 */
.vk8-library-card.is-open .vk8-library-footer,
.vk8-library-card[aria-expanded="true"] .vk8-library-footer{
    order: initial !important;
    position: static !important;
    margin-top: 22px !important;
    padding-top: 18px !important;
    background: transparent !important;
    border-top: 1px solid rgba(23,100,95,.14) !important;
    border-bottom: 0 !important;
}

.vk8-library-card.is-open .vk8-library-action,
.vk8-library-card[aria-expanded="true"] .vk8-library-action{
    width: auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Oude tijdelijke elementen uit eerdere fixes mogen nooit terugkomen. */
.vk8-ml-library-floating-cta,
.vk8-ml-library-floating-close,
.vk8-ml-back-overview,
.vk8-ml-back-to-overview,
.vk8-library-back-overview,
.vk8-ml-open-actions,
.vk8-ml-compact-actions{
    display: none !important;
}

/* Op tablet/mobiel is er maar één logische kolom; dezelfde flow blijft gelden. */
@media (max-width: 991px){
    .vk8-library-card.is-open,
    .vk8-library-card[aria-expanded="true"]{
        grid-column: 1 / -1 !important;
    }
}