@charset "UTF-8";

/*
  kgrid2 - base.css v4
  Sistema grid a 12 colonne - CSS Grid puro, mobile-first, no float

  Breakpoint (min-width):
    s    da   0px  (mobile, default, no media query)
    xs   da 580px
    t    da 900px
    m    da 1024px
    l    da 1360px
    xl   da 1600px
    xxl  da 1920px

  Uso: <div class="grid"><div class="s-12 m-6 l-4">...</div></div>
  s-12 m-6 l-4 = full su mobile, 50% da 1024px, 33% da 1360px in su

  Auto-grid: <div class="grid auto-grid"> colonne fluide min()+auto-fit
*/


/* ============================================================
   1. GRID CONTAINER
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 100%;
  margin: 0 auto;
  container-type: inline-size;
}

/* default mobile: ogni item occupa tutta la riga */
.grid > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.grid .grid {
  padding: 0;
  width: 100%;
}

.grid .center {
  justify-self: center;
  margin: auto;
  grid-column: 1 / -1;
}



/* ============================================================
   2. AUTO-GRID - min() + auto-fit (Kevin Powell pattern)
   Override la variabile in custom.css se serve.
   ============================================================ */

.grid.auto-grid {
  --auto-grid-min: 250px;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min), 100%), 1fr));
}
.grid.auto-grid-xs { --auto-grid-min: 140px; }
.grid.auto-grid-s  { --auto-grid-min: 180px; }
.grid.auto-grid-m  { --auto-grid-min: 250px; }
.grid.auto-grid-l  { --auto-grid-min: 320px; }
.grid.auto-grid-xl { --auto-grid-min: 420px; }

.grid.auto-grid > *,
.grid.auto-grid-xs > *,
.grid.auto-grid-s > *,
.grid.auto-grid-m > *,
.grid.auto-grid-l > *,
.grid.auto-grid-xl > * {
  grid-column: unset;
}


/* ============================================================
   3. S - default mobile (nessuna media query, da 0px in su)
   ============================================================ */

.grid .s-1  { grid-column: span 1; }
.grid .s-2  { grid-column: span 2; }
.grid .s-3  { grid-column: span 3; }
.grid .s-4  { grid-column: span 4; }
.grid .s-5  { grid-column: span 5; }
.grid .s-6  { grid-column: span 6; }
.grid .s-7  { grid-column: span 7; }
.grid .s-8  { grid-column: span 8; }
.grid .s-9  { grid-column: span 9; }
.grid .s-10 { grid-column: span 10; }
.grid .s-11 { grid-column: span 11; }
.grid .s-12 { grid-column: span 12; }

.grid .s-row-1  { grid-row: span 1; }
.grid .s-row-2  { grid-row: span 2; }
.grid .s-row-3  { grid-row: span 3; }
.grid .s-row-4  { grid-row: span 4; }
.grid .s-row-5  { grid-row: span 5; }
.grid .s-row-6  { grid-row: span 6; }
.grid .s-row-7  { grid-row: span 7; }
.grid .s-row-8  { grid-row: span 8; }
.grid .s-row-9  { grid-row: span 9; }
.grid .s-row-10 { grid-row: span 10; }
.grid .s-row-11 { grid-row: span 11; }
.grid .s-row-12 { grid-row: span 12; }

.s-order-1    { order: -1; }
.s-order-2    { order: 2; }
.s-order-3    { order: 3; }
.s-order-4    { order: 4; }
.s-order-5    { order: 5; }
.s-order-6    { order: 6; }
.s-order-7    { order: 7; }
.s-order-8    { order: 8; }
.s-order-9    { order: 9; }
.s-order-10   { order: 10; }
.s-order-11   { order: 11; }
.s-order-12   { order: 12; }
.s-order-last { order: 99999999; }

