{*
 * MÉRIDIAN — Bloc Catégories (page d'accueil)
 * Deux versions pilotées en back-office via $group->style :
 *   • "categorie1" (défaut) → grille ÉDITORIALE : disposition ADAPTÉE au nombre de
 *     catégories visibles (1 à 6+), avec une grande carte vedette quand c'est pertinent.
 *   • "categorie2"          → grille UNIFORME  : cartes égales, nombre de colonnes
 *     adapté au nombre de catégories.
 * La disposition est portée par la classe cat-n-{N} (N = nb de catégories, plafonné à 6,
 * "6" servant aussi de « 6 et plus »). Voir theme.css (.cat-grid / .cat-uniform).
 * Carte commune : image plein cadre + overlay dégradé + nom centré (majuscules) + lien « Découvrir ».
 * Données : $group->{style,title,isVisible}, $categories[] { isVisible, image, title, subTitle, url }
 *}
{assign var="style" value=$group->style|default:'categorie1'}
{assign var="uniform" value=($style == 'categorie2')}

{* catégories réellement visibles (on ne compte/affiche que celles-ci) *}
{assign var="visCats" value=[]}
{foreach from=$categories item=categorie}
  {if $categorie.isVisible}{append var="visCats" value=$categorie}{/if}
{/foreach}
{assign var="nCat" value=$visCats|@count}
{if $nCat >= 6}{assign var="nClass" value=6}{else}{assign var="nClass" value=$nCat}{/if}

{if $nCat > 0}
<section class="mrd-section">
  <div class="mrd-container">
    {if !empty($group->title)}
      <div class="cat-head reveal"><h2 class="display">{$group->title}</h2></div>
    {/if}

    <div class="{if $uniform}cat-uniform{else}cat-grid{/if} cat-n-{$nClass}">
      {foreach from=$visCats item=categorie name=cats}
        <a class="cat-card reveal" href="{$categorie.url|default:'#'}" style="transition-delay:{$smarty.foreach.cats.index*60}ms">
          {if !empty($categorie.image)}
            <img class="cat-img" src="{$categorie.image}" alt="{$categorie.title|escape:'html'}" loading="lazy" width="600" height="800">
          {/if}
          <span class="cat-card-ov" aria-hidden="true"></span>
          <span class="cat-card-body">
            {if !empty($categorie.subTitle)}<span class="eyebrow cat-card-eyebrow">{$categorie.subTitle}</span>{/if}
            <span class="cat-card-name">{$categorie.title}</span>
            <span class="cat-card-link">{l s='Découvrir' d='Shop.Theme.Global'}</span>
          </span>
        </a>
      {/foreach}
    </div>
  </div>
</section>
{/if}
