@php($data = $section['data'] ?? [])
<section class="relative overflow-hidden bg-cream pb-20 pt-28 md:pb-28 md:pt-36">
    @if ($media)<img class="absolute inset-0 h-full w-full object-cover" src="{{ $media->url() }}" alt="{{ $media->translation($locale)?->alt_text ?? '' }}" width="1920" height="1280">@endif
    <div class="absolute inset-0 bg-gradient-to-r from-olive/85 via-olive/55 to-cream/10"></div>
    <div class="container-page relative grid min-h-[60vh] items-center gap-12 md:grid-cols-2">
        <div class="space-y-7 text-cream">
            <div class="inline-flex items-center gap-2 rounded-full border border-cream/20 bg-cream/10 px-4 py-1.5"><span class="h-1.5 w-1.5 rounded-full bg-cream/80"></span><span class="eyebrow text-[10px] text-cream/90">{{ $data['eyebrow'] ?? '' }}</span></div>
            <h1 class="display-hero">{{ $data['title_lead'] ?? '' }} <span class="block italic font-light">{{ $data['title_emphasis'] ?? '' }}</span></h1>
            <p class="max-w-xl text-base leading-relaxed text-cream/85 md:text-lg">{{ $data['summary'] ?? '' }}</p>
        </div>
        <div class="hidden md:block" aria-hidden="true"></div>
    </div>
    @can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="about.hero" :key="'about-inline-'.$locale.'-hero'" />@endcan
</section>