{#
Case study summary: intro + project metadata, full width of the main content column.
Variables:
- entry: case study entry (required)
- sectors: entry.categories.all()
- serviceCategories: entry.servicesCategories.all()
#}
{% set clientLogo = entry.clientLogo.one() %}
{% set hasMeta = entry.clientName or sectors | length or serviceCategories | length %}


{% set logoCard %}
{% if clientLogo %}
<div class="relative w-full max-w-[14rem] overflow-visible">
    <img src="/assets/graphics/pushpins 1.png" alt="" aria-hidden="true"
        class="pointer-events-none absolute top-0 left-1/2 z-20 w-16 -translate-x-[30%] -translate-y-[55%]">
    <div class="relative aspect-square w-full overflow-visible rotate-2 shapedropshadow">
        <div
            class="absolute inset-0 rounded-sm bg-white [clip-path:polygon(0_0,calc(100%-2.25rem)_0,100%_2.25rem,100%_100%,0_100%)]">
        </div>
        <div class="pointer-events-none absolute top-0 right-0 z-20 w-[2.25rem] h-[2.25rem] corner-fold-dropshadow">
            <div class="bg-white w-full h-full [clip-path:polygon(0_0,100%_100%,0_100%)]" aria-hidden="true">
            </div>
        </div>
        <div class="relative flex size-full items-center justify-center p-m">
            <img src="{{ clientLogo.url }}" alt="{{ clientLogo.alt ?: entry.clientName }}"
                class="max-h-full max-w-full object-contain">
        </div>
    </div>
</div>
{% endif %}
{% endset %}

{% if entry.richText or hasMeta or clientLogo %}
<section class="relative mb-xl w-full overflow-visible rounded-sm bg-cream p-l  lg:p-xl" aria-label="Project summary">
    <div
        class="relative grid gap-l flex flex-col sm:items-start sm:gap-x-l xl:grid-cols-[minmax(0,1fr)_14rem] xl:gap-x-xl">
        <div class="flex flex-col gap-l">
            {% if entry.richText %}
            <div
                class="rich-text flex flex-row items-center xl:items-start gap-xl [&_p]:font-nine-elms w-full text-0 leading-[1.65] text-black [&_a]:text-indigo [&_a]:underline [&_p]:m-0 [&_p]:text-0 [&_p]:leading-[1.65]">
                {{ entry.richText }}
                <div class="hidden sm:block w-full min-w-[150px]! xl:hidden">{{ logoCard }}</div>
            </div>
            {% endif %}

            {% if hasMeta %}
            <dl class="grid grid-cols-1 gap-m font-rosario sm:grid-cols-3 sm:gap-x-l">
                {% if entry.clientName %}
                <div class="flex flex-col gap-2xs">
                    <dt class="text--2 font-semibold uppercase tracking-widest text-navy">Client</dt>
                    <dd class="text--1 leading-snug text-black">{{ entry.clientName }}</dd>
                </div>
                {% endif %}

                {% if sectors | length %}
                <div class="flex flex-col gap-2xs">
                    <dt class="text--2 font-semibold uppercase tracking-widest text-navy">Sector</dt>
                    <dd class="text--1 leading-snug text-black">{{ sectors | map(s => s.title) | join(', ') }}</dd>
                </div>
                {% endif %}

                {% if serviceCategories | length %}
                <div class="flex flex-col gap-2xs">
                    <dt class="text--2 font-semibold uppercase tracking-widest text-navy">Focus</dt>
                    <dd class="text--1 leading-snug text-black">{{ serviceCategories | map(s => s.title) | join(', ')
                        }}</dd>
                </div>
                {% endif %}
            </dl>
            {% endif %}
        </div>

        <div class="hidden xl:block">{{ logoCard }}</div>

    </div>
</section>
{% endif %}