{# Beitragskarte für Übersicht und "Weitere Beiträge" #}
<article class="rm-card{% if post.pinned %} is-pinned{% endif %}">
    <a class="rm-card-link" href="{{ path('frontend.riccardo.magazine.detail', { slug: post.slug }) }}">
        <div class="rm-card-media">
            {% if post.media %}
                {% sw_include '@Storefront/storefront/utilities/thumbnail.html.twig' with {
                    media: post.media,
                    attributes: { class: 'rm-card-img', alt: post.title, loading: 'lazy' }
                } %}
            {% else %}
                <span class="rm-card-fallback" aria-hidden="true">Riccardo</span>
            {% endif %}
            {% if post.pinned %}<span class="rm-card-pin">Empfehlung</span>{% endif %}
        </div>
        <div class="rm-card-body">
            <div class="rm-card-meta">
                {% if post.publishedAt %}<time datetime="{{ post.publishedAt|date('Y-m-d') }}">{{ post.publishedAt|format_date('medium', locale: 'de-DE', timezone: 'Europe/Berlin') }}</time>{% endif %}
                {% if post.readingMinutes %}<span>{{ post.readingMinutes }} Min. Lesezeit</span>{% endif %}
            </div>
            <h2 class="rm-card-title">{{ post.title }}</h2>
            {% if post.teaser %}<p class="rm-card-teaser">{{ post.teaser|striptags|u.truncate(180, ' …', false) }}</p>{% endif %}
            <span class="rm-card-more">Weiterlesen</span>
        </div>
    </a>
    {% if post.categories is not empty %}
        <div class="rm-card-cats">
            {% for cat in post.categories|slice(0, 3) %}
                <a href="{{ path('frontend.riccardo.magazine.category', { slug: cat.slug }) }}">{{ cat.name }}</a>
            {% endfor %}
        </div>
    {% endif %}
</article>