{#
    ProjectDetail related-project card (footer "Projets similaires").

    Parameters:
    - card (array): title, slug, category (nullable string), mainImagePath (nullable),
      entity (Page, used only for page_url()).

    Sibling of components/_actualite_hub_card.html.twig, kept as its own partial because
    the neighbor's badge is `category` (a Page column, single value) rather than `tags`
    (Page<->Tag relations, multi-value) - different data shape, not worth forcing into the
    same component.
#}
{% set categoryLabels = {'haute-altitude': 'Haute altitude', 'station': 'Station', 'village': 'Village'} %}
{#
    Restyled (project-detail-redesign.md section 3) to a full-bleed overlay card - image
    fills the card, category badge(s) + title sit inside the image over a bottom gradient
    scrim, mirroring components/_project-card.html.twig's visual language rather than the
    stacked-below-image layout `.actualite-related__card` uses. New `.project-detail-related__card*`
    BEM block (sibling of `.actualite-related__card`, not a modifier of it) since the DOM
    structure differs (single overlay content group vs. separate stacked elements) - added
    per the redesign plan's explicit allowance to add minimal classes here for the dark
    restyle. `card.publishedAt` is intentionally not rendered - the reference design's
    "Projets suivants" cards show no date, unlike `.actualite-related__card`.
#}
<a href="{{ page_url(card.entity, card.entity.parent) }}" class="project-detail-related__card">
    <div class="project-detail-related__card-image"{{ image_frame_attrs({image: card.mainImagePath, imageDark: card.mainImageDarkPath|default(''), imageFrame: card.mainImageFrame|default(null), imageDarkFrame: card.mainImageDarkFrame|default(null)}, 'image', false, false) }}>
        {% if card.mainImagePath %}
            {% include 'components/_themed_img.html.twig' with {light: card.mainImagePath, dark: card.mainImageDarkPath|default(''), alt: card.title, class: 'project-detail-related__card-img', loading: 'lazy'} only %}
        {% endif %}
        <div class="project-detail-related__card-overlay" aria-hidden="true"></div>
    </div>

    <div class="project-detail-related__card-content">
        {% if card.category %}
            <div class="project-detail-related__card-tags">
                {% include 'components/_tag.html.twig' with { label: categoryLabels[card.category]|default(card.category), class: 'tag--light', disabled: true } %}
            </div>
        {% endif %}

        <h3 class="project-detail-related__card-headline">{{ card.title }}</h3>
    </div>
</a>