{{-- One case-study section (PRD §11.1); never reached when empty (no empty headings, PRD §11.3). --}}
<x-section :vm="$vm" class="!py-8 lg:!py-10">
    <h2 class="text-h2">{{ $vm->heading }}</h2>
    <x-rich-text :html="$vm->get('body')" class="mt-5" />
    @if ($vm->resolved('figures', []) !== [])
        <div class="mt-6 grid gap-6 md:grid-cols-2">
            @foreach ($vm->resolved('figures') as $figure)
                <figure>
                    <x-media.image :media="$figure['media']" :alt="$figure['alt']" conversion="card" sizes="(min-width: 768px) 50vw, 100vw" class="w-full rounded-[var(--radius-card)] border border-line" />
                    @if ($figure['caption'])<figcaption class="mt-2 text-sm text-muted">{{ $figure['caption'] }}</figcaption>@endif
                </figure>
            @endforeach
        </div>
    @endif
    @if ($vm->get('links', []) !== [])
        <ul class="mt-6 space-y-1">
            @foreach ($vm->get('links') as $link)
                <li><a href="{{ $link['url'] }}" target="_blank" rel="noopener" class="inline-flex min-h-11 items-center gap-1"
                       data-track="external_link_click" data-track-props='{"type":"case_study"}'>{{ $link['label'] }} <x-icon name="heroicon-o-arrow-top-right-on-square" class="size-4" /><span class="sr-only">{{ __('portfolio.a11y.opens_new_tab') }}</span></a></li>
            @endforeach
        </ul>
    @endif
</x-section>