{% if articles %}
<section aria-label="Content sections">
  <div class="articles-list">
    {% for article in articles %}
    <article class="article-card glass-card fade-in" aria-labelledby="article-{{ article.pk }}-title">
      {% if article.badge %}<div class="article-card-header"><div class="section-badge article-badge">{{ article.badge }}</div></div>{% endif %}
      <h3 class="article-title" id="article-{{ article.pk }}-title">{{ article.title }}</h3>
      <div class="article-description rich-content" data-readmore="260">{{ article.rendered_description }}</div>
      {% if article.sections.all %}
      <div class="article-sections">
        <dl class="article-sections-list">
          {% for section in article.sections.all %}
          <div class="article-section-item">
            <dt class="section-key">{{ section.title }}</dt>
            <dd class="section-value rich-content" data-readmore="160">{{ section.rendered_value }}</dd>
          </div>
          {% endfor %}
        </dl>
      </div>
      {% endif %}
      {% if article.citations.all %}
      <div class="article-citations" id="article-{{ article.pk }}-citations">
        <h4 class="article-citations-title">Citations</h4>
        <ol class="article-citations-list">
          {% for citation in article.citations.all %}
          <li class="article-citation-item">
            <span class="citation-text">{{ citation.text }}</span>
            {% if citation.url %}
            <span class="citation-actions">
              <a href="{{ citation.url }}" class="citation-link" target="_blank" rel="noopener noreferrer" aria-label="Open citation source">
                <svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                  <path d="M7 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1V9M10 2h4m0 0v4m0-4L7 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </a>
              <button type="button" class="citation-copy" data-citation-url="{{ citation.url }}" aria-label="Copy citation link">
                <svg class="citation-copy-icon" width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                  <rect x="5" y="5" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1.5"/>
                  <path d="M3 11V3a1 1 0 011-1h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
                <svg class="citation-copy-icon-done" width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                  <path d="M3.5 8.5L6.5 11.5L12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span class="citation-copy-feedback" aria-live="polite" hidden>Copied!</span>
              </button>
            </span>
            {% endif %}
          </li>
          {% endfor %}
        </ol>
      </div>
      {% endif %}
      {% if article.citation_count_display is not None or article.citation_count_label %}
      {% if article.citations.exists %}
      <a href="#article-{{ article.pk }}-citations" class="citation-count-badge" aria-label="{% if article.citation_count_display %}{{ article.citation_count_display }} {% endif %}{% if article.citation_count_label %}{{ article.citation_count_label }}{% endif %}">
        {% if article.citation_count_display is not None %}<span class="citation-count-number">{{ article.citation_count_display }}</span>{% endif %}
        {% if article.citation_count_label %}<span class="citation-count-label">{{ article.citation_count_label }}</span>{% endif %}
      </a>
      {% else %}
      <div class="citation-count-badge" aria-label="{% if article.citation_count_display %}{{ article.citation_count_display }} {% endif %}{% if article.citation_count_label %}{{ article.citation_count_label }}{% endif %}">
        {% if article.citation_count_display is not None %}<span class="citation-count-number">{{ article.citation_count_display }}</span>{% endif %}
        {% if article.citation_count_label %}<span class="citation-count-label">{{ article.citation_count_label }}</span>{% endif %}
      </div>
      {% endif %}
      {% endif %}
    </article>
    {% endfor %}
  </div>
</section>
{% endif %}
