ImageSplit image

---
/**
 * ImageSplit — tekst links (op de rail), beeld rechts.
 *
 * Props:
 * - title?: string                 (HTML toegestaan)
 * - body?: string                  (HTML toegestaan)
 * - cta?: { label: string; href: string }
 * - image?: string
 * - imageAlt?: string
 */
interface Props {
  title?: string;
  body?: string;
  cta?: { label: string; href: string };
  image?: string;
  imageAlt?: string;
}
const {
  title = 'Wij bouwen merken die groeien',
  body = 'Strategie, design en performance marketing in één samenhangende aanpak.',
  cta = { label: 'Bekijk onze werkwijze', href: '#' },
  image = '/img/ext/photo-1551434678-e076c223a692-w1200-8bdd3a.jpg',
  imageAlt = '',
} = Astro.props;
---

<section class="bl-section isp">
  <div class="bl-inner isp__inner">
    <div class="isp__content">
      {title && <h2 class="isp__title" set:html={title}></h2>}
      {body && <p class="isp__body" set:html={body}></p>}
      {cta && <a class="isp__cta" href={cta.href}>{cta.label}</a>}
    </div>
    <div class="isp__media">
      <img data-allow-img class="isp__img" src={image} alt={imageAlt} loading="lazy" decoding="async" />
    </div>
  </div>
</section>

<style>
.isp__inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.isp__content{display:flex;flex-direction:column;justify-content:center}
.isp__media{position:relative;overflow:hidden;border-radius:calc(var(--radius, .5rem) * 2)}
.isp__img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}
.isp__title{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1.25rem;line-height:1.2}
.isp__body{font-size:1.05rem;color:#555;line-height:1.7;margin:0 0 2rem}
.isp__cta{display:inline-block;padding:.75rem 1.75rem;background:var(--color-accent, #6366f1);color:#fff;text-decoration:none;border-radius:6px;font-weight:600;font-size:.95rem;align-self:flex-start;transition:opacity .2s}
.isp__cta:hover{opacity:.85}
@media (max-width:768px){
  .isp__inner{grid-template-columns:1fr;gap:2rem}
  .isp__media{order:-1}
}
</style>