{{#
  Case de sucesso — pagina de detalhe.

  Layout editorial, 100% estatico: nenhuma animacao, nenhum JS, nada que
  dependa de scroll. Só hover em links e botoes.

  Toda secao esta dentro do seu proprio condicional. Uma entrada que ainda nao
  foi migrada nao renderiza nada disso — e cai no bloco .cs-legacy do final,
  que imprime o corpo (content) original intacto. Por isso trocar o template da
  colecao de "page" para "cases/show" e seguro: nenhuma pagina fica em branco.

  O corpo legado sai apenas quando design_v2 esta desligado; ver o comentario
  extenso no fim do arquivo.

  A linguagem visual espelha resources/views/services/detail.antlers.html +
  public/assets/css/service.css: wash diagonal no hero, faixa de numeros que
  quebra o branco, ordinais gerados por counter() em CSS, filetes de 1px em vez
  de molduras, e banda de gradiente escuro no CTA final.

  Ritmo vertical: cada secao e uma faixa full-bleed com sua propria superficie
  (wash / mint / paper / paper-2), em vez de uma coluna branca unica. As faixas
  alternam mesmo quando galeria e depoimento estao vazios (ver a ordem abaixo).
#}}
<div class="cs">

    {{# ------------------------------------------------------------- hero #}}
    {{# O guard NAO inclui `title` de proposito: title existe sempre, e a secao
        renderizaria um hero vazio por cima do conteudo legado das entradas nao
        migradas. O H1 continua caindo para `title` quando client_name falta. #}}
    {{ if client_name || hero_lead || hero_image }}
        <section class="cs-hero">
            <div class="cs__inner cs-hero__grid">
                <div class="cs-hero__copy">
                    <a class="cs-back" href="/case-sucesso">
                        <svg class="cs-back__arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                            <path d="M14 8H3M7 4L3 8l4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Voltar para cases
                    </a>

                    <span class="cs__eyebrow cs-chip">{{ case_eyebrow ?? 'Case de sucesso' | entities }}</span>

                    <h1>{{ client_name ?? title | entities }}</h1>

                    {{ if card_tags }}
                        <ul class="cs-hero__tags">
                            {{ card_tags }}
                                <li class="cs-tag">{{ value | entities }}</li>
                            {{ /card_tags }}
                        </ul>
                    {{ /if }}

                    {{ if hero_lead }}
                        <p class="cs-hero__lead">{{ hero_lead | entities | nl2br }}</p>
                    {{ /if }}
                </div>

                {{# Unica imagem carregada com eager: esta acima da dobra. #}}
                {{ if hero_image }}
                    <figure class="cs-hero__media">
                        <img src="{{ hero_image | entities }}"
                             alt="{{ hero_image_alt ?? '' | entities }}"
                             loading="eager" decoding="async">
                    </figure>
                {{ /if }}
            </div>
        </section>
    {{ /if }}

    {{# -------------------------------------------------------- faixa KPI #}}
    {{#
      O primeiro "wow" da pagina: numeros grandes sobre a faixa mint, com filetes
      verticais de 1px entre eles (mesmo papel de .svc-stats em service.css).

      A quantidade de KPIs varia por entrada — 3 (Útil Gás), 4 (Auto Baterias) e
      6 (Age Fibra). O numero de colunas e resolvido no CSS por breakpoint, e o
      caso de 4 itens ganha uma linha de quatro em vez de 3+1; ver .cs-kpis__grid.
    #}}
    {{ if kpis }}
        <section class="cs-kpis">
            <div class="cs__inner">
                <div class="cs-kpis__grid">
                    {{ kpis }}
                        <div class="cs-kpis__item">
                            <span class="cs-kpis__value">{{ value | entities }}</span>
                            {{ if label }}<span class="cs-kpis__label">{{ label | entities }}</span>{{ /if }}
                        </div>
                    {{ /kpis }}
                </div>
            </div>
        </section>
    {{ /if }}

    {{# ---------------------------------------------------------- estrategia #}}
    {{ if strategy_heading || strategy_lead || strategy_items }}
        <section class="cs-band cs-band--paper cs-strategy">
            <div class="cs__inner">
                <div class="cs-sec__head">
                    <span class="cs__eyebrow">Estratégia</span>
                    {{ if strategy_heading }}<h2>{{ strategy_heading | entities }}</h2>{{ /if }}
                    {{ if strategy_lead }}<p>{{ strategy_lead | entities | nl2br }}</p>{{ /if }}
                </div>

                {{ if strategy_items }}
                    <ul class="cs-checklist">
                        {{ strategy_items }}
                            {{ if label }}
                                <li class="cs-checklist__item">
                                    <span class="cs-checklist__ico" aria-hidden="true">
                                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                                            <path d="M3 8.5l3.2 3.2L13 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </span>
                                    <span class="cs-checklist__label">{{ label | entities }}</span>
                                </li>
                            {{ /if }}
                        {{ /strategy_items }}
                    </ul>
                {{ /if }}
            </div>
        </section>
    {{ /if }}

    {{# ----------------------------------------------------------- resultados #}}
    {{#
      Duas coisas sao feitas em CSS de proposito, nao no Antlers:

      1. O ordinal (01, 02, 03...). .cs-results__list abre um counter e cada
         .cs-result o incrementa; o numero sai de content: counter(...,
         decimal-leading-zero) no ::before do rail. Mesma tecnica de
         .svc-journey__badge em service.css. O numero nao existe no markup, logo
         continua correto se alguma linha for filtrada — e a entrada com 7 blocos
         numera ate 07 sem nenhuma mudanca aqui.

      2. A alternancia dos lados (.cs-result:nth-child(even) troca o "order" das
         colunas). Sem modulo no template.

      A classe cs-result--media so entra quando a linha tem imagem: sem ela o
      bloco ocupa a largura toda em vez de deixar uma coluna vazia. Nenhuma das
      entradas atuais tem imagem em resultados, e por isso que isso importa.

      value e value_label sao independentes: uma entrada (Auto Baterias) tem
      value_label sem value, e outra (Age Fibra) tem um bloco sem numero nenhum.
      O guard cobre os dois.
    #}}
    {{ if results }}
        <section class="cs-band cs-band--paper-2 cs-results">
            <div class="cs__inner">
                <div class="cs-sec__head">
                    <span class="cs__eyebrow">Resultados</span>
                </div>

                <div class="cs-results__list">
                    {{ results }}
                        <article class="cs-result{{ if image }} cs-result--media{{ /if }}">
                            <div class="cs-result__rail" aria-hidden="true"></div>

                            <div class="cs-result__copy">
                                {{ if kicker }}<span class="cs-result__kicker">{{ kicker | entities }}</span>{{ /if }}
                                {{ if heading }}<h3>{{ heading | entities }}</h3>{{ /if }}
                                {{ if body }}<p class="cs-result__body">{{ body | entities | nl2br }}</p>{{ /if }}

                                {{ if value || value_label }}
                                    <p class="cs-result__stat">
                                        {{ if value }}<span class="cs-result__value">{{ value | entities }}</span>{{ /if }}
                                        {{ if value_label }}<span class="cs-result__value-label">{{ value_label | entities }}</span>{{ /if }}
                                    </p>
                                {{ /if }}
                            </div>

                            {{ if image }}
                                <figure class="cs-result__media">
                                    <img src="{{ image | entities }}"
                                         alt="{{ image_alt ?? '' | entities }}"
                                         loading="lazy" decoding="async">
                                </figure>
                            {{ /if }}
                        </article>
                    {{ /results }}
                </div>
            </div>
        </section>
    {{ /if }}

    {{# -------------------------------------------------------------- galeria #}}
    {{#
      Grade deliberadamente irregular: a primeira foto ocupa duas colunas e duas
      linhas, as seguintes preenchem uma celula. Nenhuma entrada tem galeria
      hoje — o {{ if gallery }} garante que a secao inteira (faixa, titulo e
      grade) simplesmente nao existe no HTML nesse caso.
    #}}
    {{ if gallery }}
        <section class="cs-band cs-band--paper cs-gallery">
            <div class="cs__inner">
                <div class="cs-sec__head">
                    <span class="cs__eyebrow">Galeria</span>
                </div>

                <div class="cs-gallery__grid">
                    {{ gallery }}
                        {{ if image }}
                            <figure class="cs-gallery__cell">
                                <img src="{{ image | entities }}"
                                     alt="{{ alt ?? '' | entities }}"
                                     loading="lazy" decoding="async">
                                {{ if caption }}<figcaption>{{ caption | entities }}</figcaption>{{ /if }}
                            </figure>
                        {{ /if }}
                    {{ /gallery }}
                </div>
            </div>
        </section>
    {{ /if }}

    {{# ------------------------------------------------------------ depoimento #}}
    {{ if quote_text }}
        <section class="cs-band cs-band--mint">
            <div class="cs__inner">
                <figure class="cs-quote">
                    <span class="cs-quote__mark" aria-hidden="true">&ldquo;</span>
                    <blockquote>{{ quote_text | entities | nl2br }}</blockquote>
                    {{ if quote_author || quote_role }}
                        <figcaption>
                            {{ if quote_author }}<span class="cs-quote__author">{{ quote_author | entities }}</span>{{ /if }}
                            {{ if quote_role }}<span class="cs-quote__meta">{{ quote_role | entities }}</span>{{ /if }}
                        </figcaption>
                    {{ /if }}
                </figure>
            </div>
        </section>
    {{ /if }}

    {{# ------------------------------------------------------------- CTA final #}}
    {{ if cta_heading || cta_label }}
        <section class="cs-band cs-band--paper">
            <div class="cs__inner">
                <div class="cs-cta">
                    <div class="cs-cta__copy">
                        <span class="cs__eyebrow cs-cta__eyebrow">Próximo passo</span>
                        <h2>{{ cta_heading ?? 'Vamos escrever o próximo case juntos?' | entities }}</h2>
                        <p>Conte o seu desafio para a gente. Montamos a estratégia e mostramos o caminho até o resultado.</p>
                    </div>
                    <a class="cs-btn cs-btn--light" href="{{ cta_url ?? '/contato' | entities }}">
                        {{ cta_label ?? 'Fale com um especialista' | entities }}
                        <svg class="cs-btn__arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                            <path d="M2 8h11M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </a>
                </div>
            </div>
        </section>
    {{ /if }}

    {{# ------------------------------------------------- navegacao entre cases #}}
    {{#
      Outros cases da colecao.

      O filtro `:id:isnt="id"` e binding dinamico do Antlers: o `id` do lado
      direito e resolvido no contexto DA PAGINA (fora do loop) antes da query
      rodar, portanto exclui a entrada atual. Dentro do loop `id` ja seria o da
      entrada iterada, e a comparacao nao teria como ser feita.

      O toggle `listed` NAO pode ser filtrado na query: as entradas migradas nao
      gravam o campo (o default true vem do blueprint) e a query roda sobre o
      dado cru, entao tanto `listed:is="true"` quanto `listed:isnt="false"`
      devolvem zero resultados. Verificado na pagina renderizada. O filtro
      correto e o modifier `where` sobre a colecao ja augmentada — ai `listed`
      vale true por default e so quem desligar explicitamente sai da lista.

      `as="siblings"` + a atribuicao `others` existem para que o {{ if others }}
      envolva a faixa inteira: com um case so na colecao (ou com todos os outros
      deslistados) nem a faixa nem o titulo "Outros cases" sao impressos.
    #}}
    {{ collection:cases as="siblings" sort="card_order" :id:isnt="id" }}
        {{ others = siblings | where('listed', true) | limit(3) }}

        {{ if others }}
            <section class="cs-band cs-band--paper-2 cs-more">
                <div class="cs__inner">
                    <div class="cs-sec__head">
                        <span class="cs__eyebrow">Outros cases</span>
                        <h2>Veja o que fizemos para outras empresas</h2>
                    </div>

                    <ul class="cs-more__grid">
                        {{ others }}
                            <li class="cs-more__item">
                                <a class="cs-more__link" href="{{ url }}">
                                    {{ if card_image }}
                                        <span class="cs-more__media">
                                            <img src="{{ card_image | entities }}"
                                                 alt="{{ card_image_alt ?? '' | entities }}"
                                                 loading="lazy" decoding="async">
                                        </span>
                                    {{ /if }}

                                    <span class="cs-more__body">
                                        <span class="cs-more__name">{{ card_name ?? client_name ?? title | entities }}</span>

                                        {{ if card_tags }}
                                            <span class="cs-more__tags">
                                                {{ card_tags }}<span class="cs-more__tag">{{ value | entities }}</span>{{ /card_tags }}
                                            </span>
                                        {{ /if }}

                                        <span class="cs-more__cue">
                                            Ver o case
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                                                <path d="M2 8h11M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                        {{ /others }}
                    </ul>
                </div>
            </section>
        {{ /if }}
    {{ /collection:cases }}

    {{#
      ------------------------------------------------------ conteudo legado

      CRITICO. Este bloco imprime o HTML original da entrada (markup exportado
      do site antigo, Elementor). Ele e a garantia de que nenhuma entrada fica
      em branco enquanto a migracao para os campos novos nao acontece.

      Esta condicionado a design_v2 porque a migracao COPIA a prosa do corpo
      legado para os campos novos: se o corpo saisse sempre, uma entrada ja
      migrada mostraria o mesmo texto duas vezes — uma estilizada e uma como
      markup cru do Elementor.

        - entrada SEM design_v2 -> renderiza o corpo legado inteiro, exatamente
          como o template "page" fazia. Nenhuma regressao.
        - entrada COM design_v2 -> renderiza so as secoes novas. O corpo legado
          continua no arquivo da entrada, apenas nao e emitido.

      Usa "if !design_v2" em vez de "unless" so para manter o balanceamento de
      condicionais trivial de auditar.

      O CSS de .cs-legacy e neutro de proposito: nenhuma regra de .cs vaza para
      dentro dele (todas as regras novas usam classes .cs-*, que o markup legado
      nao possui) e ele nao herda tipografia nova.
    #}}
    {{ if !design_v2 }}
        {{ if content }}
            <section class="cs-legacy">{{ content }}</section>
        {{ /if }}
    {{ /if }}

</div>