/* =======================================================
   FLEXBOX
   ======================================================= */

/* Impostazione display */
.display-block{
    display:block;
}
.display-flex {
  display: flex;
}

/* Direzione degli elementi */
.display-flex-row {
    display: flex;
    flex-direction: row;
}

.display-flex-column {
    display: flex;
    flex-direction: column;
}

/* Direzione degli elementi mobile*/
.display-flex-row-mobile {
    display: flex;
    flex-direction: row;
}

.display-flex-column-mobile {
    display: flex;
    flex-direction: column;
}

/* Wrap */
.wrap {
  flex-wrap: wrap;
}

.no-wrap {
  flex-wrap: nowrap;
}

/* Flex */
.flex-0{
    flex: 0 0 auto;
}


/* Allineamento contenuto su più righe */
.align-content-top       { align-content: flex-start; }
.align-content-center    { align-content: center; }
.align-content-bottom    { align-content: flex-end; }
.align-content-bottom-mobile    { align-content: flex-end; }
.align-content-around    { align-content: space-around; }
.align-content-between   { align-content: space-between; }
.align-content-stretch   { align-content: stretch; }

/* Allineamento degli elementi (asse trasversale) */
.align-items-top       { align-items: flex-start; }
.align-items-center    { align-items: center; }
.align-items-bottom    { align-items: flex-end; }
.align-items-bottom-mobile    { align-items: flex-end; }
.align-items-stretch   { align-items: stretch; }
.align-items-baseline  { align-items: baseline; }

/* Allineamento orizzontale (asse principale) */
.justify-top       { justify-content: flex-start; }
.justify-center    { justify-content: center; }
.justify-end       { justify-content: flex-end; }
.justify-bottom    { justify-content: flex-end; }
.justify-bottom-mobile    { justify-content: flex-end; }
.justify-between   { justify-content: space-between; }
.justify-around    { justify-content: space-around; }
.justify-evenly    { justify-content: space-evenly; }

/* =======================================================
   CSS GRID
   ======================================================= */

/* Attiva layout a griglia */
.grid {
  display: grid;
}

/* Numero di colonne */
.grid-cols-1   { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2   { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3   { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4   { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5   { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6   { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12  { grid-template-columns: repeat(12, 1fr); }
.grid-content-width-100 { grid-template-columns: max-content 1fr; /* sinistra = width-content, destra = full width */}

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

.col-left  { grid-row: 1; }


/* =======================================================
   MOBILE
   ======================================================= */
   /* ✅ XL monitor (1536px e oltre) */
@media (min-width: 1536px) {
}
/* ✅ Desktop (1280px e oltre) */
@media (min-width: 1280px) {
}
/* ✅ Laptop (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
}
/* ✅ Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Direzione degli elementi mobile*/
    .display-flex-row-mobile {
        display: flex;
        flex-direction: column;
    }
    
    .display-flex-column-mobile {
        display: flex;
        flex-direction: column;
    }
}
/* ✅ Mobile (fino a 767px) */
@media (max-width: 767px) {
    /* Direzione degli elementi mobile*/
    .display-flex-row-mobile {
        display: flex;
        flex-direction: column;
    }
    
    .display-flex-column-mobile {
        display: flex;
        flex-direction: column;
    }
    .align-content-bottom-mobile    { align-content: flex-start; }
    .justify-bottom-mobile    { justify-content: flex-start; }
    .align-items-bottom-mobile     { align-items: flex-start; }
    .grid-cols-2-mobile { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-3-mobile { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-4-mobile   { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-2-1-mobile   { grid-template-columns: 1fr; }
    .grid-cols-1-3-mobile   { grid-template-columns: 1fr; }
    .grid-cols-1-3-mobile .col-left  { grid-row: 2; } /* va sotto */
    .grid-cols-1-3-mobile .col-right { grid-row: 1; } /* va sopra */
}