@php
    $count = ['two' => 2, 'two_wide_start' => 2, 'two_wide_end' => 2, 'three' => 3, 'four' => 4][$variant] ?? 2;
    $grid = match ($variant) {
        'two_wide_start' => 'md:grid-cols-3 [&>*:first-child]:md:col-span-2',
        'two_wide_end'   => 'md:grid-cols-3 [&>*:last-child]:md:col-span-2',
        'three'          => 'md:grid-cols-2 lg:grid-cols-3',
        'four'           => 'sm:grid-cols-2 lg:grid-cols-4',
        default          => 'md:grid-cols-2',
    };
    $gap = ['none' => 'gap-0', 'sm' => 'gap-4', 'md' => 'gap-8', 'lg' => 'gap-12'][$block->get('gap', 'md')] ?? 'gap-8';
    $valign = ['start' => 'items-start', 'center' => 'items-center', 'stretch' => 'items-stretch'][$block->get('vertical_align', 'stretch')] ?? 'items-stretch';
    $reverse = $block->get('reverse_on_mobile') ? 'flex-col-reverse md:flex-row' : '';
@endphp
@php
    /*
     * Columns read their children from the numbered slots col1..colN. A child
     * sitting in the generic 'default' slot — which is what a blueprint import
     * or a hand-built tree naturally produces — matched no column and was
     * dropped without a trace: no error, no empty box, just missing content.
     * Those children are dealt out across the columns instead.
     */
    $loose = $block->children->where('slot', 'default')->values();
@endphp

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 {{ $grid }} {{ $gap }} {{ $valign }} {{ $reverse }}">
        @for ($i = 1; $i <= $count; $i++)
            <div class="ec-column min-w-0">
                {!! $renderer->renderChildren($block, 'col' . $i, $ctx) !!}

                @php $spill = $loose->slice($i - 1)->filter(fn ($c, $k) => ($k - ($i - 1)) % $count === 0); @endphp
                @if ($spill->isNotEmpty())
                    {!! $renderer->renderMany($spill, $ctx) !!}
                @endif
            </div>
        @endfor
    </div>
</div>
