/* ============================================================
   GRIGLIA — Engicam Design System
   
   STRUTTURA:
   - Classi di layout sul contenitore (.grid-3, .grid-4 ...)
   - I figli diretti diventano automaticamente le colonne
   - Nessuna classe sui figli salvo eccezioni (.col-full, .col-half)
   
   USO TIPICO:
   <div class="grid-3">
     <article>...</article>
     <article>...</article>
     <article>...</article>
   </div>

   SUPPORTO ul.ul0 (CMS categorie prodotti):
   Quando il CMS genera <ul class="ul0"> dentro un .grid-*,
   la ul diventa trasparente (display:contents) e i li
   diventano celle della griglia automaticamente.
   I <span class="separator"> generati dal CMS vengono nascosti.

   CON GUTTER CUSTOM:
   <div class="grid-3 gap-sm">...</div>
   <div class="grid-4 gap-lg">...</div>

   DIPENDE DA: variables.css
   ============================================================ */


/* ------------------------------------------------------------
   VARIABILI GUTTER
   Aggiunte qui per completezza, idealmente in variables.css
   ------------------------------------------------------------ */

:root {
  --gap-xs:  8px;   /* elementi molto ravvicinati, es. tag, badge */
  --gap-sm:  16px;  /* griglia compatta */
  --gap-md:  24px;  /* default — gutter design system */
  --gap-lg:  40px;  /* sezioni più ariose */
  --gap-xl:  64px;  /* layout editoriali, hero split */
}


/* ------------------------------------------------------------
   BASE GRIGLIA
   Tutti i .grid-* condividono queste proprietà.
   ------------------------------------------------------------ */

[class*="grid-"] {
  display: grid;
  gap: var(--gap-md);
  width: 100%;
}

/* ul.ul0 generata dal CMS: diventa trasparente nel layout
   così i suoi li diventano figli diretti della griglia */
[class*="grid-"] > ul.ul0 {
  display: contents;
  list-style: none;
  padding: 0;
  margin: 0;
}

[class*="grid-"] > ul.ul0 > li {
  min-width: 0;      /* previene overflow in CSS grid */
  overflow: hidden;  /* contiene il figlio */
}

/* Nasconde i <span class="separator"> generati dal CMS tra i li */
[class*="grid-"] > ul.ul0 > span.separator {
  display: none;
}


/* ------------------------------------------------------------
   CLASSI GUTTER — modificatori sul contenitore
   <div class="grid-3 gap-sm">
   ------------------------------------------------------------ */

[class*="grid-"].gap-xs  { gap: var(--gap-xs); }
[class*="grid-"].gap-sm  { gap: var(--gap-sm); }
[class*="grid-"].gap-md  { gap: var(--gap-md); }
[class*="grid-"].gap-lg  { gap: var(--gap-lg); }
[class*="grid-"].gap-xl  { gap: var(--gap-xl); }

/* Gutter separato per righe e colonne, se serve */
[class*="grid-"].gap-row-sm     { row-gap: var(--gap-sm); }
[class*="grid-"].gap-row-md     { row-gap: var(--gap-md); }
[class*="grid-"].gap-row-lg     { row-gap: var(--gap-lg); }
[class*="grid-"].gap-col-sm     { column-gap: var(--gap-sm); }
[class*="grid-"].gap-col-md     { column-gap: var(--gap-md); }
[class*="grid-"].gap-col-lg     { column-gap: var(--gap-lg); }


/* ------------------------------------------------------------
   GRIGLIE — DESKTOP
   Breakpoint di riferimento: > 992px
   ------------------------------------------------------------ */

.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }


/* ------------------------------------------------------------
   TABLET — 576px → 992px
   ------------------------------------------------------------ */

@media (max-width: 992px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }  /* rimane 2 */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }  /* 3 → 2 */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }  /* 4 → 2 */
  .grid-6 { grid-template-columns: repeat(3, 1fr); }  /* 6 → 3 */
}


/* ------------------------------------------------------------
   MOBILE — < 576px
   ------------------------------------------------------------ */

@media (max-width: 576px) {
  .grid-2 { grid-template-columns: 1fr; }  /* 2 → 1 */
  .grid-3 { grid-template-columns: 1fr; }  /* 3 → 1 */
  .grid-4 { grid-template-columns: 1fr; }  /* 4 → 1 */
  .grid-6 { grid-template-columns: repeat(2, 1fr); }  /* 6 → 2 */
}


/* ------------------------------------------------------------
   ECCEZIONI SUI FIGLI
   Classi da mettere sul figlio diretto per occupare
   più colonne del solito.
   ------------------------------------------------------------ */

/* Occupa tutta la larghezza, indipendentemente dalla griglia */
.col-full {
  grid-column: 1 / -1;
}

/* Occupa metà delle colonne disponibili (utile in .grid-4) */
.col-half {
  grid-column: span 2;
}

/* Occupa 2/3 (utile in .grid-3 per layout asimmetrici) */
.col-two-thirds {
  grid-column: span 2;
}

@media (max-width: 576px) {
  .col-half,
  .col-two-thirds { grid-column: 1 / -1; }
}


/* ------------------------------------------------------------
   ALLINEAMENTO VERTICALE CELLE
   Modificatori sul contenitore.
   ------------------------------------------------------------ */

[class*="grid-"].align-start    { align-items: start; }
[class*="grid-"].align-center   { align-items: center; }
[class*="grid-"].align-end      { align-items: end; }
[class*="grid-"].align-stretch  { align-items: stretch; }  /* default */