ImageFeatured image

---
/**
 * ImageFeatured — uitgelichte figuur met afbeelding + onderschrift/byline.
 *
 * Props:
 * - src?: string
 * - alt?: string
 * - caption?: string               (HTML toegestaan)
 * - author?: string               (byline-credit, bv. 'Foto: redactie')
 * - date?: string
 */
interface Props {
  src?: string;
  alt?: string;
  caption?: string;
  author?: string;
  date?: string;
}
const {
  src = '/img/ext/photo-1551434678-e076c223a692-w1200-8bdd3a.jpg',
  alt = 'Team in overleg',
  caption = 'Het team tijdens de jaarlijkse groeisprint.',
  author = 'Foto: redactie',
  date = '14 april 2025',
} = Astro.props;
---

<figure class="bl-section ifeat">
  <div class="bl-inner ifeat__inner">
    <div class="ifeat__img-wrap">
      <img data-allow-img class="ifeat__img" src={src} alt={alt} loading="lazy" decoding="async" />
    </div>
    <figcaption class="ifeat__meta">
      {caption && <p class="ifeat__caption" set:html={caption}></p>}
      {(author || date) && (
        <div class="ifeat__byline">
          {author && <span class="ifeat__author">{author}</span>}
          {author && date && <span class="ifeat__sep" aria-hidden="true">·</span>}
          {date && <time class="ifeat__date">{date}</time>}
        </div>
      )}
    </figcaption>
  </div>
</figure>

<style>
.ifeat{margin:0}
.ifeat__img-wrap{border-radius:14px;overflow:hidden;box-shadow:0 4px 32px #0000001a}
.ifeat__img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.ifeat__meta{padding:1rem .25rem 0;display:flex;flex-direction:column;gap:.4rem}
.ifeat__caption{font-size:.88rem;color:#555;line-height:1.6;margin:0;font-style:italic}
.ifeat__byline{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.ifeat__author{font-size:.78rem;font-weight:700;color:var(--color-primary, #0a0a0a);text-transform:uppercase;letter-spacing:.06em}
.ifeat__sep{color:#bbb;font-size:.78rem}
.ifeat__date{font-size:.78rem;color:#999}
</style>