{# brutalist related-posts override — grid from the `posts` provider, thick top rule. Fields: heading, columns, posts[]. #}
{% if posts %}
<section class="bru-section bg-background text-foreground{% if class %} {{ class }}{% endif %}" style="border-top:4px solid hsl(var(--border))">
<div class="bru-wrap">
<h2 class="bru-kicker mb-8" style="font-size:clamp(1.75rem,4vw,3rem)">{{ heading|default:"Related posts" }}</h2>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 {% if columns == 2 %}lg:grid-cols-2{% else %}lg:grid-cols-3{% endif %}">
{% for post in posts %}
<article class="group bru-slab bru-shadow bru-hover flex flex-col overflow-hidden">
{% if post.featured_image_url %}<a href="{{ post.url }}" class="block aspect-video overflow-hidden bg-muted" style="border-bottom:3px solid hsl(var(--border))">{% img post.featured_image_url alt=post.title class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" %}</a>{% endif %}
<div class="flex flex-col gap-1 p-5">
<h3 class="bru-kicker text-base leading-snug" style="text-transform:none"><a href="{{ post.url }}" class="transition-colors hover:text-accent">{{ post.title }}</a></h3>
{% if post.published_at %}<p class="bru-meta mt-1">{{ post.published_at|date:"M j, Y" }}</p>{% endif %}
</div>
</article>
{% endfor %}
</div>
</div>
</section>
{% endif %}