{# rich-section override — two-column media + rich text, hairline surface options. #}
<section class="cm-section {% if background == "muted" %}cm-surface-muted{% elif background == "card" %}cm-surface-card{% endif %} {{ class }}"><div class="cm-content-well"><div class="cm-grid cm-grid-2" style="align-items: center;">
<div>
{% if eyebrow %}<p class="cm-eyebrow">{{ eyebrow }}</p>{% endif %}
{% if heading %}<h2 class="cm-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 1rem 0;"><span class="cm-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
{% if body %}<div class="cm-text" style="color: hsl(var(--muted-foreground)); line-height: 1.7;">{{ body|safe }}</div>{% endif %}
{% if ctaUrl and ctaLabel %}<a class="cm-btn-ghost" href="{{ ctaUrl }}" style="margin-top: 1.5rem;">{{ ctaLabel }}<svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"/></svg></a>{% endif %}
</div>
<div class="cm-media-frame" style="aspect-ratio: 4 / 3; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); overflow: hidden; {% if mediaPosition == "left" %}order: -1;{% endif %}">{% if media %}{% img media alt=mediaAlt class="cm-rich-media" %}{% endif %}</div>
</div></div></section>
