{# La carte d'une plante dans une grille.

   Attend `plant`. `sizes` se surcharge quand la grille n'a pas trois colonnes,
   `level` quand la carte vit sous un titre de section. #}
{% set sizes = sizes|default('(min-width: 1024px) 25vw, 50vw') %}
{% set level = level|default(3) %}
<article class="group relative flex h-full flex-col overflow-hidden rounded-xl border border-line bg-surface-tint transition hover:border-brand/40 hover:shadow-lg hover:shadow-ink/5">
    <div class="relative overflow-hidden">
        {{ include('_partials/photo.html.twig', { media: plant.image, filter: 'card', ratio: '4 / 5', sizes: sizes, class: 'h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]' }) }}
        {% if plant.promotionLabel %}
            <span class="absolute left-3 top-3 rounded-full bg-clay px-3 py-1 font-sans text-[0.68rem] font-semibold uppercase tracking-wider text-white">{{ plant.promotionLabel }}</span>
        {% endif %}
        {% if plant.organic %}
            <span class="absolute right-3 top-3 rounded-full bg-surface/95 px-3 py-1 font-sans text-[0.68rem] font-semibold text-brand-ink">Bio</span>
        {% endif %}
    </div>

    <div class="flex flex-1 flex-col p-4">
        <h3 class="line-clamp-2 font-serif text-[1.08rem] leading-snug text-ink">
            <a href="{{ path('plant_show', { slug: plant.slug }) }}" class="after:absolute after:inset-0">{{ plant.name }}</a>
        </h{{ level }}>
        <p class="mt-0.5 line-clamp-1 min-h-[1.3125rem] font-serif text-sm italic text-muted">{{ plant.latinName }}</p>

        <div class="mt-auto flex flex-wrap items-center gap-x-4 gap-y-1 pt-3">
            {{ include('_partials/availability.html.twig') }}
            {% if plant.price %}
                <span class="font-sans text-[0.82rem] text-muted">{{ plant.price|number_format(2, ',', ' ') }} €{% if plant.priceUnit %} {{ plant.priceUnit }}{% endif %}</span>
            {% endif %}
        </div>
    </div>
</article>