{% set has_media = media is defined and media.src is defined and media.src is not empty ? 'yes' : 'no' %}
{% set has_link = url is defined and url is not empty ? 'yes' : 'no' %}

{% set additional_classes = card_classes|default('') %}
{% if additional_classes is iterable %}
  {% set additional_classes = additional_classes|join(' ') %}
{% endif %}

{% set card_root = html_cva(base: ['flex flex-col bg-background text-foreground']) %}

{% set card_content = html_cva(base: ['flex w-full flex-col items-center gap-5 px-6 py-8 text-center', 'max-w-none']) %}

<div class="{{ card_root.apply({}, additional_classes) }}">
  {% if has_media == 'yes' %}
    <div class="aspect-square w-full shrink-0 overflow-hidden bg-secondary">
      {% block media %}
        {% include 'canvas:image' ignore missing with {
          src: media.src,
          alt: media.alt,
          class: 'h-full w-full object-cover',
          width: media.width,
          height: media.height,
          sizes: '(min-width: 1024px) 320px, (min-width: 768px) 50vw, 100vw'
        } only %}
      {% endblock %}
    </div>
  {% endif %}

  <div class="{{ card_content.apply({}) }}">
    <h3 class="text-2xl leading-snug font-semibold tracking-tight text-foreground md:text-3xl">{{ heading_text }}</h3>

    {% if text is not empty %}
      <p class="mb-0 max-w-prose text-base leading-relaxed font-normal text-secondary-foreground">
        {{ text }}
      </p>
    {% endif %}

    {% if author is defined and author is not empty %}
      <p class="mb-0 text-sm text-secondary-foreground">
        {{
          'Author: @name'|t({
            '@name': author
          })
        }}
      </p>
    {% endif %}

    {% if has_link == 'yes' %}
      <div class="flex w-full justify-center pt-1">
        {{
          include(
            'everbright_theme:button',
            {
              href: url,
              label: link_label|default('Read article'|t),
              variant: 'secondary-inverted',
              size: 'small',
              btn_classes: 'w-full max-w-[12rem] justify-center'
            },
            with_context: false
          )
        }}
      </div>
    {% endif %}
  </div>
</div>
