{#
    Project card — full-bleed photo with a bottom gradient, up to two tag
    badges and the project title sitting inside the image, and a small
    two-line mark bottom-left. Auto-populated from real project_detail pages
    (see HomePageEnricher::resolveRecentProjectsByCategory()) — read-only,
    not admin-editable here; editing happens on the project's own page.

    Params:
    - imagePath (string): project's featured image URL
    - imageDarkPath (string, default ''): Hiver variant, falls back to imagePath when empty
    - imageFrame / imageDarkFrame (array, optional): source page's Été / Hiver cadrage (ratio never applied on cards)
    - title (string): project title
    - subtitle (string, default: ''): project subtitle
    - tags (string[], default []): project's tag labels, shown as badges
    - href (string): project detail page URL
    - attrs (string, default ''): raw HTML attributes appended to the link
      (e.g. `data-category="haute-altitude"` for client-side filtering)
#}
<a href="{{ href|default('#') }}" class="project-card" {{ attrs|default('')|raw }}>
    <div class="project-card__image"{{ image_frame_attrs({image: imagePath|default(''), imageDark: imageDarkPath|default(''), imageFrame: imageFrame|default(null), imageDarkFrame: imageDarkFrame|default(null)}, 'image', false, false) }}>
        {% include 'components/_themed_img.html.twig' with {light: imagePath|default(''), dark: imageDarkPath|default(''), alt: title|default(''), class: 'project-card__img', loading: 'lazy'} only %}

        <div class="project-card__overlay" aria-hidden="true"></div>

        <div class="project-card__info">
            {% if tags|default([]) is not empty %}
                <div class="project-card__badges">
                    {% for tag in tags %}
                        {% include 'components/_tag.html.twig' with { label: tag, disabled: true, class: 'project-card__badge tag--light' } %}
                    {% endfor %}
                </div>
            {% endif %}

            <h3 class="project-card__title">{{ title|default('') }}</h3>
            <p class="project-card__subtitle">{{ subtitle|default('') }}</p>
        </div>
    </div>
</a>