.s-offset-1    { margin-left: calc(1/12  * 100%); }
.s-offset-2    { margin-left: calc(2/12  * 100%); }
.s-offset-3    { margin-left: calc(3/12  * 100%); }
.s-offset-4    { margin-left: calc(4/12  * 100%); }
.s-offset-5    { margin-left: calc(5/12  * 100%); }
.s-offset-6    { margin-left: calc(6/12  * 100%); }
.s-offset-7    { margin-left: calc(7/12  * 100%); }
.s-offset-8    { margin-left: calc(8/12  * 100%); }
.s-offset-9    { margin-left: calc(9/12  * 100%); }
.s-offset-10   { margin-left: calc(10/12 * 100%); }
.s-offset-11   { margin-left: calc(11/12 * 100%); }
.s-offset-12   { margin-left: 100%; }
.s-offset-five { margin-left: 20%; }

.hide-s { display: none !important; }


/* ============================================================
   4. XS - da 580px
   ============================================================ */

@media screen and (min-width: 580px) {

  .grid .xs-1  { grid-column: span 1; }
  .grid .xs-2  { grid-column: span 2; }
  .grid .xs-3  { grid-column: span 3; }
  .grid .xs-4  { grid-column: span 4; }
  .grid .xs-5  { grid-column: span 5; }
  .grid .xs-6  { grid-column: span 6; }
  .grid .xs-7  { grid-column: span 7; }
  .grid .xs-8  { grid-column: span 8; }
  .grid .xs-9  { grid-column: span 9; }
  .grid .xs-10 { grid-column: span 10; }
  .grid .xs-11 { grid-column: span 11; }
  .grid .xs-12 { grid-column: span 12; }

  .grid .xs-row-1  { grid-row: span 1; }
  .grid .xs-row-2  { grid-row: span 2; }
  .grid .xs-row-3  { grid-row: span 3; }
  .grid .xs-row-4  { grid-row: span 4; }
  .grid .xs-row-5  { grid-row: span 5; }
  .grid .xs-row-6  { grid-row: span 6; }
  .grid .xs-row-7  { grid-row: span 7; }
  .grid .xs-row-8  { grid-row: span 8; }
  .grid .xs-row-9  { grid-row: span 9; }
  .grid .xs-row-10 { grid-row: span 10; }
  .grid .xs-row-11 { grid-row: span 11; }
  .grid .xs-row-12 { grid-row: span 12; }

  .xs-order-1    { order: -1; }
  .xs-order-2    { order: 2; }
  .xs-order-3    { order: 3; }
  .xs-order-4    { order: 4; }
  .xs-order-5    { order: 5; }
  .xs-order-6    { order: 6; }
  .xs-order-7    { order: 7; }
  .xs-order-8    { order: 8; }
  .xs-order-9    { order: 9; }
  .xs-order-10   { order: 10; }
  .xs-order-11   { order: 11; }
  .xs-order-12   { order: 12; }
  .xs-order-last { order: 99999999; }

  .xs-offset-1    { margin-left: calc(1/12  * 100%); }
  .xs-offset-2    { margin-left: calc(2/12  * 100%); }
  .xs-offset-3    { margin-left: calc(3/12  * 100%); }
  .xs-offset-4    { margin-left: calc(4/12  * 100%); }
  .xs-offset-5    { margin-left: calc(5/12  * 100%); }
  .xs-offset-6    { margin-left: calc(6/12  * 100%); }
  .xs-offset-7    { margin-left: calc(7/12  * 100%); }
  .xs-offset-8    { margin-left: calc(8/12  * 100%); }
  .xs-offset-9    { margin-left: calc(9/12  * 100%); }
  .xs-offset-10   { margin-left: calc(10/12 * 100%); }
  .xs-offset-11   { margin-left: calc(11/12 * 100%); }
  .xs-offset-12   { margin-left: 100%; }

  .hide-xs { display: none !important; }
}


/* ============================================================
   5. T - da 900px
   ============================================================ */

