{% import 'elementor/macros' as m %}
{% set classes = ['aae-a-posts', 'e-con', 'e-atomic-element', base_styles.base | default('')] | merge(settings.classes | default([])) %}

<div class="{{ classes | join(' ') }} {{ editor_classes | default('') }}"
     data-id="{{ id }}"
     data-element_type="{{ type }}"
     data-e-type="{{ type }}"
     data-interaction-id="{{ interaction_id | default('') }}"
     style="--aae-posts-columns: {{ settings.columns | default(3) }}"
     {% if settings._cssid is defined and settings._cssid is not empty %}
         id="{{ settings._cssid | e('html_attr') }}"
     {% endif %}
     {% if settings.attributes is defined and settings.attributes is not empty %}
         {{ settings.attributes | raw }}
     {% endif %}
     {{ editor_attributes | default('') | raw }}>

    <div class="aae-a-posts-grid layout-{{ settings.posts_layout | default('grid') }}">

        {% if settings.posts_list is defined and settings.posts_list is not empty %}

            {% for post in settings.posts_list %}
            <article class="aae-a-post-card">
                <a href="{{ post.url | e('full_url') }}" class="aae-a-post-thumb-link" tabindex="-1" aria-hidden="true">
                    {# width/height let the browser reserve the box BEFORE the
                       lazy bytes arrive — without them this img renders 0px
                       tall and everything below shifts mid-scroll. #}
                    <img src="{{ post.image | e('full_url') }}"
                        alt="{{ post.title }}"
                        class="aae-a-post-thumb"
                        {% if post.image_w is defined and post.image_w > 0 and post.image_h > 0 %}width="{{ post.image_w }}" height="{{ post.image_h }}"{% endif %}
                        loading="lazy" />
                </a>
                <div class="aae-a-post-content">
                    {% if settings.show_date and post.date %}
                        <span class="aae-a-post-date">{{ post.date }}</span>
                    {% endif %}
                    <h3 class="aae-a-post-title">
                        <a href="{{ post.url | e('full_url') }}" class="aae-a-post-title-link">{{ post.title }}</a>
                    </h3>
                    {% if settings.show_excerpt %}
                        <p class="aae-a-post-excerpt">{{ post.excerpt }}</p>
                    {% endif %}
                    {% if settings.show_read_more %}
                        {# Every card repeats the same "Read More" wording, so on
                           its own the link text says nothing about where it goes
                           — WCAG 2.4.4 (Link Purpose), and Lighthouse's
                           link-text audit counts it as non-descriptive.

                           The post name goes in a visually-hidden SPAN rather
                           than in aria-label: an aria-label satisfies screen
                           readers but Lighthouse reads the link's visible TEXT
                           and keeps failing (measured — the aria-label version
                           left the audit at 0). Hidden text lands in both, and
                           unlike aria-label it does not replace the accessible
                           name, so the builder's own button copy is still the
                           first thing announced. #}
                        <a href="{{ post.url | e('full_url') }}" class="aae-a-post-read-more-link">
                            {{ settings.read_more_text | default('Read More') }}<span class="aae-a-sr-only">: {{ post.title }}</span>
                        </a>
                    {% endif %}
                </div>
            </article>
            {% endfor %}

        {% else %}
            {# Editor / no-posts fallback: render skeleton Post Card child #}
            {{ children_placeholder | raw }}
        {% endif %}

    </div>

</div>