<script lang="ts">
    import { engagements } from '$lib/data/home/engagements';
</script>

<section id="engagements" class="section" aria-labelledby="engagements-heading">
    <div class="container">
        <h2 id="engagements-heading" class="section-title">Recent Engagements</h2>
        <dl class="engagements-list">
            {#each engagements as engagement (engagement.title)}
                <div class="engagement">
                    <dt>{engagement.title}</dt>
                    <dd>{engagement.description}</dd>
                </div>
            {/each}
        </dl>
    </div>
</section>

<style>
    .engagements-list {
        max-width: var(--max-text-width);
        margin: 0 auto;
    }

    .engagement {
        margin-bottom: var(--space-xl);
        padding-bottom: var(--space-lg);
        padding-left: var(--space-md);
        border-left: 3px solid var(--color-border);
        transition: border-color var(--transition-base);

        &:hover,
        &:focus-within {
            border-left-color: var(--color-primary);
        }

        &:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        @media (max-width: 768px) {
            padding-left: var(--space-sm);
        }

        @media (prefers-contrast: high) {
            border-left-width: 4px;
        }

        & dt {
            margin-bottom: var(--space-sm);
            font-size: var(--font-size-large);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text);
            line-height: var(--line-height-tight);
        }

        & dd {
            margin: 0;
            font-size: var(--font-size-base);
            line-height: var(--line-height-relaxed);
            color: var(--color-text-secondary);
        }
    }
</style>
