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

<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-6">
    <div class="min-w-0">
        @if ($eyebrow)
            <p class="text-xs font-semibold uppercase tracking-wider text-brand-600 mb-1">{{ $eyebrow }}</p>
        @endif
        <h1 class="text-3xl md:text-[36px] font-bold text-ink-900 font-display tracking-tight text-balance">{{ $title }}</h1>
        @if ($subtitle)
            <p class="mt-1 text-base text-ink-500 max-w-4xl">{{ $subtitle }}</p>
        @endif
    </div>
    @if ($slot->isNotEmpty())
        <div class="flex items-center gap-2 flex-shrink-0">{{ $slot }}</div>
    @endif
</div>