IconWithText icon

---
/**
 * IconWithText
 * Eén icoon-medaillon naast een tekstkolom met eyebrow, kop en body.
 * Stapelt op mobiel. Prop-driven.
 *
 * Props:
 * - icon?: string
 * - eyebrow?: string
 * - headline: string
 * - body: string
 */
interface Props {
  icon?: string;
  eyebrow?: string;
  headline: string;
  body: string;
}
const { icon = '→', eyebrow, headline, body } = Astro.props;
---

<section class="bl-section iwt">
  <div class="bl-inner bl-inner--narrow iwt-inner">
    <div class="iwt-wrap">
      <div class="iwt-icon-col">
        <div class="iwt-icon-ring">
          <span class="iwt-icon" aria-hidden="true">{icon}</span>
        </div>
      </div>
      <div class="iwt-text-col">
        {eyebrow && <span class="iwt-sub">{eyebrow}</span>}
        <h2 class="iwt-headline">{headline}</h2>
        <p class="iwt-body">{body}</p>
      </div>
    </div>
  </div>
</section>

<style>
.iwt-wrap{--color-accent: #6366f1;--color-primary: #0a0a0a;display:flex;gap:32px;align-items:flex-start}
.iwt-icon-col{flex-shrink:0}
.iwt-icon-ring{width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,#6366f1,#818cf8);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #6366f14d}
.iwt-icon{font-size:2rem;color:#fff}
.iwt-text-col{flex:1;display:flex;flex-direction:column;gap:8px}
.iwt-sub{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent)}
.iwt-headline{margin:0;font-size:1.75rem;font-weight:800;color:var(--color-primary);letter-spacing:-.02em;line-height:1.25}
.iwt-body{margin:0;font-size:1.0625rem;line-height:1.7;color:#374151}
@media (max-width:600px){.iwt-wrap{flex-direction:column}}
</style>