{#
Variables:
- insight: required — insight entry to render
- aspectClass: optional — Tailwind aspect ratio class for the image
- layout: optional — Tailwind grid span classes for the card
#}

{% set thumb = insight.thumbnail.one() %}
{% set aspectClass = aspectClass ?? 'aspect-video' %}
{% set layout = layout ?? '' %}

<article class="group {{ layout }}">
    <a href="{{ insight.url }}" class="flex flex-col gap-s no-underline">

        <div class="overflow-hidden rounded-sm bg-navy/10 {{ aspectClass }}">
            {% if thumb %}
            <img src="{{ thumb.getUrl({ width: 800 }) }}" alt="{{ thumb.alt ?: insight.title }}" loading="lazy"
                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
            {% else %}
            <div class="w-full h-full bg-linear-to-br from-navy/5 to-indigo/10 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-navy" fill="none" viewBox="0 0 48 48">
                    <rect x="6" y="6" width="36" height="36" rx="4" stroke="currentColor" stroke-width="1.5" />
                    <path d="M6 32l10-10 8 8 6-6 12 12" stroke="currentColor" stroke-width="1.5"
                        stroke-linejoin="round" />
                    <circle cx="17" cy="19" r="3.5" stroke="currentColor" stroke-width="1.5" />
                </svg>
            </div>
            {% endif %}
        </div>

        <div class="flex flex-col gap-2xs">
            <h2 class="font-nine-elms text-navy group-hover:text-indigo transition-colors duration-200 leading-snug m-0"
                style="font-size: var(--text-1)">{{ insight.title }}</h2>
            <time class="font-rosario text-black" datetime="{{ insight.postDate | date('Y-m-d') }}"
                style="font-size: var(--text--2)">{{ insight.postDate | date('j M Y') }}</time>
        </div>

    </a>
</article>