{{-- Variables: $scale, $margin, $logoTop, $logoRight, $logoW, $logoH,
     $titleMarginTop, $titleFont, $catFont, $excerptFont, $excerptMT,
     $bottomBottom, $qrSize, $venueFont, $dateFont, $footerFont, $footerMT
     Plus post data: $heroBase64, $logoWhiteBase64, $translation, $categoryName,
     $brandColor, $pdfExcerpt, $isEvent, $isNews, $isArticle, $isImagePost,
     $post, $meetingCityName, $author, $qrBase64 --}}

{{-- Hero background --}}
@if($heroBase64)
    <img src="{{ $heroBase64 }}" style="position: absolute; top: 0; left: 0; width: {{ $cardW }}mm; height: {{ $cardH }}mm; object-fit: cover; object-position: center center;">
@endif
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; opacity: 0.55;"></div>

{{-- Logo top-right --}}
@if($logoWhiteBase64)
    <div style="position: absolute; top: {{ $logoTop }}; right: {{ $logoRight }}; width: {{ $logoW }}; height: {{ $logoH }}; overflow: hidden;">
        <img src="{{ $logoWhiteBase64 }}" style="width: {{ $logoW }}; height: {{ $logoH }};" alt="{{ config('app.name') }}">
    </div>
@endif

@php
    // Compute title font to fit 2 lines — uses double-underscore vars to avoid parent scope collision
    $__titleText    = mb_strtoupper($translation?->title ?? '');
    $__words        = explode(' ', $__titleText);
    $__maxPt        = $cardTitleMaxPt;
    $__containerMm  = $cardTitleContainerMm;
    $__fitFont      = $__maxPt;
    $__longestWord  = max(array_map('mb_strlen', $__words));
    for ($__try = $__maxPt; $__try >= 10; $__try -= 0.5) {
        $__charW  = $__try * 0.353 * 0.55;
        $__spaceW = $__try * 0.353 * 0.30;
        // A single word must never exceed the container
        if ($__longestWord * $__charW > $__containerMm) continue;
        $__lineW  = 0; $__lines = 1;
        foreach ($__words as $__wi => $__word) {
            $__wordW = mb_strlen($__word) * $__charW;
            $__gap   = $__wi > 0 ? $__spaceW : 0;
            if ($__lineW > 0 && $__lineW + $__gap + $__wordW > $__containerMm) {
                $__lines++; $__lineW = $__wordW;
            } else {
                $__lineW += $__gap + $__wordW;
            }
        }
        if ($__lines <= 2) { $__fitFont = $__try; break; }
    }
    $__computedFont = round($__fitFont, 1) . 'pt';
@endphp
{{-- Title + category badge --}}
<div style="position: absolute; top: 0; left: {{ $margin }}; right: {{ $margin }}; padding-top: {{ $titleMarginTop }};">
    <div style="font-family: 'Oswald', sans-serif; font-weight: 600; font-size: {{ $__computedFont }}; line-height: 0.95; color: #ffffff; text-transform: uppercase; margin-bottom: {{ $excerptMT }};">{{ $translation?->title }}</div>
    @if($categoryName)
        <span style="display: inline-block; background-color: {{ $brandColor }}; color: #ffffff; padding: {{ $catPadV }} {{ $catPadH }}; border-radius: 2px; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: {{ $catFont }}; line-height: 1; text-transform: uppercase;">{{ config('app.name') }} {{ $categoryName }}</span>
    @endif
    @if(!$isImagePost && $pdfExcerpt)
        <div style="font-family: 'Poppins', sans-serif; font-weight: normal; font-size: {{ $excerptFont }}; line-height: 1.4; color: #ffffff; margin-top: {{ $excerptMT }}; overflow: hidden; max-height: {{ $excerptMaxH }};">{{ $pdfExcerpt }}</div>
    @endif
</div>

{{-- Bottom panel --}}
<div style="position: absolute; bottom: {{ $bottomBottom }}; left: {{ $margin }}; right: {{ $margin }};">
    <table style="width: 100%; border-collapse: collapse;">
        <tr>
            @if($qrBase64)
                <td style="width: {{ $qrCellW }}; padding-right: {{ $qrCellPad }}; vertical-align: bottom;">
                    <img src="{{ $qrBase64 }}" style="display: block; width: {{ $qrSize }}; height: {{ $qrSize }};">
                </td>
            @endif
            <td style="vertical-align: bottom; text-align: right;">
                @if($isEvent && $post->meeting && ($post->meeting->venue || $meetingCityName || $post->meeting->from))
                    @php $venueParts = array_filter([$post->meeting->venue ?? null, $meetingCityName ?? null]); @endphp
                    @if(count($venueParts))
                        <div style="font-family: 'Oswald', sans-serif; font-weight: 600; font-size: {{ $venueFont }}; line-height: 0.95; color: #ffffff; text-transform: uppercase;">{{ implode(', ', $venueParts) }}</div>
                    @endif
                    @if($post->meeting->from)
                        <div style="font-family: 'Oswald', sans-serif; font-weight: 600; font-size: {{ $dateFont }}; line-height: 0.95; color: #ffffff; text-transform: uppercase;">{{ \Illuminate\Support\Carbon::parse($post->meeting->from)->translatedFormat('l j F') }}, {{ \Illuminate\Support\Carbon::parse($post->meeting->from)->format('H:i') }} {{ __('messages.hour_abbrevation') }}</div>
                    @endif
                @elseif($isNews)
                    <div style="font-family: 'Oswald', sans-serif; font-weight: 600; font-size: {{ $venueFont }}; line-height: 0.95; color: #ffffff; text-transform: uppercase;">{{ timebank_config('footer.tagline') }}</div>
                @elseif($author)
                    <div style="font-family: 'Oswald', sans-serif; font-weight: 600; font-size: {{ $dateFont }}; line-height: 0.95; color: #ffffff; text-transform: uppercase;">{{ $author->full_name ?? $author->name }}</div>
                @endif
            </td>
        </tr>
    </table>
    <div style="margin-top: {{ $footerMT }}; font-family: 'Poppins', sans-serif; font-size: {{ $footerFont }}; color: #aaaaaa; text-align: left;">{{ config('app.name') }} &mdash; {{ $isNews && $translation?->from ? \Illuminate\Support\Carbon::parse($translation->from)->translatedFormat('l j F Y') : timebank_config('footer.tagline') }}</div>
</div>