<article class="bg-transparent rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 badge-{{ .Params.badgeColor }} flex flex-col h-full">
    <!-- Badge couleur -->
    {{ with .Params.badge }}
            <style>
            .badge {
                background-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
                color: #222;
            }
            .badge-icon {
                color: var(--badge-color);
            }
        </style>
        <div class="px-6 pt-6">
            <span class="badge inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium">
                {{ . }}
            </span>
        </div>
    {{ end }}

    {{ with .Params.featured_image }}
        <a href="{{ $.RelPermalink }}" class="block aspect-w-16 aspect-h-9 overflow-hidden">
            <img 
                src="{{ . }}" 
                alt="{{ $.Title }}" 
                class="object-cover w-full h-full transform hover:scale-105 transition-transform duration-300"
                loading="lazy"
            >
        </a>
    {{ end }}
    
    <div class="p-6 pt-2 flex flex-col h-full">
        <!-- Title -->
        <h2 class="text-2xl font-bold mb-3 hover:text-primary-600 transition-colors duration-200">
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
        </h2>

        <!-- Description -->
        <p class="text-gray-600 mb-4 line-clamp-2">
            {{ with .Description }}
                {{ . }}
            {{ else }}
                {{ .Summary | truncate 160 }}
            {{ end }}
        </p>

        <!-- Read More link and Reading Time -->
        <div class="flex justify-between items-center mt-auto">
             <!-- Reading Time -->
            <span class="text-sm text-gray-500 flex items-center">

            </span>

            <a href="{{ .RelPermalink }}"
               class="inline-flex items-center text-primary-600 hover:text-primary-700 font-medium">
                {{ i18n "discoverFeature" }}
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </a>


        </div>
    </div>
</article>
