IconDark icon

---
interface DarkCard {
  icon?: string;
  title: string;
  desc?: string;
}

interface Props {
  headline?: string;
  cards?: DarkCard[];
  cols?: 2 | 3;
}

const {
  headline,
  cards = [],
  cols = 3,
} = Astro.props;
---

<section class:list={['bl-section', 'idark-section']}>
  <div class="bl-inner">
    {headline && <h2 class="idark-headline">{headline}</h2>}
    <div class="idark-grid" style={`--cols: ${cols}`}>
      {cards.map(card => (
        <div class="idark-card">
          {card.icon && <span class="idark-icon" aria-hidden="true">{card.icon}</span>}
          <h3 class="idark-title">{card.title}</h3>
          {card.desc && <p class="idark-desc">{card.desc}</p>}
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .idark-section { background: #0a0a0a; }
  .idark-headline {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: #e8e8e8;
    margin: 0 0 48px;
    letter-spacing: -.02em;
  }
  .idark-grid {
    --cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 20px;
  }
  @media (max-width: 640px) { .idark-grid { grid-template-columns: 1fr; } }
  @media (min-width: 641px) and (max-width: 1023px) { .idark-grid { grid-template-columns: 1fr 1fr; } }
  .idark-card {
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .2s, transform .2s;
  }
  .idark-card:hover { border-color: var(--color-accent, #6366f1); transform: translateY(-2px); }
  .idark-icon { font-size: 1.8rem; }
  .idark-title { margin: 0; font-size: 1rem; font-weight: 700; color: #e8e8e8; }
  .idark-desc { margin: 0; font-size: 1rem; line-height: 1.6; color: #aaa; }
</style>