{{-- Facility / Club & ECA / USP cards: same design as the homepage "Why Choose Us" cards (green gradient card on the normal page background) --}}
<div
    class="grid w-full max-w-[1280px] px-4 sm:px-6 lg:px-8 grid-cols-1 justify-items-center sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
    @foreach ($datas as $key => $data)
        @php
            $name = app()->getLocale() == 'en' ? $data->name_en : (isset($data->name_np) ? $data->name_np : $data->name_en);
            $short = app()->getLocale() == 'en'
                ? $data->short_description_en
                : (isset($data->short_description_np) ? $data->short_description_np : $data->short_description_en);
        @endphp

        <a href="{{ route($route, $data->slug) }}" aria-label="{{ $name }}"
            class="group block w-full max-w-sm cursor-pointer min-h-[360px] rounded-[20px] bg-brand-gradient shadow-md border border-transparent hover:border-accent hover:shadow-xl transition-[border-color,box-shadow] duration-300">
            <div class="px-3 py-4 flex flex-col space-y-6">
                <h3 class="font-semibold text-base text-accent">
                    <i class="{{ $data->icon ?? '' }}"></i>
                    {{ $name }}
                </h3>

                <p class="font-poppins font-normal text-white text-base leading-6 tracking-normal line-clamp-2">
                    {{ $short }}
                </p>

                <div class="w-full h-52 relative">
                    <img loading="lazy" decoding="async" class="w-full h-full object-cover rounded-xl"
                        src="{{ asset($data->thumbnail_image) }}" alt="" />

                    <span aria-hidden="true"
                        class="absolute bottom-2 right-2 w-8 h-8 flex items-center justify-center bg-accent rounded-full shadow-md transition-transform duration-200 group-hover:scale-125">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary transform -rotate-45"
                            fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                        </svg>
                    </span>
                </div>
            </div>
        </a>
    @endforeach
</div>