{#
  Componente Card.twig estilizado para Bootstrap 5
#}

{% set classes = [
  'card',
  'card-equal',
  'h-100',
  'shadow-sm',
  'border-0',
  'rounded-4',
  'overflow-hidden',
  'bg-card'
] %}

<div class="col">
  <div{{ attributes.addClass(classes) }}>

    {# ✅ Imagen superior #}
    {% if paragraph.field_image.entity %}
      {% set image_file = paragraph.field_image.entity.field_media_image.entity %}
      {% if image_file %}
        <img src="{{ file_url(image_file.fileuri) }}"
             class="card-img-top object-fit-cover"
             alt="{{ paragraph.field_image.alt|default('Card image') }}">
      {% endif %}
    {% endif %}

    <div class="card-body p-4">
      {# ✅ Título #}
      {% if paragraph.field_title.value %}
        <h5 class="card-title fw-bold mb-3">{{ paragraph.field_title.value }}</h5>
      {% endif %}

      {# ✅ Texto #}
      {% if paragraph.field_text.value %}
        <div class="card-text text-muted">
          {{ paragraph.field_text.value|raw }}
        </div>
      {% endif %}
    </div>

  </div>
</div>

{% include 'starman:card' with { id: id, items: items } %}
