---
/** Step — one numbered how-it-works step (§11). Body via default slot. */
import Icon from './Icon.astro';
interface Props {
  n: number;
  title: string;
  icon?: string;
}
const { n, title, icon } = Astro.props;
---

<div class="step">
  <div class="step-head">
    <span class="step-n">{n}</span>
    {icon && <Icon name={icon} mode="img" size="1.6rem" alt="" />}
  </div>
  <h3>{title}</h3>
  <p class="muted"><slot /></p>
</div>

<style>
  .step {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .step-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .step-n {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: color-mix(in srgb, var(--brand-600) 22%, transparent);
    border: 1px solid var(--accent);
    color: var(--fg);
    font-family: var(--font-mono);
    font-weight: 700;
  }
  .step h3 {
    margin: 0;
  }
  .step p {
    margin: 0;
    line-height: 1.55;
  }
</style>
