@props(['title' => '', 'subtitle' => null])

{{--
    Mobile stacks: title block on its own row, then the actions on a row that is
    allowed to wrap. The old side-by-side grid gave the action column its
    intrinsic width, so a page with a view toggle plus two buttons pushed the
    document wider than the viewport — which is what made the fixed bottom dock
    look wider than the header and the cards. Nothing here may exceed its column.
--}}
<div {{ $attributes->merge(['class' => 'mb-6 flex flex-col gap-3 sm:mb-8 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-4']) }}>
    <div class="min-w-0">
        <h1 class="break-words text-2xl font-bold tracking-tight text-slate-900 sm:truncate sm:text-[26px]">{{ $title }}</h1>
        @if ($subtitle)
            <p class="mt-1 text-sm text-slate-500">{{ $subtitle }}</p>
        @endif
    </div>

    @if (! \Illuminate\Support\Str::of($slot)->trim()->isEmpty())
        <div class="flex min-w-0 flex-wrap items-center gap-2 sm:ml-auto sm:shrink-0 sm:gap-3">
            {{ $slot }}
        </div>
    @endif
</div>