<div>
    @if ($post != null && isset($post->slug))

        <div class="relative flex flex-col justify-end overflow-hidden bg-theme-background max-h-[600px] lg:max-h-[800px] my-9">
            <a class="relative flex cursor-pointer flex-col justify-end overflow-hidden bg-theme-background max-h-[600px] lg:max-h-[800px]"
               href="{{ route('post.show_by_slug', [$post->slug]) }}">

                <!-- Photo as background - full width -->
                @if ($media != null && method_exists($media, '__invoke'))
                    <div class="absolute inset-0 z-0 h-full w-full">
                        {{ $media('4_3', ['class' => 'absolute inset-0 z-0 h-full w-full object-cover blur-[1px]']) }}
                    </div>
                @else
                    <!-- Default background if no image -->
                    <div class="absolute inset-0 z-0 h-full w-full bg-gradient-to-br from-primary-700 to-theme-brand"></div>
                @endif

                <!-- Optional overlay for contrast -->
                <div class="absolute inset-0 z-10 bg-black bg-opacity-65"></div>

                <!-- All card content on top of photo - constrained to max-7xl -->
                <div class="relative z-20 flex h-full flex-col justify-between w-full mx-auto max-w-7xl px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-28 text-white">
                    <div class="space-y-3">
                        <div class="flex items-start gap-4">
                            <h2 class="text text-3xl lg:text-6xl font-semibold leading-tight pr-16 md:pr-20">
                                {{ $post->title }}
                            </h2>
                        </div>
                        <div>
                            <h4 class="inline-block items-center rounded-sm bg-theme-brand px-2 pb-1 pt-0.5 text-sm lg:text-xl font-normal">
                                {{ $post->category }}
                            </h4>
                        </div>
                    </div>
                    <div class="mx-6 my-4 flex items-center justify-center">
                        @if (isset($post->excerpt))
                            <p class="w-full text-base md:text-xl lg:text-2xl font-normal leading-relaxed lg:leading-loose line-clamp-8">
                                {{ $post->excerpt }}
                            </p>
                        @endif
                    </div>
                    <!-- Bottom section: author and address -->
                    <div class="flex flex-wrap items-end gap-4">
                        <h2 class="text-lg md:text-2xl lg:text-4xl ml-auto pt-3 font-semibold text-white">
                            @if (isset($post->venue))
                                {{ $post->venue . ' ' . $post->city}}
                            @endif
                            @if (isset($post->from))
                                <span class="text-center font-semibold">
                                   &nbsp; {{ Illuminate\Support\Carbon::parse($post->from)->translatedFormat('d F') }}
                                   &nbsp; {{ Illuminate\Support\Carbon::parse($post->from)->format('H:i') . ' ' . __('messages.hour_abbrevation') }}
                                </span>
                            @endif
                        </h2>
                    </div>
                </div>
            </a>

            <!-- Like button positioned absolutely outside anchor tag (only for authenticated users) -->
            {{-- @auth
                    @livewire('reaction-button', [
                        'typeName' => 'like',
                        'showCounter' => true,
                        'reactionCounter' => $post['like_count'],
                        'modelClass' => $post['model'],
                        'modelId' => $post['id'],
                        'size' => 'w-10 h-10',
                        'inverseColors' => true,
                    ], key('like-' . $post['model'] . '-' . $post['id'] . '-' . $postNr))
                </div>
            @endauth --}}
        </div>

    @endif
</div>
