{% comment %}
Sekcja pytań i odpowiedzi - patrz faq/templatetags/faq.py.

Zwinięte pytania stoją na <details>/<summary>, a nie na własnym skrypcie:
przeglądarka umie je rozwijać sama, działa to bez JavaScriptu, a czytnik
ekranu zna te znaczniki. Trójkąt systemowy chowamy (`marker:hidden`)
i rysujemy własny znak, który obraca się przy otwarciu.
{% endcomment %}
{% for group in groups %}
  {% if group.visible_items %}
    <section class="band band-surface band-line" id="pytania-{{ group.slug }}">
      <div class="wrap max-w-3xl">
        {% if group.heading %}<h2 class="title-band">{{ group.heading }}</h2>{% endif %}
        {% if group.intro %}
          <p class="mt-4 text-site-muted dark:text-site-muted-dark">{{ group.intro }}</p>
        {% endif %}

        <div class="mt-8 divide-y divide-site-border border-y border-site-border dark:divide-site-border-dark dark:border-site-border-dark">
          {% for item in group.visible_items %}
            {% if group.collapsed %}
              <details class="group py-5">
                <summary class="flex cursor-pointer list-none items-start justify-between gap-4 font-semibold marker:hidden [&::-webkit-details-marker]:hidden">
                  <span>{{ item.question }}</span>
                  <span class="mt-1 shrink-0 text-brand-600 group-open:rotate-45" aria-hidden="true">+</span>
                </summary>
                <p class="mt-3 whitespace-pre-line leading-relaxed text-site-muted dark:text-site-muted-dark">{{ item.answer }}</p>
              </details>
            {% else %}
              <div class="py-5">
                <h3 class="font-semibold">{{ item.question }}</h3>
                <p class="mt-3 whitespace-pre-line leading-relaxed text-site-muted dark:text-site-muted-dark">{{ item.answer }}</p>
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </section>
  {% endif %}
{% endfor %}