@props([
    'release' => null,
    'recommended' => false,
])

@php
    $categoryName = $release?->localizedCategoryName();
    $company = $release?->company?->name;
    $city = $release?->company?->city ?? null;
    $title = $release->title;
    $href = route('release.detail', ['slug' => $release->slug]);

    $published = $release->published_at;
    if ($published) {
        $timeLine = $published->format('H:i');
        $dateLine = $published->isYesterday() ? __('web.shared.yesterday') : $published->translatedFormat('j. M');
        $datetimeAttr = $published->toIso8601String();
    } else {
        $timeLine = '—';
        $dateLine = '';
        $datetimeAttr = null;
    }

    $bpCatClass = 'bp-cat self-start min-w-0 break-words leading-snug max-md:mt-1 max-md:max-w-[8rem] max-md:text-[9px] max-md:tracking-[0.1em]';
@endphp

<a href="{{ $href }}" @class([
    'grid items-start py-3.5 border-b border-bg-rule cursor-pointer',
    'hover:bg-bg-elev transition-colors group',
    'pl-1.5 pr-2 sm:pl-2',
    // <md: 2 Spalten — links Zeit/Datum/Rubrik, rechts Inhalt
    'max-md:grid-cols-[auto_minmax(0,1fr)] max-md:gap-x-3',
    // md+: 3 Spalten wie Desktop-Mockup
    'md:grid-cols-[3.75rem_6.25rem_minmax(0,1fr)] md:gap-x-4',
])>
    <div class="flex min-w-0 shrink-0 flex-col gap-0.5 tabular-nums pt-0.5">
        @if ($datetimeAttr)
            <time datetime="{{ $datetimeAttr }}" class="font-mono text-[11px] leading-none text-ink-3 sm:text-[12px]">{{ $timeLine }}</time>
        @else
            <span class="font-mono text-[11px] leading-none text-ink-3 sm:text-[12px]">{{ $timeLine }}</span>
        @endif
        @if ($dateLine !== '')
            <span class="text-[9px] leading-tight text-ink-4 sm:text-[10px]">{{ $dateLine }}</span>
        @endif
        {{-- Mobil: Rubrik unter dem Datum in derselben Spalte --}}
        <span class="{{ $bpCatClass }} md:hidden">{{ $categoryName }}</span>
    </div>
    {{-- Desktop: Rubrik in eigener Spalte -- span nur sichtbar ab md, um Tab-Reihenfolge / SR konsistent zu halten --}}
    <span class="{{ $bpCatClass }} hidden md:inline">{{ $categoryName }}</span>
    <div class="min-w-0">
        <div class="font-serif text-[15.5px] leading-[1.3] font-medium text-ink transition-colors group-hover:text-brand flex flex-wrap items-baseline gap-2">
            <span>{{ $title }}</span>
            @if ($recommended)
                <span class="inline-flex items-center gap-1 whitespace-nowrap border border-brand/30 bg-brand/[0.04] px-1.5 py-px font-mono text-[9.5px] font-bold uppercase tracking-[0.1em] text-brand">
                    <svg width="9" height="9" viewBox="0 0 12 12" class="flex-shrink-0" aria-hidden="true">
                        <path d="M6 1l1.5 3.2 3.5.4-2.6 2.4.7 3.5L6 8.8l-3.1 1.7.7-3.5L1 4.6l3.5-.4z" fill="currentColor" />
                    </svg>
                    {{ __('web.shared.recommendation') }}
                </span>
            @endif
        </div>
        @if ($company)
            <div class="mt-1 text-[11px] text-ink-3">
                {{ $company }}@if ($city) · {{ $city }} @endif
            </div>
        @endif
    </div>
</a>