{{/* Usage: {{ partial "cocktail-card.html" . }} — pass a cocktail Page */}}
{{- $cocktail := . -}}
{{- $img := $cocktail.Resources.GetMatch "cocktail.*" -}}
{{- $nob := "Optional" -}}
{{- with $cocktail.Params.alcoholic -}}
  {{- if eq . "Alcoholic" -}}{{- $nob = "Spirited" -}}
  {{- else if eq . "Non alcoholic" -}}{{- $nob = "Zero-proof" -}}
  {{- end -}}
{{- end -}}

<a
  href="{{ $cocktail.RelPermalink }}"
  class="block border border-warm/10 rounded-[14px] overflow-hidden bg-surface transition-[transform,border-color,box-shadow] duration-[260ms] ease-[cubic-bezier(.2,.7,.3,1)] relative hover:-translate-y-1 hover:border-warm/18 hover:shadow-[0_24px_50px_-24px_rgba(0,0,0,.8)] card-wrap"
  aria-label="{{ $cocktail.Title }}"
>
  <!-- Thumbnail -->
  <div class="aspect-square relative overflow-hidden">
    {{- if $img -}}
      {{- partial "img.html" (dict
        "res"   $img
        "widths" (slice 500 900)
        "sizes"  "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
        "class"  "card-img"
        "alt"    $cocktail.Title
      ) -}}
    {{- else -}}
      <img
        src="{{ $cocktail.Params.drinkThumbnail }}"
        alt="{{ $cocktail.Title }}"
        loading="lazy"
        decoding="async"
        class="card-img"
      />
    {{- end -}}
    <!-- Nob badge -->
    <span class="absolute top-[11px] left-[11px] z-[2] font-mono text-[9px] tracking-[0.12em] uppercase px-[9px] py-1 rounded-full bg-[rgba(13,10,7,0.6)] backdrop-blur-[6px] border border-warm/10 text-ink-soft">
      {{ $nob }}
    </span>
  </div>

  <!-- Body -->
  <div class="px-[17px] pt-4 pb-[18px]">
    <div class="font-mono text-[10px] tracking-[0.16em] uppercase text-gold">
      {{- with $cocktail.Params.categories -}}{{ index . 0 }}{{- end -}}
    </div>
    <h3 class="font-serif font-semibold text-[23px] leading-[1.05] tracking-tight mt-[7px] mb-[10px]">
      {{ $cocktail.Title }}
    </h3>
    <div class="flex flex-wrap gap-1.5 font-mono text-[10px] text-ink-mute tracking-[0.04em]">
      {{- with $cocktail.Params.glasses -}}
        <span>{{ index . 0 }}</span>
      {{- end -}}
      {{- with $cocktail.Params.ingredients -}}
        <span class="before:content-['·'] before:mr-1.5 before:opacity-60">{{ len . }} ingredients</span>
      {{- end -}}
    </div>
  </div>
</a>