/* =============================================================================
   Modular Block Container - Homogenized Layout Shell
   =============================================================================

   Group type:  vertical stack (flex column).
   Column type: responsive CSS Grid with N columns (2 to 4 on desktop, collapses
                on tablet and mobile via the same min() trick as cards-grid).

   Per the composition pivot (see _dev/specs/composition-pivot.md), this block
   does only layout. Section heading, CTAs, and section background compose
   externally in the parent modular-block__section.
*/

/* Margin-inline fallback chain:
   - --modular-container-align-self (set when the editor picks left / center /
     right on this container's Align Self field)
   - --section-content-align (set by the parent section based on its
     Content Alignment field)
   - `auto` (no inheritance available; centers when max-width is set,
     no visible effect otherwise)

   Max-width fallback chain (v1.0.6 Section Defaults cascade):
   - --modular-container-max-width (this container's own Max Width field)
   - --section-override-inner-max-width (parent section's Inner Max Width field)
   - --brand-section-inner-max-width (Brand Identity Section Defaults)
   - 100% (nothing configured anywhere)
   The section caps its __inner at the same chain, so the section-level values
   are usually already applied by the parent; reading them here keeps the
   container consistent if it ever renders outside that inner wrapper. */
.modular-block-container {
    width:         100%;
    max-width:     var( --modular-container-max-width, var( --section-override-inner-max-width, var( --brand-section-inner-max-width, 100% ) ) );
    margin-inline: var( --modular-container-align-self, var( --section-content-align, auto ) );
}

/* -- Group ----------------------------------------------------------------- */

.modular-block-container--group {
    display:        flex;
    flex-direction: column;
    gap:            var( --modular-container-gap, 12px );
}

/* -- Column --------------------------------------------------------------- */

.modular-block-container--columns {
    display:               grid;
    grid-template-columns: repeat( var( --modular-container-columns, 3 ), 1fr );
    gap:                   var( --modular-container-gap, 12px );
    align-items:           var( --modular-container-v-align, stretch );
    justify-items:         var( --modular-container-h-align, stretch );
}

/* Responsive: collapse columns on narrower viewports. The min() trick keeps
   2-col grids at 2 columns and steps 3- and 4-col grids down to 2 on tablet. */
@media ( max-width: 900px ) {
    .modular-block-container--columns {
        grid-template-columns: repeat( min( var( --modular-container-columns, 3 ), 2 ), 1fr );
    }
}

@media ( max-width: 560px ) {
    .modular-block-container--columns {
        grid-template-columns: 1fr;
    }
}

/* -- Editor preview placeholder slots ------------------------------------- */

/* Column-type slots: card-shaped placeholders showing the grid structure.
   Group-type slots: full-width rectangles showing the vertical stack shape.
   Source order: slots come before InnerBlocks in render.php, so when slots
   are visible they sit first; the appender "+" button (hoisted from the
   InnerBlocks layout via the display: contents rule below) sits after. */
.modular-block-container__placeholder-slot {
    aspect-ratio:    4 / 3;
    border:          2px dashed rgba( 0, 0, 0, 0.15 );
    border-radius:   8px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         1.5rem 1rem;
    text-align:      center;
    color:           rgba( 0, 0, 0, 0.55 );
}

.modular-block-container__placeholder-slot--group {
    aspect-ratio: auto;
    min-height:   80px;
    padding:      1.25rem 1rem;
}

.modular-block-container__placeholder-slot-title {
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin:         0 0 0.5rem;
    opacity:        0.85;
}

.modular-block-container__placeholder-slot-hint {
    font-size:   0.85rem;
    line-height: 1.5;
    max-width:   240px;
    margin:      0 auto;
}

/* Hide all preview slots as soon as the container receives any block child. */
.acf-block-preview .modular-block-container:has( .block-editor-block-list__block ) > .modular-block-container__placeholder-slot {
    display: none;
}

/* -- Editor wrapper hoist ------------------------------------------------- */

/* Editor preview: Gutenberg wraps InnerBlocks children in two nested layers
   - `.block-editor-inner-blocks` and inside it `.block-editor-block-list__layout`.
   Both would otherwise sit as grid/flex children, collapsing the layout to one
   or two cells. `display: contents` on each layer makes them transparent in
   the layout tree so the actual inner blocks (plus the block-list-appender
   "+" button) become direct children. Editor-only; no impact on the front-end
   DOM (these wrappers do not exist on the front end). */
.acf-block-preview .modular-block-container > .block-editor-inner-blocks,
.acf-block-preview .modular-block-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: contents;
}

/* Default Gutenberg block margins compete with the container `gap`. After the
   display: contents hoist above, inner blocks and the appender are direct
   children but still carry editor `wp-block` margins, which floor the visible
   spacing at the default margin even when the editor sets a smaller Gap field
   value. Zero those margins out so `gap` is the only spacing contributor. */
.acf-block-preview .modular-block-container > .wp-block {
    margin: 0;
}