{{ define "main" }}
  <div class="bg-bg-deep border-b border-warm/10">
    <div class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5 py-16">
      <div class="eyebrow mb-3">{{ .Type | title }}</div>
      <h1 class="display text-[clamp(36px,6vw,72px)] mb-4">{{ .Title }}</h1>
      <p class="text-ink-soft text-lg">{{ len .Pages }} {{ .Type | singularize }} types across {{ len .Site.RegularPages }} recipes.</p>
    </div>
  </div>

  <div class="max-w-[1280px] mx-auto px-8 max-[860px]:px-5 py-16">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {{- range .Pages.ByTitle -}}
        <a
          href="{{ .RelPermalink }}"
          class="group flex items-center justify-between p-4 rounded-xl border border-warm/10 bg-surface hover:border-gold/40 hover:bg-surface-2 transition-all duration-200"
        >
          <div>
            <div class="font-serif font-medium text-xl group-hover:text-gold transition-colors">{{ .Title }}</div>
            {{- $cnt := len .Pages -}}
            <div class="font-mono text-[11px] text-ink-mute mt-1">{{ $cnt }} {{ if eq $cnt 1 }}recipe{{ else }}recipes{{ end }}</div>
          </div>
          <div class="text-ink-faint group-hover:text-gold transition-colors">
            {{- partial "icon.html" "arrow-right" -}}
          </div>
        </a>
      {{- end -}}
    </div>
  </div>
{{ end }}