{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished'
  ]
%}

<div{{ attributes.addClass(classes) }}>
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 g-4">
    {% for item in paragraph.field_cards %}
      {% set card = item.entity %}
      {% if card %}
        <div class="col d-flex">
          <div class="card card-equal h-100">

          {# ✅ Imagen: Media -> Imagen con contenedor fijo #}
            {% if card.field_image.entity %}
              {% set image_file = card.field_image.entity.field_media_image.entity %}
              {% if image_file %}
                <div class="card-img-wrapper">
                  <img src="{{ file_url(image_file.fileuri) }}"
                      {# class="card-img-top" #}
                      alt="{{ card.field_image.alt|default('Card image') }}">
                </div>
              {% endif %}
            {% endif %}

            <div class="card-body">
              {# ✅ Título #}
              {% if card.field_title.value %}
                <h5 class="card-title">{{ card.field_title.value }}</h5>
              {% endif %}

              {# ✅ Texto enriquecido (renderizado como HTML) #}
              {% if card.field_text.value %}
                <div class="card-text">
                  {{ card.field_text.value|raw }}
                </div>
              {% endif %}
            </div>

          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>
{% include 'starman:card' with { id: id, items: items } %}
