{{-- Savoir-faire --}}
<section id="savoir-faire" class="scroll-mt-20 bg-encre py-24 text-ivoire lg:py-40">
    <div class="mx-auto max-w-[1440px] px-5 sm:px-10 lg:px-14">
        <div class="mb-20 grid gap-8 lg:mb-32 lg:grid-cols-12">
            <p class="kicker text-laiton lg:col-span-3">{{ $home->plain($data['kicker'] ?? '') }}</p>
            <h2 class="font-serif text-[clamp(2.2rem,4.6vw,4.2rem)] leading-[1.02] lg:col-span-9 [&_em]:text-laiton">{{ $home->rich($data['title'] ?? '') }}</h2>
        </div>

        <ol class="flex flex-col gap-24 lg:gap-36">
            @foreach (array_values($data['steps'] ?? []) as $index => $step)
                <li class="grid items-center gap-10 lg:grid-cols-12 lg:gap-0">
                    <x-photo :src="$home->image($step['image'] ?? null)" :alt="$step['title'] ?? ''" :class="Arr::toCssClasses([
                        'aspect-[4/3] lg:col-span-7',
                        'lg:col-start-6 lg:row-start-1' => $index % 2 === 1,
                    ])" />
                    <div @class([
                        'lg:col-span-4 lg:row-start-1',
                        'lg:col-start-9' => $index % 2 === 0,
                        'lg:col-start-1' => $index % 2 === 1,
                    ])>
                        <span class="font-serif text-6xl text-laiton italic">{{ ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'][$index] ?? $index + 1 }}</span>
                        <h3 class="mt-6 font-serif text-[clamp(1.9rem,3vw,2.8rem)] leading-tight">{{ $step['title'] ?? '' }}</h3>
                        <p class="mt-6 max-w-md leading-relaxed text-gris-clair">{{ $step['text'] ?? '' }}</p>
                        @if (filled($step['url'] ?? null) && filled($data['link_label'] ?? null))
                            <a href="{{ $home->url($step['url']) }}" class="lien-filet mt-8 text-ivoire/80 hover:text-ivoire">{{ $data['link_label'] }}</a>
                        @endif
                    </div>
                </li>
            @endforeach
        </ol>
    </div>
</section>