{% set medias = medias|default(post.postMedia|default([])) %}
{% set c = medias|length %}
{% if c == 0 %}
  {# rien à afficher #}
{% elseif c == 1 %}
  <div class="js-gallery" data-controller="wall-lightbox" data-gallery-id="post-{{ post.id }}">
    {% set m = medias[0] %}
    <a href="{{ asset('uploads/posts/' ~ m.fichier) }}" class="d-block media-thumb rounded-4 image-popup-vertical-fit" data-action="click->wall-lightbox#open">
      <img src="{{ asset('uploads/posts/' ~ m.fichier) }}" alt="" class="w-100 object-fit-cover" style="height:360px;">
    </a>
  </div>

{% elseif c == 2 %}
  <div class="row g-2 js-gallery" data-controller="wall-lightbox" data-gallery-id="post-{{ post.id }}">
    {% for m in medias %}
      <div class="col-6">
        <a href="{{ asset('uploads/posts/' ~ m.fichier) }}" class="d-block media-thumb rounded-4 image-popup-vertical-fit" data-action="click->wall-lightbox#open">
          <img src="{{ asset('uploads/posts/' ~ m.fichier) }}" alt="" class="img-fluid rounded-4" style="height:240px; width:100%; object-fit:cover;">
        </a>
      </div>
    {% endfor %}
  </div>

{% elseif c == 3 %}
  <div class="row g-2 js-gallery" data-controller="wall-lightbox" data-gallery-id="post-{{ post.id }}">
    {# gauche large #}
    <div class="col-8">
      {% set m0 = medias[0] %}
      <a href="{{ asset('uploads/posts/' ~ m0.fichier) }}" class="d-block media-thumb rounded-4 image-popup-vertical-fit" data-action="click->wall-lightbox#open">
        <img src="{{ asset('uploads/posts/' ~ m0.fichier) }}" alt="" style="height:360px; width:100%; object-fit:cover;">
      </a>
    </div>

    {# droite deux empilées #}
    <div class="col-4 d-flex flex-column gap-2">
      {% set m1 = medias[1] %}
      <a href="{{ asset('uploads/posts/' ~ m1.fichier) }}" class="d-block media-thumb rounded-4 image-popup-vertical-fit" data-action="click->wall-lightbox#open">
        <img src="{{ asset('uploads/posts/' ~ m1.fichier) }}" alt="" style="height:178px; width:100%; object-fit:cover;">
      </a>

      {% set m2 = medias[2] %}
      <a href="{{ asset('uploads/posts/' ~ m2.fichier) }}" class="d-block media-thumb rounded-4 image-popup-vertical-fit" data-action="click->wall-lightbox#open">
        <img src="{{ asset('uploads/posts/' ~ m2.fichier) }}" alt="" style="height:178px; width:100%; object-fit:cover;">
      </a>
    </div>
  </div>

{% else %}
  {# c > 3 — même layout que 3 images, avec overlay +N sur la 3e vignette #}
  {% set more = c - 3 %}
  <div class="row g-2 js-gallery" data-controller="wall-lightbox" data-gallery-id="post-{{ post.id }}">
    <div class="col-8">
      {% set m0 = medias[0] %}
      <a href="{{ asset('uploads/posts/' ~ m0.fichier) }}" class="d-block media-thumb rounded-4 image-popup-vertical-fit" data-action="click->wall-lightbox#open">
        <img src="{{ asset('uploads/posts/' ~ m0.fichier) }}" alt="" style="height:360px; width:100%; object-fit:cover;">
      </a>
    </div>

    <div class="col-4 d-flex flex-column gap-2">
      {% set m1 = medias[1] %}
      <a href="{{ asset('uploads/posts/' ~ m1.fichier) }}" class="d-block media-thumb rounded-4 image-popup-vertical-fit" data-action="click->wall-lightbox#open">
        <img src="{{ asset('uploads/posts/' ~ m1.fichier) }}" alt="" style="height:178px; width:100%; object-fit:cover;">
      </a>

      {% set m2 = medias[2] %}
      {# La 3e vignette visible porte l'overlay +N et ouvre aussi la galerie #}
      <a href="{{ asset('uploads/posts/' ~ m2.fichier) }}" class="d-block media-thumb rounded-4 position-relative js-more-overlay image-popup-vertical-fit" data-action="click->wall-lightbox#open">
        <img src="{{ asset('uploads/posts/' ~ m2.fichier) }}" alt="" style="height:178px; width:100%; object-fit:cover;">
        <span class="media-overlay">+{{ more }}</span>
      </a>
    </div>

    {# on inclut aussi les autres images (cachées) pour la galerie #}
    {% for m in medias|slice(3) %}
      <a href="{{ asset('uploads/posts/' ~ m.fichier) }}" class="d-none image-popup-vertical-fit" data-action="click->wall-lightbox#open"></a>
    {% endfor %}
  </div>
{% endif %}