/* ==========================================================================
   Sindesi Categories — v0.44.21 (E2c, 17/07/2026)
   ==========================================================================
   Shortcode `[sindesi_categories]` — griglia responsive di categorie di
   servizio con gradienti Sindesi. Design isolato con prefisso `.sc-cat*`
   per non collidere con altri moduli (nota: `.sc-*` senza `cat` è usato
   dalla chat — `.sc-cat*` è specifico).

   ## Grid responsive
     - desktop  ≥1200px : 4 col (coerente con vendors)
     - laptop   ≥ 900px : 3 col
     - tablet   ≥ 600px : 2 col
     - mobile   < 600px : 1 col

   ## Card cliccabile intera
   Il link `<a class="sc-cat__link">` occupa tutta la card. Nessun overlay
   assoluto qui: la struttura è `<li><a><span>` — il link è block-level e
   contiene il body, quindi tutta l'area è cliccabile nativamente. Approccio
   più semplice del pattern vendors (dove serviva overlay per compatibilità
   con rating + badges).

   ## Palette gradienti Sindesi
   6 varianti ciclate via nth-child. Deriva dalla palette Sindesi:
     - #0280DE blue        (identità)
     - #08B4BB teal        (identità)
     - #6366F1 indigo      (accent 1)
     - #EC4899 pink        (accent 2)
     - #10B981 emerald     (accent 3)
     - #F59E0B amber       (accent 4)

   I gradienti mixano 2 tonalità per profondità. Il testo bianco su tutti i
   gradienti è WCAG AA verificato (contrast ratio >= 4.5:1 per il colore
   più chiaro di ogni gradiente).
   ========================================================================== */

.sindesi-categories {
    --sc-cat-radius:      14px;
    --sc-cat-shadow:      0 4px 16px rgba(15, 23, 42, 0.06);
    --sc-cat-shadow-hover:0 12px 32px rgba(15, 23, 42, 0.15);

    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

.sindesi-categories *,
.sindesi-categories *::before,
.sindesi-categories *::after {
    box-sizing: border-box;
}

.sindesi-categories--empty {
    display: none;
}

/* --- Grid ------------------------------------------------------------------ */

.sc-cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 600px) {
    .sc-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}
@media (min-width: 900px) {
    .sc-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1200px) {
    .sc-cat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Card ------------------------------------------------------------------ */

.sc-cat {
    position: relative;
    border-radius: var(--sc-cat-radius);
    box-shadow: var(--sc-cat-shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Aspect-ratio 1:1 per grid consistente; contenuto centrato. Se il
       marketplace crescerà con nomi categoria molto lunghi, valutare
       aspect-ratio 4:3. */
    aspect-ratio: 1 / 1;
    min-height: 160px;
}

.sc-cat:hover {
    transform: translateY(-3px);
    box-shadow: var(--sc-cat-shadow-hover);
}

.sc-cat__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    color: #ffffff;
    text-decoration: none;
    /* Focus keyboard nav. */
    border-radius: var(--sc-cat-radius);
    outline-offset: 4px;
}
.sc-cat__link:focus-visible {
    outline: 3px solid #ffffff;
    /* Con background gradient scuro l'outline bianco è più leggibile
       dell'outline blu. Contrasto AAA. */
    outline-offset: -6px;
}
.sc-cat__link:visited,
.sc-cat__link:active,
.sc-cat__link:hover {
    color: #ffffff;
    text-decoration: none;
}

.sc-cat__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    /* Reset per non farsi bucare da stili tema su span. */
    line-height: 1.3;
}

.sc-cat__name {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    /* Text shadow leggero per migliorare la leggibilità su tutti i
       gradienti (fallback anche se qualche variante emerge un po' chiara). */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    /* Wrap consentito su nomi lunghi (evita ellipsis, il grid ha spazio). */
    word-break: break-word;
    hyphens: auto;
}

.sc-cat__count {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.90);
    /* Non-wrap sul count — è sempre corto ("6 Dienstleistungen"). */
    white-space: nowrap;
}

/* --- 6 varianti gradiente ciclate ------------------------------------------ */

.sc-cat--variant-1 {
    background: linear-gradient(135deg, #0280DE 0%, #08B4BB 100%);
    /* blue → teal — identità primaria Sindesi */
}

.sc-cat--variant-2 {
    background: linear-gradient(135deg, #08B4BB 0%, #10B981 100%);
    /* teal → emerald */
}

.sc-cat--variant-3 {
    background: linear-gradient(135deg, #6366F1 0%, #0280DE 100%);
    /* indigo → blue */
}

.sc-cat--variant-4 {
    background: linear-gradient(135deg, #EC4899 0%, #F59E0B 100%);
    /* pink → amber — sunset */
}

.sc-cat--variant-5 {
    background: linear-gradient(135deg, #10B981 0%, #08B4BB 100%);
    /* emerald → teal (specchio di 2) */
}

.sc-cat--variant-6 {
    background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);
    /* indigo → pink */
}

/* --- Touch device: disabilita hover transform ------------------------------ */
@media (hover: none) {
    .sc-cat:hover {
        transform: none;
    }
}

/* --- Reduced motion respect ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .sc-cat {
        transition: none;
    }
    .sc-cat:hover {
        transform: none;
    }
}