{# La carte d'un article dans une grille.

   Le surtitre garde sa place même vide, le titre tient sur deux lignes et le
   résumé sur trois : d'une carte à l'autre, les titres tombent à la même
   hauteur et les blocs finissent sur la même ligne.

   `level` règle le niveau de titre selon la profondeur de la section. #}
{% set level = level|default(3) %}
<article class="group relative flex h-full flex-col overflow-hidden rounded-xl border border-line bg-surface transition hover:border-brand/40 hover:shadow-lg hover:shadow-ink/5">
    {{ include('_partials/photo.html.twig', { media: article.image, filter: 'card', ratio: '16 / 10', sizes: sizes|default('(min-width: 1024px) 33vw, 100vw') }) }}
    <div class="flex flex-1 flex-col p-6">
        <p class="eyebrow min-h-[1.125rem]">
            {%- if article.season %}{{ article.season.label }}{% elseif article.kind.dated and article.publishedAt %}{{ article.publishedAt|format_date(locale='fr', dateFormat='long') }}{% endif -%}
        </p>
        <h{{ level }} class="mt-2 line-clamp-2 font-serif text-[1.15rem] leading-snug text-ink">
            <a href="{{ path(article.kind.routeName, { slug: article.slug }) }}" class="after:absolute after:inset-0">{{ article.name }}</a>
        </h{{ level }}>
        {% if article.intro %}
            <p class="mt-3 line-clamp-3 font-sans text-[0.88rem] leading-relaxed text-muted">{{ article.intro }}</p>
        {% endif %}
    </div>
</article>