@media screen and (min-width: 900px) {

  .grid .t-1  { grid-column: span 1; }
  .grid .t-2  { grid-column: span 2; }
  .grid .t-3  { grid-column: span 3; }
  .grid .t-4  { grid-column: span 4; }
  .grid .t-5  { grid-column: span 5; }
  .grid .t-6  { grid-column: span 6; }
  .grid .t-7  { grid-column: span 7; }
  .grid .t-8  { grid-column: span 8; }
  .grid .t-9  { grid-column: span 9; }
  .grid .t-10 { grid-column: span 10; }
  .grid .t-11 { grid-column: span 11; }
  .grid .t-12 { grid-column: span 12; }

  .grid .t-row-1  { grid-row: span 1; }
  .grid .t-row-2  { grid-row: span 2; }
  .grid .t-row-3  { grid-row: span 3; }
  .grid .t-row-4  { grid-row: span 4; }
  .grid .t-row-5  { grid-row: span 5; }
  .grid .t-row-6  { grid-row: span 6; }
  .grid .t-row-7  { grid-row: span 7; }
  .grid .t-row-8  { grid-row: span 8; }
  .grid .t-row-9  { grid-row: span 9; }
  .grid .t-row-10 { grid-row: span 10; }
  .grid .t-row-11 { grid-row: span 11; }
  .grid .t-row-12 { grid-row: span 12; }

  .t-order-1    { order: -1; }
  .t-order-2    { order: 2; }
  .t-order-3    { order: 3; }
  .t-order-4    { order: 4; }
  .t-order-5    { order: 5; }
  .t-order-6    { order: 6; }
  .t-order-7    { order: 7; }
  .t-order-8    { order: 8; }
  .t-order-9    { order: 9; }
  .t-order-10   { order: 10; }
  .t-order-11   { order: 11; }
  .t-order-12   { order: 12; }
  .t-order-last { order: 99999999; }

  .t-offset-1    { margin-left: calc(1/12  * 100%); }
  .t-offset-2    { margin-left: calc(2/12  * 100%); }
  .t-offset-3    { margin-left: calc(3/12  * 100%); }
  .t-offset-4    { margin-left: calc(4/12  * 100%); }
  .t-offset-5    { margin-left: calc(5/12  * 100%); }
  .t-offset-6    { margin-left: calc(6/12  * 100%); }
  .t-offset-7    { margin-left: calc(7/12  * 100%); }
  .t-offset-8    { margin-left: calc(8/12  * 100%); }
  .t-offset-9    { margin-left: calc(9/12  * 100%); }
  .t-offset-10   { margin-left: calc(10/12 * 100%); }
  .t-offset-11   { margin-left: calc(11/12 * 100%); }
  .t-offset-12   { margin-left: 100%; }

  .hide-t { display: none !important; }
}


/* ============================================================
   6. M - da 1024px
   ============================================================ */

