/* === GRID 12 COLONNE (mobile-first) === */
:root{
  --gutter: 15px;
  --col-1: 8.3333%;
  --col-2: 16.6666%;
  --col-3: 25%;
  --col-4: 33.3333%;
  --col-5: 41.6666%;
  --col-6: 50%;
  --col-7: 58.3333%;
  --col-8: 66.6666%;
  --col-9: 75%;
  --col-10: 83.3333%;
  --col-11: 91.6666%;
  --col-12: 100%;
}

/* Container */
.container{
  max-width:1400px;
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* Row */
.row{
  display:flex;
  flex-wrap:wrap;
  margin-left:calc(var(--gutter) * -1);
  margin-right:calc(var(--gutter) * -1);
}

/* Colonne: fallback mobile = 100% */
[class*="col-"]{
  box-sizing:border-box;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  flex:0 0 100%;
  max-width:100%;
}

/* ===== XS (<576px) — opzionale: specifiche */
.col-xs-1  { flex-basis:var(--col-1);  max-width:var(--col-1); }
.col-xs-2  { flex-basis:var(--col-2);  max-width:var(--col-2); }
.col-xs-3  { flex-basis:var(--col-3);  max-width:var(--col-3); }
.col-xs-4  { flex-basis:var(--col-4);  max-width:var(--col-4); }
.col-xs-5  { flex-basis:var(--col-5);  max-width:var(--col-5); }
.col-xs-6  { flex-basis:var(--col-6);  max-width:var(--col-6); }
.col-xs-7  { flex-basis:var(--col-7);  max-width:var(--col-7); }
.col-xs-8  { flex-basis:var(--col-8);  max-width:var(--col-8); }
.col-xs-9  { flex-basis:var(--col-9);  max-width:var(--col-9); }
.col-xs-10 { flex-basis:var(--col-10); max-width:var(--col-10); }
.col-xs-11 { flex-basis:var(--col-11); max-width:var(--col-11); }
.col-xs-12 { flex-basis:var(--col-12); max-width:var(--col-12); }

/* ===== SM (≥576px) */
@media (min-width:576px){
  .col-sm-1  { flex-basis:var(--col-1);  max-width:var(--col-1); }
  .col-sm-2  { flex-basis:var(--col-2);  max-width:var(--col-2); }
  .col-sm-3  { flex-basis:var(--col-3);  max-width:var(--col-3); }
  .col-sm-4  { flex-basis:var(--col-4);  max-width:var(--col-4); }
  .col-sm-5  { flex-basis:var(--col-5);  max-width:var(--col-5); }
  .col-sm-6  { flex-basis:var(--col-6);  max-width:var(--col-6); }
  .col-sm-7  { flex-basis:var(--col-7);  max-width:var(--col-7); }
  .col-sm-8  { flex-basis:var(--col-8);  max-width:var(--col-8); }
  .col-sm-9  { flex-basis:var(--col-9);  max-width:var(--col-9); }
  .col-sm-10 { flex-basis:var(--col-10); max-width:var(--col-10); }
  .col-sm-11 { flex-basis:var(--col-11); max-width:var(--col-11); }
  .col-sm-12 { flex-basis:var(--col-12); max-width:var(--col-12); }
}

/* ===== MD (≥768px) */
@media (min-width:768px){
  .col-md-1  { flex-basis:var(--col-1);  max-width:var(--col-1); }
  .col-md-2  { flex-basis:var(--col-2);  max-width:var(--col-2); }
  .col-md-3  { flex-basis:var(--col-3);  max-width:var(--col-3); }
  .col-md-4  { flex-basis:var(--col-4);  max-width:var(--col-4); }
  .col-md-5  { flex-basis:var(--col-5);  max-width:var(--col-5); }
  .col-md-6  { flex-basis:var(--col-6);  max-width:var(--col-6); }
  .col-md-7  { flex-basis:var(--col-7);  max-width:var(--col-7); }
  .col-md-8  { flex-basis:var(--col-8);  max-width:var(--col-8); }
  .col-md-9  { flex-basis:var(--col-9);  max-width:var(--col-9); }
  .col-md-10 { flex-basis:var(--col-10); max-width:var(--col-10); }
  .col-md-11 { flex-basis:var(--col-11); max-width:var(--col-11); }
  .col-md-12 { flex-basis:var(--col-12); max-width:var(--col-12); }
}

/* ===== LG (≥1024px) */
@media (min-width:1024px){
  .col-lg-1  { flex-basis:var(--col-1);  max-width:var(--col-1); }
  .col-lg-2  { flex-basis:var(--col-2);  max-width:var(--col-2); }
  .col-lg-3  { flex-basis:var(--col-3);  max-width:var(--col-3); }
  .col-lg-4  { flex-basis:var(--col-4);  max-width:var(--col-4); }
  .col-lg-5  { flex-basis:var(--col-5);  max-width:var(--col-5); }
  .col-lg-6  { flex-basis:var(--col-6);  max-width:var(--col-6); }
  .col-lg-7  { flex-basis:var(--col-7);  max-width:var(--col-7); }
  .col-lg-8  { flex-basis:var(--col-8);  max-width:var(--col-8); }
  .col-lg-9  { flex-basis:var(--col-9);  max-width:var(--col-9); }
  .col-lg-10 { flex-basis:var(--col-10); max-width:var(--col-10); }
  .col-lg-11 { flex-basis:var(--col-11); max-width:var(--col-11); }
  .col-lg-12 { flex-basis:var(--col-12); max-width:var(--col-12); }
}

/* ===== XL (≥1200px) */
@media (min-width:1200px){
  .col-xl-1  { flex-basis:var(--col-1);  max-width:var(--col-1); }
  .col-xl-2  { flex-basis:var(--col-2);  max-width:var(--col-2); }
  .col-xl-3  { flex-basis:var(--col-3);  max-width:var(--col-3); }
  .col-xl-4  { flex-basis:var(--col-4);  max-width:var(--col-4); }
  .col-xl-5  { flex-basis:var(--col-5);  max-width:var(--col-5); }
  .col-xl-6  { flex-basis:var(--col-6);  max-width:var(--col-6); }
  .col-xl-7  { flex-basis:var(--col-7);  max-width:var(--col-7); }
  .col-xl-8  { flex-basis:var(--col-8);  max-width:var(--col-8); }
  .col-xl-9  { flex-basis:var(--col-9);  max-width:var(--col-9); }
  .col-xl-10 { flex-basis:var(--col-10); max-width:var(--col-10); }
  .col-xl-11 { flex-basis:var(--col-11); max-width:var(--col-11); }
  .col-xl-12 { flex-basis:var(--col-12); max-width:var(--col-12); }
}

/* Utility opzionali */
.no-gutter .row{ margin-left:0; margin-right:0; }
.no-gutter [class*="col-"]{ padding-left:0; padding-right:0; }
.col-auto { flex:0 0 auto; max-width:none; }       /* larghezza in base al contenuto */
.col      { flex:1 1 0;  min-width:0; }            /* colonna fluida che riempie lo spazio */