{{include "header.html"}}
{{include "nav.html"}}

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
{{if $banner}}
<section class="relative aspect-[16/9] max-h-[60vh] overflow-hidden">
  <img src="{{$banner}}" alt="{{.Single.Name}}" class="w-full h-full object-cover">
  <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-black/20 flex items-end pb-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 w-full text-white">
      <h1 class="text-3xl md:text-5xl font-serif font-semibold mb-3">{{.Single.Name}}</h1>
      {{if .Single.Description}}<p class="text-sm md:text-lg opacity-90 max-w-2xl">{{.Single.Description}}</p>{{end}}
    </div>
  </div>
</section>
{{else}}
<section class="bg-stone-50 py-16 text-center border-b border-stone-200">
  <h1 class="text-3xl md:text-5xl font-serif font-semibold text-ink">{{.Single.Name}}</h1>
  {{if .Single.Description}}<p class="text-sm md:text-base text-muted mt-4 max-w-2xl mx-auto">{{.Single.Description}}</p>{{end}}
</section>
{{end}}

<article class="py-16 bg-paper">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="prose prose-stone prose-lg max-w-none">{{.Single.Content|Str2Html}}</div>
  </div>
</article>
{{end}}

{{include "footer.html"}}
{{include "js.html"}}