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

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
<section class="relative h-64 md:h-80 overflow-hidden bg-ink">
  {{if $banner}}
  <img src="{{$banner}}" alt="{{.Single.Name}}" class="w-full h-full object-cover opacity-60">
  {{end}}
  <div class="absolute inset-0 bg-gradient-to-r from-ink/80 to-ink/40 flex items-center">
    <div class="max-w-7xl mx-auto px-4 lg:px-8 w-full text-white">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">{{.Single.Name}}</div>
      <h1 class="font-serif text-4xl md:text-5xl">{{.Single.Title}}</h1>
      {{if .Single.Description}}<p class="text-stone-200 mt-3 max-w-2xl">{{.Single.Description}}</p>{{end}}
    </div>
  </div>
</section>

<section class="max-w-3xl mx-auto px-4 lg:px-8 py-14">
  <div class="prose prose-stone prose-lg max-w-none">{{.Single.Content|Str2Html}}</div>
</section>
{{end}}

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