<%
  // Color palette matching home page hero cards
  const colors = [
    { border: 'hover:border-blue-200', ring: 'hover:ring-blue-100', text: 'group-hover:text-blue-600', cta: 'text-blue-600 hover:text-blue-500', gradient: 'group-hover:from-blue-50/40 group-hover:to-sky-50/30' },
    { border: 'hover:border-emerald-200', ring: 'hover:ring-emerald-100', text: 'group-hover:text-emerald-600', cta: 'text-emerald-600 hover:text-emerald-500', gradient: 'group-hover:from-emerald-50/40 group-hover:to-teal-50/30' },
    { border: 'hover:border-purple-200', ring: 'hover:ring-purple-100', text: 'group-hover:text-purple-600', cta: 'text-purple-600 hover:text-purple-500', gradient: 'group-hover:from-purple-50/40 group-hover:to-violet-50/30' },
    { border: 'hover:border-amber-200', ring: 'hover:ring-amber-100', text: 'group-hover:text-amber-600', cta: 'text-amber-600 hover:text-amber-500', gradient: 'group-hover:from-amber-50/40 group-hover:to-yellow-50/30' },
    { border: 'hover:border-rose-200', ring: 'hover:ring-rose-100', text: 'group-hover:text-rose-600', cta: 'text-rose-600 hover:text-rose-500', gradient: 'group-hover:from-rose-50/40 group-hover:to-pink-50/30' },
    { border: 'hover:border-sky-200', ring: 'hover:ring-sky-100', text: 'group-hover:text-sky-600', cta: 'text-sky-600 hover:text-sky-500', gradient: 'group-hover:from-sky-50/40 group-hover:to-cyan-50/30' }
  ];
  const colorIdx = (typeof colorIndex !== 'undefined' ? colorIndex : 0) % colors.length;
  const c = colors[colorIdx];
%>
<div class="group relative flex flex-col h-full rounded-2xl border border-gray-200 bg-white p-6 shadow-sm ring-1 ring-gray-100 hover:shadow-lg <%= c.border %> <%= c.ring %> hover:-translate-y-1 transition-all duration-300 ease-out focus-within:shadow-md overflow-hidden cursor-pointer" tabindex="0" aria-label="Blog post card: <%- blogPost.title.replace(/\"/g,'') -%>">
  <!-- Subtle gradient overlay on hover -->
  <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-transparent <%= c.gradient %> transition-all duration-500 pointer-events-none"></div>

  <div class="flex-1 flex flex-col relative z-10">
    <div class="flex items-start gap-3">
      <div class="flex-1">
        <a href="<%= blogPost.blogUrl %>" class="no-underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded-md">
          <h2 class="text-xl font-semibold tracking-tight text-gray-900 <%= c.text %> transition-colors duration-200 line-clamp-2">
            <%= blogPost.title %>
          </h2>
        </a>
        <p class="mt-3 text-sm leading-6 text-gray-600 line-clamp-4"><%= blogPost.description %></p>
      </div>
    </div>
    <div class="mt-4">
      <%- include('./Tags', { blogPost: blogPost }) -%>
    </div>
    <div class="mt-auto pt-6 flex items-center justify-between border-t border-gray-100">
      <a href="https://github.com/<%- blogPost.authorGitHubUsername -%>" target="_blank" class="flex items-center gap-3 group/author">
        <img loading="lazy" src="https://avatars.githubusercontent.com/<%- blogPost.authorGitHubUsername -%>?s=64" alt="@<%- blogPost.authorGitHubUsername -%>" class="h-10 w-10 rounded-full ring-2 ring-white shadow-sm group-hover/author:ring-gray-200 transition-all duration-200" width="40" height="40" decoding="async">
        <div class="text-[11px] leading-4 text-gray-600">
          <span class="text-gray-500">By</span> @<%- blogPost.authorGitHubUsername -%><br/>
          <span class="text-gray-400"><%- blogPost.formattedPostDate -%></span>
        </div>
      </a>
      <a href="<%= blogPost.blogUrl %>" class="shrink-0 text-sm font-medium <%= c.cta %> inline-flex items-center gap-1.5 transition-all duration-200 group/cta">Read
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 transition-transform duration-200 group-hover/cta:translate-x-0.5"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
      </a>
    </div>
  </div>
</div>
