{# brutalist rich-section override — split text/media with bordered media frame. Fields: background, mediaPosition, eyebrow, heading, body, ctaUrl, ctaLabel, media, mediaAlt. #}
<section class="bru-section {% if background == "muted" %}bg-muted text-foreground{% elif background == "card" %}bg-card text-card-foreground{% else %}bg-background text-foreground{% endif %}{% if class %} {{ class }}{% endif %}">
  <div class="bru-wrap grid items-center gap-10 md:grid-cols-2 md:gap-16">
    <div class="{% if mediaPosition == "left" %}md:order-2{% else %}md:order-1{% endif %}">
      {% if eyebrow %}<span class="bru-tag mb-4">{{ eyebrow }}</span>{% endif %}
      {% if heading %}<h2 class="bru-kicker" style="font-size:clamp(1.75rem,4vw,3rem)">{{ heading }}</h2>{% endif %}
      {% if body %}<div class="mt-4 space-y-4 text-lg text-muted-foreground [&_a]:text-accent [&_a]:underline [&_strong]:text-foreground">{{ body|safe }}</div>{% endif %}
      {% if ctaUrl and ctaLabel %}<a href="{{ ctaUrl }}" class="bru-btn bru-btn-solid mt-6">{{ ctaLabel }} →</a>{% endif %}
    </div>
    <div class="{% if mediaPosition == "left" %}md:order-1{% else %}md:order-2{% endif %}">
      {% if media %}<div class="bru-slab bru-shadow overflow-hidden">{% img media alt=mediaAlt class="w-full h-auto object-cover" %}</div>{% endif %}
    </div>
  </div>
</section>