@media screen and (min-width: 1024px) {

  .grid .m-1  { grid-column: span 1; }
  .grid .m-2  { grid-column: span 2; }
  .grid .m-3  { grid-column: span 3; }
  .grid .m-4  { grid-column: span 4; }
  .grid .m-5  { grid-column: span 5; }
  .grid .m-6  { grid-column: span 6; }
  .grid .m-7  { grid-column: span 7; }
  .grid .m-8  { grid-column: span 8; }
  .grid .m-9  { grid-column: span 9; }
  .grid .m-10 { grid-column: span 10; }
  .grid .m-11 { grid-column: span 11; }
  .grid .m-12 { grid-column: span 12; }

  .grid .m-row-1  { grid-row: span 1; }
  .grid .m-row-2  { grid-row: span 2; }
  .grid .m-row-3  { grid-row: span 3; }
  .grid .m-row-4  { grid-row: span 4; }
  .grid .m-row-5  { grid-row: span 5; }
  .grid .m-row-6  { grid-row: span 6; }
  .grid .m-row-7  { grid-row: span 7; }
  .grid .m-row-8  { grid-row: span 8; }
  .grid .m-row-9  { grid-row: span 9; }
  .grid .m-row-10 { grid-row: span 10; }
  .grid .m-row-11 { grid-row: span 11; }
  .grid .m-row-12 { grid-row: span 12; }

  .m-order-1    { order: -1; }
  .m-order-2    { order: 2; }
  .m-order-3    { order: 3; }
  .m-order-4    { order: 4; }
  .m-order-5    { order: 5; }
  .m-order-6    { order: 6; }
  .m-order-7    { order: 7; }
  .m-order-8    { order: 8; }
  .m-order-9    { order: 9; }
  .m-order-10   { order: 10; }
  .m-order-11   { order: 11; }
  .m-order-12   { order: 12; }
  .m-order-last { order: 99999999; }

  .m-offset-1    { margin-left: calc(1/12  * 100%); }
  .m-offset-2    { margin-left: calc(2/12  * 100%); }
  .m-offset-3    { margin-left: calc(3/12  * 100%); }
  .m-offset-4    { margin-left: calc(4/12  * 100%); }
  .m-offset-5    { margin-left: calc(5/12  * 100%); }
  .m-offset-6    { margin-left: calc(6/12  * 100%); }
  .m-offset-7    { margin-left: calc(7/12  * 100%); }
  .m-offset-8    { margin-left: calc(8/12  * 100%); }
  .m-offset-9    { margin-left: calc(9/12  * 100%); }
  .m-offset-10   { margin-left: calc(10/12 * 100%); }
  .m-offset-11   { margin-left: calc(11/12 * 100%); }
  .m-offset-12   { margin-left: 100%; }
  .m-offset-five { margin-left: 20%; }

  .hide-m { display: none !important; }
}


/* ============================================================
   7. L - da 1360px
   ============================================================ */

@media screen and (min-width: 1360px) {

  .grid .l-1  { grid-column: span 1; }
  .grid .l-2  { grid-column: span 2; }
  .grid .l-3  { grid-column: span 3; }
  .grid .l-4  { grid-column: span 4; }
  .grid .l-5  { grid-column: span 5; }
  .grid .l-6  { grid-column: span 6; }
  .grid .l-7  { grid-column: span 7; }
  .grid .l-8  { grid-column: span 8; }
  .grid .l-9  { grid-column: span 9; }
  .grid .l-10 { grid-column: span 10; }
  .grid .l-11 { grid-column: span 11; }
  .grid .l-12 { grid-column: span 12; }

  .grid .l-row-1  { grid-row: span 1; }
  .grid .l-row-2  { grid-row: span 2; }
  .grid .l-row-3  { grid-row: span 3; }
  .grid .l-row-4  { grid-row: span 4; }
  .grid .l-row-5  { grid-row: span 5; }
  .grid .l-row-6  { grid-row: span 6; }
  .grid .l-row-7  { grid-row: span 7; }
  .grid .l-row-8  { grid-row: span 8; }
  .grid .l-row-9  { grid-row: span 9; }
  .grid .l-row-10 { grid-row: span 10; }
  .grid .l-row-11 { grid-row: span 11; }
  .grid .l-row-12 { grid-row: span 12; }

  .l-order-1    { order: -1; }
  .l-order-2    { order: 2; }
  .l-order-3    { order: 3; }
  .l-order-4    { order: 4; }
  .l-order-5    { order: 5; }
  .l-order-6    { order: 6; }
  .l-order-7    { order: 7; }
  .l-order-8    { order: 8; }
  .l-order-9    { order: 9; }
  .l-order-10   { order: 10; }
  .l-order-11   { order: 11; }
  .l-order-12   { order: 12; }
  .l-order-last { order: 99999999; }

  .l-offset-1    { margin-left: calc(1/12  * 100%); }
  .l-offset-2    { margin-left: calc(2/12  * 100%); }
  .l-offset-3    { margin-left: calc(3/12  * 100%); }
  .l-offset-4    { margin-left: calc(4/12  * 100%); }
  .l-offset-5    { margin-left: calc(5/12  * 100%); }
  .l-offset-6    { margin-left: calc(6/12  * 100%); }
  .l-offset-7    { margin-left: calc(7/12  * 100%); }
  .l-offset-8    { margin-left: calc(8/12  * 100%); }
  .l-offset-9    { margin-left: calc(9/12  * 100%); }
  .l-offset-10   { margin-left: calc(10/12 * 100%); }
  .l-offset-11   { margin-left: calc(11/12 * 100%); }
  .l-offset-12   { margin-left: 100%; }
  .l-offset-five { margin-left: 20%; }

  .hide-l { display: none !important; }
}


