{{- /* Large overlay card for featured/secondary slots.
       Expects a post page as context (.).
*/ -}}
{{- $post := . -}}
<article class="group relative overflow-hidden aspect-[3/4] md:aspect-[4/5] card-comic">
  <a href="{{ $post.RelPermalink }}" class="block w-full h-full" aria-label="{{ $post.Title }}">

    <!-- Background media — bundle banner.png → 01.png → .Params.banner -->
    {{- $thumb := $post.Resources.GetMatch "banner.png" -}}
    {{- if not $thumb -}}{{- $thumb = $post.Resources.GetMatch "01.png" -}}{{- end -}}
    <div class="card-media w-full h-full absolute inset-0">
      {{- if $thumb -}}
        {{- partial "img.html" (dict "res" $thumb "widths" (slice 800 1200) "sizes" "(max-width: 768px) 100vw, 50vw" "class" "w-full h-full object-cover" "alt" $post.Title) -}}
      {{- else -}}{{- with $post.Params.banner -}}
        {{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover") -}}
      {{- else -}}
      <div class="w-full h-full bg-concrete flex items-center justify-center halftone">
        <span class="label text-smoke">PIVOINE</span>
      </div>
      {{- end -}}{{- end -}}
    </div>

    <!-- Gradient overlay -->
    <div class="absolute inset-0 overlay-gradient transition-opacity duration-500 group-hover:opacity-90"></div>

    <!-- Diagonal heat accent -->
    <div class="absolute bottom-16 left-0 w-28 h-[3px] opacity-0 group-hover:opacity-90 transition-opacity duration-300"
      style="background: linear-gradient(90deg, var(--color-heat), var(--color-pulse)); transform: skewX(-20deg) translateX(-4px);"></div>

    <!-- Content -->
    <div class="absolute bottom-0 left-0 right-0 p-5 md:p-6">
      {{- with $post.Params.categories -}}
      <div class="flex flex-wrap gap-2 mb-3">
        {{- range first 1 . -}}
        <span class="badge badge-outline">{{ . }}</span>
        {{- end -}}
      </div>
      {{- end -}}
      <h3 class="font-display text-xl md:text-2xl text-paper text-balance leading-none group-hover:text-heat transition-colors mb-3">
        {{- $post.Title -}}
      </h3>
      <div class="flex items-center gap-2">
        {{- with $post.Params.author -}}
          {{- $authorPage := site.GetPage (printf "authors/%s" .) -}}
          {{- with $authorPage -}}
          <span class="label text-chalk opacity-70">{{ .Params.name | default .Title }}</span>
          <span class="text-smoke opacity-60" aria-hidden="true">/</span>
          {{- end -}}
        {{- end -}}
        <time class="label text-chalk opacity-70" datetime="{{ $post.Date.Format "2006-01-02" }}">
          {{- $post.Date.Format "Jan 2006" -}}
        </time>
      </div>
    </div>

  </a>
</article>