IconCard icon

---
interface Props {
  icon?: string;
  title: string;
  desc?: string;
  cta?: { label: string; href: string };
}

const {
  icon,
  title,
  desc,
  cta,
} = Astro.props;
---

<section class:list={['bl-section', 'icd-section']}>
  <div class="bl-inner">
    <div class="icd">
      {icon && (
        <div class="icd__icon-wrap" aria-hidden="true">
          <span class="icd__icon">{icon}</span>
        </div>
      )}
      <h3 class="icd__title">{title}</h3>
      {desc && <p class="icd__desc">{desc}</p>}
      {cta && <a class="icd__link" href={cta.href}>{cta.label}</a>}
    </div>
  </div>
</section>

<style>
  .icd-section { background: var(--color-bg, #fff); }
  .icd {
    padding: 2rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 360px;
    transition: box-shadow .2s, transform .2s;
  }
  .icd:hover { box-shadow: 0 8px 24px #6366f11f; transform: translateY(-3px); }
  .icd__icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #f0f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
  }
  .icd__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
  }
  .icd__desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
    flex: 1;
  }
  .icd__link {
    font-size: .9rem;
    font-weight: 700;
    color: var(--color-accent, #6366f1);
    text-decoration: none;
    margin-top: auto;
  }
  .icd__link:hover { text-decoration: underline; }
</style>