{{- define "main" -}}

<!-- Header -->
<header class="gutter-x pt-36 pb-14 border-b border-zinc speed-lines">
  <span class="badge badge-frost text-void mb-5 inline-block">Contributors</span>
  <h1 class="font-display text-5xl md:text-7xl text-paper leading-none">Authors</h1>
</header>

<div class="gradient-line"></div>

<!-- Authors grid -->
<section class="gutter-x py-16 md:py-24">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    {{- range .Pages -}}
    <a href="{{ .RelPermalink }}" class="group card-comic flex flex-col items-start gap-5 p-6 bg-concrete">

      <!-- Avatar — bundle avatar.* first, fall back to .Params.avatar -->
      {{- $avatarRes := .Resources.GetMatch "avatar.*" -}}
      {{- $avatarSrc := "" -}}
      {{- with $avatarRes }}{{ $avatarSrc = .RelPermalink }}{{ else }}{{ with $.Params.avatar }}{{ $avatarSrc = . }}{{ end }}{{ end -}}
      {{- if $avatarSrc -}}
      <div class="w-20 h-20 overflow-hidden border border-zinc group-hover:border-heat transition-colors">
        <img
          src="{{ $avatarSrc }}"
          alt="{{ .Params.name | default .Title }}"
          class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
          loading="lazy"
        >
      </div>
      {{- else -}}
      <div class="w-20 h-20 bg-zinc border border-zinc flex items-center justify-center">
        <span class="font-display text-2xl text-fog">{{ substr (.Params.name | default .Title) 0 1 }}</span>
      </div>
      {{- end -}}

      <!-- Info -->
      <div class="flex-1">
        <h2 class="font-display text-xl text-paper group-hover:text-heat transition-colors mb-2 leading-none">
          {{ .Params.name | default .Title }}
        </h2>
        {{- with .Params.bio -}}
        <p class="text-fog text-sm leading-relaxed line-clamp-3 mt-2 font-body">{{ . }}</p>
        {{- end -}}
      </div>

      <span class="badge badge-outline group-hover:bg-heat group-hover:text-white group-hover:border-heat transition-all mt-auto">
        View works {{ partial "icon.html" "arrow-right" }}
      </span>
    </a>
    {{- end -}}
  </div>
</section>

{{- end -}}