{{#
    @name Cards
    @desc The Cards page builder block.
    @set page.page_builder.cards
#}}

<!-- /page_builder/_cards.antlers.html -->
{{ partial:page_builder/block class="gap-y-8" }}
    {{ if block:heading }}
        <header class="span-content grid md:grid-cols-12 gap-fluid-grid-gap">
            <h2 class="md:col-start-3 md:col-span-8 text-center">{{ block:heading }}</h2>
        </header>
    {{ /if }}

    <ul class="span-content grid md:grid-cols-12 gap-fluid-grid-gap">
        {{ block:cards }}
            <li
                class="
                    flex flex-col stack-4 justify-between items-start p-6 border border-neutral/10 shadow-lg rounded
                    {{ switch(
                        (total_results === 1) => 'md:col-span-8 md:col-start-3',
                        (total_results === 2) => 'md:col-span-6',
                        (total_results > 2) => 'md:col-span-8 md:col-start-3 lg:col-span-4 lg:col-start-0',
                        () => void
                    )}}
                "
            >
                <div class="stack-2">
                    {{ if button }}
                        {{ button }}
                            <a class="group " {{ partial:statamic-peak-tools::snippets/button_attributes }} aria-hidden="true" tabindex="-1">
                                <h3 class="group-hover:underline">{{ heading }}</h3>
                            </a>
                        {{ /button }}
                        <h3 class="sr-only">{{ heading }}</h3>
                    {{ else }}
                        <h3>{{ heading }}</h3>
                    {{ /if }}

                    {{ if text }}
                        <p>{{ text }}</p>
                    {{ /if }}
                </div>

                {{ button }}
                    {{ partial:components/button }}
                {{ /button }}
            </li>
        {{ /block:cards }}
    </ul>
{{ /partial:page_builder/block }}
<!-- End: /page_builder/_cards.antlers.html -->