<section class="service-editorial section" id="beispiele">
    <div class="section-shell">
        <div class="section-heading" data-reveal>
            <div>
                <p class="eyebrow eyebrow-dark"><span></span> Praxisbeispiele</p>
                <h2>So sieht {{ $service->title }}<br><em>in der Praxis aus.</em></h2>
            </div>
            <p>Jedes Motiv zeigt einen tatsächlichen Bestandteil oder Einsatzbereich dieser Leistung – mit der Erklärung direkt daneben.</p>
        </div>

        <div class="editorial-grid editorial-grid-{{ count($service->editorial_items) }}">
            @foreach($service->editorial_items as $item)
                <article class="editorial-card" data-reveal data-reveal-delay="{{ ($loop->index % 2) * 80 }}">
                    <figure>
                        <img src="{{ $service->editorialImageUrl($item) }}" alt="{{ $item['alt'] }}" loading="lazy" width="900" height="650">
                        <span>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                    </figure>
                    <div>
                        <p class="editorial-eyebrow">{{ $item['eyebrow'] ?? 'Praxis' }}</p>
                        <h3>{{ $item['title'] }}</h3>
                        <p>{{ $item['text'] }}</p>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>
