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

{{if .Single}}
{{$blocks := index .Single.Ext "blocks"}}

<main class="pb-12">
  {{if .Nav}}
  <section class="vm-section py-6">
    <div class="vm-breadcrumb">
      <a href="/">首页</a>
      {{range .Nav}}<span class="mx-2">/</span><a href="{{.URL}}">{{.Name}}</a>{{end}}
    </div>
  </section>
  {{end}}

  <section class="vm-section py-8">
    <div class="max-w-3xl">
      <div class="vm-kicker">服务能力</div>
      <h1 class="mt-3 text-3xl font-semibold text-[var(--text)] md:text-5xl">{{.Single.Column.Name}}</h1>
      {{if .Single.Column.Description}}<p class="mt-4 text-base leading-8 text-[var(--muted)]">{{.Single.Column.Description}}</p>{{end}}
  
    </div>
  </section>

  {{if $blocks}}
  <section class="vm-section py-8">
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
      {{range $blocks}}
      <article class="vm-hover-card overflow-hidden rounded-[1.5rem] border border-[var(--border)] bg-white">
        <div class="p-5">
          <div class="mb-3 flex items-center justify-between gap-4">
            <span class="rounded-full bg-[var(--primary-soft)] px-3 py-1 text-xs font-semibold text-[var(--primary)]">{{index . "no"}}</span>
            <span class="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--muted)]">card</span>
          </div>
          <h2 class="text-xl font-semibold text-[var(--text)]">{{index . "title"}}</h2>
          <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{index . "desc"}}</p>
        </div>
      </article>
      {{end}}
    </div>
  </section>
  {{end}}
</main>
{{end}}

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