/* ==========================================================================
   1. FRONTEND E BACKEND: Struttura Base (Prestazioni e Variabili CSS)
   ========================================================================== */
.mf-custom-grid-block {
    box-sizing: border-box;
}

.mf-grid-internal-wrapper {
    display: grid !important;
    grid-template-columns: repeat(var(--mf-grid-cols, 3), 1fr) !important;
    gap: var(--mf-grid-gap, 25px) !important; 
    width: 100% !important;
}

/* ==========================================================================
   2. BACKEND (EDITOR): Fix di stabilità per isolare la Matrioska di Gutenberg
   ========================================================================== */
.wp-block.mf-custom-grid-block .mf-grid-internal-wrapper {
    display: block !important;
}

.wp-block.mf-custom-grid-block .mf-grid-internal-wrapper .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid !important;
    grid-template-columns: repeat(var(--mf-grid-cols, 3), 1fr) !important;
    gap: var(--mf-grid-gap, 25px) !important;
    width: 100% !important;
}

/* Isolamento delle celle nell'editor */
.wp-block.mf-custom-grid-block .mf-grid-internal-wrapper .block-editor-inner-blocks > .block-editor-block-list__layout > * {
    grid-column: span 1 !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important; 
    outline: 1px dashed #e2e8f0;
    outline-offset: -2px;
    border-radius: 6px;
}

/* Fix di stabilità dell'Appender: impedisce le sovrapposizioni fluttuanti */
.wp-block.mf-custom-grid-block .mf-grid-internal-wrapper .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender {
    grid-column: 1 / -1 !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 50px !important;
    position: relative !important;
    background: transparent !important;
    outline: none !important;
}

.wp-block.mf-custom-grid-block .mf-grid-internal-wrapper .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:hover {
    outline: 2px dashed #007cba;
    background-color: rgba(0, 124, 186, 0.03);
}

/* ==========================================================================
   3. RESPONSIVE (Performance: Nessun ricalcolo JS, solo Media Query veloci)
   ========================================================================== */
@media (max-width: 991px) {
    .mf-grid-internal-wrapper,
    .wp-block.mf-custom-grid-block .mf-grid-internal-wrapper .block-editor-inner-blocks > .block-editor-block-list__layout {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .mf-grid-internal-wrapper,
    .wp-block.mf-custom-grid-block .mf-grid-internal-wrapper .block-editor-inner-blocks > .block-editor-block-list__layout {
        grid-template-columns: 1fr !important;
    }
}