/* ============================================================
   8. XL - da 1600px
   ============================================================ */

@media screen and (min-width: 1600px) {

  .grid .xl-1  { grid-column: span 1; }
  .grid .xl-2  { grid-column: span 2; }
  .grid .xl-3  { grid-column: span 3; }
  .grid .xl-4  { grid-column: span 4; }
  .grid .xl-5  { grid-column: span 5; }
  .grid .xl-6  { grid-column: span 6; }
  .grid .xl-7  { grid-column: span 7; }
  .grid .xl-8  { grid-column: span 8; }
  .grid .xl-9  { grid-column: span 9; }
  .grid .xl-10 { grid-column: span 10; }
  .grid .xl-11 { grid-column: span 11; }
  .grid .xl-12 { grid-column: span 12; }

  .grid .xl-row-1  { grid-row: span 1; }
  .grid .xl-row-2  { grid-row: span 2; }
  .grid .xl-row-3  { grid-row: span 3; }
  .grid .xl-row-4  { grid-row: span 4; }
  .grid .xl-row-5  { grid-row: span 5; }
  .grid .xl-row-6  { grid-row: span 6; }
  .grid .xl-row-7  { grid-row: span 7; }
  .grid .xl-row-8  { grid-row: span 8; }
  .grid .xl-row-9  { grid-row: span 9; }
  .grid .xl-row-10 { grid-row: span 10; }
  .grid .xl-row-11 { grid-row: span 11; }
  .grid .xl-row-12 { grid-row: span 12; }

  .xl-order-1    { order: -1; }
  .xl-order-2    { order: 2; }
  .xl-order-3    { order: 3; }
  .xl-order-4    { order: 4; }
  .xl-order-5    { order: 5; }
  .xl-order-6    { order: 6; }
  .xl-order-7    { order: 7; }
  .xl-order-8    { order: 8; }
  .xl-order-9    { order: 9; }
  .xl-order-10   { order: 10; }
  .xl-order-11   { order: 11; }
  .xl-order-12   { order: 12; }
  .xl-order-last { order: 99999999; }

  .xl-offset-1    { margin-left: calc(1/12  * 100%); }
  .xl-offset-2    { margin-left: calc(2/12  * 100%); }
  .xl-offset-3    { margin-left: calc(3/12  * 100%); }
  .xl-offset-4    { margin-left: calc(4/12  * 100%); }
  .xl-offset-5    { margin-left: calc(5/12  * 100%); }
  .xl-offset-6    { margin-left: calc(6/12  * 100%); }
  .xl-offset-7    { margin-left: calc(7/12  * 100%); }
  .xl-offset-8    { margin-left: calc(8/12  * 100%); }
  .xl-offset-9    { margin-left: calc(9/12  * 100%); }
  .xl-offset-10   { margin-left: calc(10/12 * 100%); }
  .xl-offset-11   { margin-left: calc(11/12 * 100%); }
  .xl-offset-12   { margin-left: 100%; }
  .xl-offset-five { margin-left: 20%; }

  .hide-xl { display: none !important; }
}


/* ============================================================
   9. XXL - da 1920px
   ============================================================ */

