---
/** Pillar — one value-pillar card (§10). Body via default slot. */
import Icon from './Icon.astro';
interface Props {
  title: string;
  icon?: string;
  iconMode?: 'mask' | 'img';
}
const { title, icon, iconMode = 'mask' } = Astro.props;
---

<div class="card pillar">
  {icon && <Icon name={icon} mode={iconMode} size="2.25rem" alt="" class="pillar-icon" />}
  <h3>{title}</h3>
  <p class="muted"><slot /></p>
</div>

<style>
  .pillar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .pillar-icon {
    color: var(--accent);
    margin-bottom: 0.25rem;
  }
  .pillar h3 {
    margin: 0;
  }
  .pillar p {
    margin: 0;
    line-height: 1.55;
  }
</style>
