{# Card article standard — utilisée dans la grille blog #}
<article class="blog-card">
    <a href="{{ path('app_article_show', { 'slug': article.slug }) }}" class="blog-card__link">
        <div class="blog-card__img">
            {% if article.featuredMedia %}
                {{ responsive_img(article.featuredMedia, '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 400px', 'blog-card__image') }}
            {% else %}
                <div class="blog-card__placeholder">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
                </div>
            {% endif %}
            {% set firstCat = article.categories|first %}
            {% if firstCat %}
                <span class="blog-card__badge">{{ firstCat.name }}</span>
            {% endif %}
        </div>
        <div class="blog-card__body">
            <h2 class="blog-card__title">{{ article.title }}</h2>
            <p class="blog-card__excerpt">{{ article.featuredText ?: article.content|plaintext|slice(0, 150) ~ '...' }}</p>
            <div class="blog-card__meta">
                <time datetime="{{ article.createdAt|date('Y-m-d') }}">{{ article.createdAt|date('d M Y') }}</time>
                <span class="blog-card__dot"></span>
                <span>{{ article.content|readingTime }} min de lecture</span>
            </div>
            {% if article.tag|length > 0 %}
            <div class="blog-card__tags">
                {% for tag in article.tag|slice(0, 3) %}
                    <span class="tag-pill tag-pill-sm">{{ tag.name }}</span>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </a>
</article>