{!--
  Single blog entry card. Must be inside an {exp:channel:entries channel="blog_entry"} loop.
  Renders image (from {blog_images}), date, title, excerpt, and read-more link.
--}
<article class="group flex h-full flex-col overflow-hidden gf-surface-card transition hover:-translate-y-1 hover:shadow-2xl">
  {blog_images}
  <a href="{site_url}blog/post/{url_title}" class="block aspect-video overflow-hidden gf-radius-element">
    <img src="{blog_images:file}" alt="{title}" loading="lazy"
      class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
  </a>
  {/blog_images}
  <div class="flex flex-1 flex-col p-6">
    <p class="gf-eyebrow text-primary-400">{entry_date format='%M %j%S, %Y'}</p>
    <h3 class="gf-heading-3 mt-2 text-white">
      <a href="{site_url}blog/post/{url_title}" class="hover:text-primary-300">{title}</a>
    </h3>
    <p class="mt-3 line-clamp-3 text-sm text-white/70">{blog_preview_copy}</p>
    <div class="mt-auto pt-6">
      <a href="{site_url}blog/post/{url_title}" class="gf-btn gf-btn-ghost">
        <span>{if blog_more_label}{blog_more_label}{if:else}Read more{/if}</span>
        <svg class="ml-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
    </div>
  </div>
</article>