{{-- Text beside an image; stacks on mobile; renders as text-only when there is no image (PRD §13.2). --}}
@php($image = $vm->resolved('image'))
<x-section :vm="$vm">
    <div @class(['container-site grid items-start gap-10', 'lg:grid-cols-2' => $image])>
        <div @class(['lg:order-2' => $image && $vm->get('image_position') === 'left'])>
            <x-section-heading :title="$vm->get('heading')" class="mb-6" />
            <x-rich-text :html="$vm->get('body')" />
        </div>
        @if ($image)
            <x-media.image :media="$image" :alt="$vm->get('image_alt')" conversion="hero" sizes="(min-width: 1024px) 50vw, 100vw"
                           @class(['w-full rounded-[var(--radius-card)] object-cover', 'lg:order-1' => $vm->get('image_position') === 'left']) />
        @endif
    </div>
</x-section>