{#
Variables:
- service: a service matrix entry with image, title, description, and caseStudies fields
- flip: boolean — when true, image moves to the right and content to the left
#}

{% set serviceImage = service.image.one() %}
{% set caseStudies = service.caseStudies.all() %}

<div class="container flex flex-col gap-2xl md:gap-0 md:grid md:grid-cols-12 md:items-start">

    {# Image — flips to col 10–12 on even services #}
    <div class="{{ flip ? 'md:col-span-3 md:col-start-10 md:row-start-1' : 'md:col-span-3' }}">
        {% if serviceImage %}
        <img src="{{ serviceImage.url }}" alt="{{ service.title }}" class="w-full aspect-square object-cover">
        {% endif %}
    </div>

    {# Content — flips to col 1–8 on even services #}
    <div
        class="{{ flip ? 'md:col-span-8 md:col-start-1 md:row-start-1' : 'md:col-span-8 md:col-start-5' }} flex flex-col gap-l">

        <div class="flex flex-col gap-m">
            <h2 class="h3 text-navy">{{ service.title }}</h2>
            {% if service.description %}
            <div class="p text-navy/80">{{ service.description }}</div>
            {% endif %}
        </div>

        {% if caseStudies | length %}
        <div>
            {% for caseStudy in caseStudies %}
            {% include "_includes/accordionItem.twig" with { caseStudy: caseStudy } %}
            {% endfor %}
            {# Closing rule after the last accordion item #}
            <div class="border-t border-navy/20"></div>
        </div>
        {% endif %}

    </div>

</div>