{#
Variables:
- caseStudy: a case study entry with clientName, richText, and url fields
#}

<details class="accordion-animate group border-t border-navy/20 overflow-hidden">
    <summary class="flex items-center justify-between gap-m py-m cursor-pointer list-none">
        <span class="font-rosario text-0 text-navy">
            {{ caseStudy.clientName ?: caseStudy.title }}
        </span>
        <svg class="shrink-0 w-5 h-5 text-indigo transition-transform duration-300 group-open:rotate-180"
            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
    </summary>
    <div class="pb-l flex flex-col gap-m items-start">
        {% if caseStudy.richText %}
        <div class="p text--1 xl:text-0">{{ caseStudy.richText }}</div>
        {% endif %}
        <a href="{{ caseStudy.url }}" class="button self-start">View case study</a>
    </div>
</details>