ImageFeatured image

---
/**
 * ImageFeatured
 * Uitgelichte/hero-afbeelding met onderschrift en metadata
 */
interface Props {
  src?: string;
  alt?: string;
  caption?: string;
  author?: string;
  date?: string;
}
const {
  src = 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&q=80',
  alt = 'Team bespreekt marketingstrategie',
  caption = 'Hoe datagestuurde beslissingen leiden tot duurzame groei — een kijkje achter de schermen bij BLURR.',
  author = 'BLURR Redactie',
  date = '14 april 2025',
} = Astro.props;
---

<figure class="ifeat">
  <div class="ifeat__img-wrap">
    <img class="ifeat__img" src={src} alt={alt} loading="lazy" />
  </div>
  <figcaption class="ifeat__meta">
    <p class="ifeat__caption">{caption}</p>
    <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>
</figure>

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