{# contact-card override — grouped contact channels; each channel a hairline mark + label + value. #}
<section class="lcars-section {{ class }}"><div class="lcars-content-well">
{% if heading %}<h2 class="lcars-heading" style="font-size:clamp(1.75rem, 3vw, 2.25rem);margin:0 0 0.75rem 0;"><span class="lcars-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
{% if description %}<p class="lcars-lede" style="max-width:60ch;margin:0 0 2.5rem 0;color:hsl(var(--muted-foreground));">{{ description }}</p>{% endif %}
<div class="lcars-grid {% if columns == 3 %}lcars-grid-3{% elif columns == 1 %}{% else %}lcars-grid-2{% endif %}" style="display:grid;gap:1rem;{% if columns == 3 %}grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));{% elif columns == 1 %}grid-template-columns:1fr;{% else %}grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));{% endif %}">
{% for channel in channels %}<div class="lcars-channel lcars-card" style="display:flex;align-items:flex-start;gap:1rem;">
{% if channel.icon %}<span class="lcars-channel-mark" style="display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex:0 0 auto;border:1px solid hsl(var(--border));border-radius:4px;color:hsl(var(--accent));"><svg width="16" height="16" class="lcars-inline-icon" aria-hidden="true"><use href="/icons/{{ channel.icon|split:":"|first }}.svg#{{ channel.icon|split:":"|last }}"/></svg></span>{% endif %}
<div style="min-width:0;">
{% if channel.label %}<div class="lcars-stat-label" style="margin:0;">{{ channel.label }}</div>{% endif %}
{% if channel.value %}<div style="margin-top:0.25rem;font-weight:500;word-break:break-word;color:hsl(var(--foreground));">{% if channel.link %}<a href="{{ channel.link }}" style="color:inherit;text-decoration:none;">{{ channel.value }}</a>{% else %}{{ channel.value }}{% endif %}</div>{% endif %}
</div>
</div>{% endfor %}
</div>
</div></section>
