/*
Block Name: Nested Blocks
Description: A wrapper block that places other Toast blocks inside a shared grid layout, background, and padding.
*/


/* ============================================================
   INNER BLOCK RESET
   When blocks render inside Nested Blocks, the_block_head() outputs
   a <div class="toast-nested-child"> instead of a <section>.
   These rules ensure that div behaves as a clean content column
   with no leftover spacing from the block's normal standalone styles.
============================================================ */

.block-nested-blocks .toast-nested-child {
    /* Remove any padding or margin the block's own CSS may apply to its root element */
    padding: 0 !important;
    margin: 0 !important;

    /* Ensure the child block fills its grid column */
    width: 100%;
}

/* Inner containers: the nested child blocks still output their own .container
   divs. Since they're already inside the outer Nested Blocks container,
   those inner containers should be full-width with no extra margin. */
.block-nested-blocks .toast-nested-child .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


/* ============================================================
   EDITOR DISPLAY
   These rules control how the block looks in the Gutenberg editor.
   The PHP global flag mechanism works on the frontend; in the editor
   InnerBlocks renders differently so we still need some CSS help.
============================================================ */

/* In the editor, the grid div can't use the inline style reliably
   because ACF preview mode renders differently. Force it to block
   so the inner block appender sits below, not inline. */
.wp-block-acf-nested-blocks .nested-blocks-grid {
    display: block !important;
}

/* The Gutenberg block list inside the grid should display as flex
   so blocks sit side by side when previewing. */
.wp-block-acf-nested-blocks .block-editor-block-list__layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

/* Each inner block in the editor should take equal space */
.wp-block-acf-nested-blocks .block-editor-block-list__layout > * {
    flex: 1;
    min-width: 0; /* Prevents flex children overflowing */
}


/* ============================================================
   RESPONSIVE
   Stack grid columns vertically on mobile.
   The inline grid-template-columns style is overridden here.
============================================================ */

@media (max-width: 768px) {
    .block-nested-blocks .nested-blocks-grid {
        grid-template-columns: 1fr !important;
    }
}