{{-- Ouverture : texte posé sur la bannière, affichée en entier et assombrie. --}}
<section class="relative flex min-h-[max(25vw,600px)] items-center overflow-hidden bg-encre text-ivoire">
    @if ($image = $home->image($data['image'] ?? null))
        <div aria-hidden="true" class="absolute inset-0">
            {{-- Remplissage flou lorsque l'écran est plus haut que la bannière. --}}
            <img src="{{ $image }}" alt="" class="absolute inset-0 size-full scale-125 object-cover blur-3xl brightness-50">
            {{-- Bannière : recadrée sur le panneau en mobile, jamais recadrée à partir de md. --}}
            <img src="{{ $image }}" alt="" fetchpriority="high"
                class="absolute inset-0 size-full object-cover object-[64%_50%] md:object-contain md:object-center">
            {{-- Voile gris pour la lisibilité du texte. --}}
            <div class="absolute inset-0 bg-encre/65"></div>
        </div>
    @endif

    <div class="relative mx-auto grid w-full max-w-[1440px] items-end gap-8 px-5 pt-28 pb-12 sm:px-10 lg:grid-cols-12 lg:gap-10 lg:pt-24 lg:pb-10 2xl:px-14">
        <div class="lg:col-span-7 [text-shadow:0_2px_20px_rgb(21_17_15/0.55)]">
            @if (filled($data['kicker'] ?? null))
                <p class="kicker mb-5 text-laiton">{{ $home->plain($data['kicker']) }}</p>
            @endif
            <h1 class="font-serif text-[clamp(2.4rem,4.4vw,5.6rem)] leading-[1] tracking-[-0.01em] [&_em]:text-ivoire/90">
                {{ $home->rich($data['title'] ?? '') }}
            </h1>
        </div>
        <div class="flex flex-col gap-6 lg:col-span-5 lg:items-end lg:text-right">
            @if (filled($data['text'] ?? null))
                <p class="max-w-sm leading-relaxed text-ivoire/90 [text-shadow:0_1px_12px_rgb(21_17_15/0.7)]">{{ $home->rich($data['text']) }}</p>
            @endif
            <div class="flex flex-wrap items-center gap-x-8 gap-y-5 lg:justify-end">
                @if (filled($data['primary_label'] ?? null))
                    <a href="{{ $home->url($data['primary_url'] ?? null) }}" class="bouton bouton-clair bg-encre/30 backdrop-blur-sm">{{ $data['primary_label'] }}</a>
                @endif
                @if (filled($data['secondary_label'] ?? null))
                    <a href="{{ $home->url($data['secondary_url'] ?? null) }}" class="lien-filet text-ivoire hover:text-ivoire">{{ $data['secondary_label'] }}</a>
                @endif
            </div>
        </div>
    </div>
</section>