{#
    Reusable public photography component.
    - mode="graphic": the surrounding layout may crop the image (heroes / polygonal shapes)
    - mode="native": preserves the source ratio
    - mode="detail": preserves the source ratio inside editorial collages

    Replace `src` (and optionally `mobileSrc` / `position`) without changing the page CSS.
#}
{% set photoMode = mode|default('native') %}
{% set photoClass = class|default('') %}
{% set photoPosition = position|default('50% 50%') %}
<figure class="wtl-photo wtl-photo--{{ photoMode }} {{ photoClass }}" style="--photo-position: {{ photoPosition }};"{% if reveal|default(false) %} data-reveal{% endif %}{% if parallax is defined %} data-parallax="{{ parallax }}"{% endif %}>
    {% if mobileSrc|default(null) %}
        <picture>
            <source media="(max-width: 560px)" srcset="{{ asset(mobileSrc) }}">
            <img src="{{ asset(src) }}" alt="{{ alt|default('') }}" loading="{{ loading|default('lazy') }}" decoding="async">
        </picture>
    {% else %}
        <img src="{{ asset(src) }}" alt="{{ alt|default('') }}" loading="{{ loading|default('lazy') }}" decoding="async">
    {% endif %}
    {% if caption|default(null) %}<figcaption>{{ caption }}</figcaption>{% endif %}
</figure>