@media screen and (min-width: 1920px) {

  .grid .xxl-1  { grid-column: span 1; }
  .grid .xxl-2  { grid-column: span 2; }
  .grid .xxl-3  { grid-column: span 3; }
  .grid .xxl-4  { grid-column: span 4; }
  .grid .xxl-5  { grid-column: span 5; }
  .grid .xxl-6  { grid-column: span 6; }
  .grid .xxl-7  { grid-column: span 7; }
  .grid .xxl-8  { grid-column: span 8; }
  .grid .xxl-9  { grid-column: span 9; }
  .grid .xxl-10 { grid-column: span 10; }
  .grid .xxl-11 { grid-column: span 11; }
  .grid .xxl-12 { grid-column: span 12; }

  .grid .xxl-row-1  { grid-row: span 1; }
  .grid .xxl-row-2  { grid-row: span 2; }
  .grid .xxl-row-3  { grid-row: span 3; }
  .grid .xxl-row-4  { grid-row: span 4; }
  .grid .xxl-row-5  { grid-row: span 5; }
  .grid .xxl-row-6  { grid-row: span 6; }
  .grid .xxl-row-7  { grid-row: span 7; }
  .grid .xxl-row-8  { grid-row: span 8; }
  .grid .xxl-row-9  { grid-row: span 9; }
  .grid .xxl-row-10 { grid-row: span 10; }
  .grid .xxl-row-11 { grid-row: span 11; }
  .grid .xxl-row-12 { grid-row: span 12; }

  .xxl-order-1    { order: -1; }
  .xxl-order-2    { order: 2; }
  .xxl-order-3    { order: 3; }
  .xxl-order-4    { order: 4; }
  .xxl-order-5    { order: 5; }
  .xxl-order-6    { order: 6; }
  .xxl-order-7    { order: 7; }
  .xxl-order-8    { order: 8; }
  .xxl-order-9    { order: 9; }
  .xxl-order-10   { order: 10; }
  .xxl-order-11   { order: 11; }
  .xxl-order-12   { order: 12; }
  .xxl-order-last { order: 99999999; }

  .xxl-offset-1    { margin-left: calc(1/12  * 100%); }
  .xxl-offset-2    { margin-left: calc(2/12  * 100%); }
  .xxl-offset-3    { margin-left: calc(3/12  * 100%); }
  .xxl-offset-4    { margin-left: calc(4/12  * 100%); }
  .xxl-offset-5    { margin-left: calc(5/12  * 100%); }
  .xxl-offset-6    { margin-left: calc(6/12  * 100%); }
  .xxl-offset-7    { margin-left: calc(7/12  * 100%); }
  .xxl-offset-8    { margin-left: calc(8/12  * 100%); }
  .xxl-offset-9    { margin-left: calc(9/12  * 100%); }
  .xxl-offset-10   { margin-left: calc(10/12 * 100%); }
  .xxl-offset-11   { margin-left: calc(11/12 * 100%); }
  .xxl-offset-12   { margin-left: 100%; }
  .xxl-offset-five { margin-left: 20%; }

  .hide-xxl { display: none !important; }
}


/* ============================================================
   10. CINQUE COLONNE (helper per template esistenti)
   ============================================================ */

@media screen and (min-width: 1024px) {
  .grid.has-l-cinque { grid-template-columns: repeat(5, 1fr); }
  .grid.has-l-cinque .l-cinque { grid-column: span 1; }
}
@media screen and (min-width: 1360px) {
  .grid.has-xl-cinque { grid-template-columns: repeat(5, 1fr); }
  .grid.has-xl-cinque .xl-cinque { grid-column: span 1; }
}
@media screen and (min-width: 1920px) {
  .grid.has-xxl-cinque { grid-template-columns: repeat(5, 1fr); }
  .grid.has-xxl-cinque .xxl-cinque { grid-column: span 1; }
}