/* Box sizing - modern */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Grid container */
.grid {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  overflow: visible; /* float är borta, overflow behövs ej */
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.grid-large {
  width: 100%;
  max-width: 4000px;
  margin: 0 auto;
  overflow: visible;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.grid-pad.no-pad {
  padding-left: 0;
}

.grid-pad {
  padding-left: 10px;
  padding-right: 10px;
}




/* .grid::after { ... } */

/* Column base styles */
[class*='col-'] {
  /* Ta bort float */
  /* float: left; */
  display: block; /* behåll block */
  box-sizing: border-box;
  min-height: 1px;

  /* Flexbox för kolumner */
  flex-grow: 0;
  flex-shrink: 0;
  /* Bredd styrs via flex-basis nedan */
}

/* Push-right */
.push-right {
  /* float: right; */
  margin-left: auto; /* pushar elementet längst till höger */
}

/* Content Columns */
/* Behåll dina ursprungliga procentbredder som flex-basis och max-width */
.col-1-1 { flex-basis: 100%; max-width: 100%; }
.col-2-3, .col-8-12 { flex-basis: 66.66%; max-width: 66.66%; }
.col-1-2, .col-6-12 { flex-basis: 50%; max-width: 50%; }
.col-1-3, .col-4-12 { flex-basis: 33.33%; max-width: 33.33%; }
.col-1-4, .col-3-12 { flex-basis: 25%; max-width: 25%; }
.col-1-5 { flex-basis: 20%; max-width: 20%; }
.col-1-6, .col-2-12 { flex-basis: 16.667%; max-width: 16.667%; }
.col-1-7 { flex-basis: 14.28%; max-width: 14.28%; }
.col-1-8 { flex-basis: 12.5%; max-width: 12.5%; }
.col-1-9 { flex-basis: 11.1%; max-width: 11.1%; }
.col-1-10 { flex-basis: 10%; max-width: 10%; }
.col-1-11 { flex-basis: 9.09%; max-width: 9.09%; }
.col-1-12 { flex-basis: 8.33%; max-width: 8.33%; }

/* Layout Columns */
.col-11-12 { flex-basis: 91.66%; max-width: 91.66%; }
.col-10-12 { flex-basis: 83.333%; max-width: 83.333%; }
.col-9-12 { flex-basis: 75%; max-width: 75%; }
.col-5-12 { flex-basis: 41.66%; max-width: 41.66%; }
.col-7-12 { flex-basis: 58.33%; max-width: 58.33%; }

/* Push (margin-left) classes */
.push-2-3, .push-8-12 { margin-left: 66.66%; }
.push-1-2, .push-6-12 { margin-left: 50%; }
.push-1-3, .push-4-12 { margin-left: 33.33%; }
.push-1-4, .push-3-12 { margin-left: 25%; }
.push-1-5 { margin-left: 20%; }
.push-1-6, .push-2-12 { margin-left: 16.667%; }
.push-1-7 { margin-left: 14.28%; }
.push-1-8 { margin-left: 12.5%; }
.push-1-9 { margin-left: 11.1%; }
.push-1-10 { margin-left: 10%; }
.push-1-11 { margin-left: 9.09%; }
.push-1-12 { margin-left: 8.33%; }

/* Display helpers */
.desktop { display: block; }
.mobil { display: none; }

/* Responsive Mobile */
@media only screen and (max-width: 768px) {
  
  .push-right {
    margin-left: 0; /* float none -> margin reset */
  }

  .desktop {
    display: none;
  }

  .mobil {
    display: block;
  }

  .grid {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    display: block; /* från flex till block för enklare stacking på mobil */
  }
  
  /* Reset col classes för mobil */
  [class*='col-'] {
    flex-basis: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
  }


  /* Mobile Layout columns - behåll som float om du vill */
  [class*='mobile-col-'] {
    float: left;
    margin: 0 0 10px 0;
    padding-left: 0;
    padding-right: 10px;
  }

  .mobile-col-1-1 { width: 100%; }
  .mobile-col-2-3, .mobile-col-8-12 { width: 66.66%; }
  .mobile-col-1-2, .mobile-col-6-12 { width: 50%; }
  .mobile-col-1-3, .mobile-col-4-12 { width: 33.33%; }
  .mobile-col-1-4, .mobile-col-3-12 { width: 25%; }
  .mobile-col-1-5 { width: 20%; }
  .mobile-col-1-6, .mobile-col-2-12 { width: 16.667%; }
  .mobile-col-1-7 { width: 14.28%; }
  .mobile-col-1-8 { width: 12.5%; }
  .mobile-col-1-9 { width: 11.1%; }
  .mobile-col-1-10 { width: 10%; }
  .mobile-col-1-11 { width: 9.09%; }
  .mobile-col-1-12 { width: 8.33%; }

  /* Layout columns */
  .mobile-col-11-12 { width: 91.66%; }
  .mobile-col-10-12 { width: 83.333%; }
  .mobile-col-9-12 { width: 75%; }
  .mobile-col-5-12 { width: 41.66%; }
  .mobile-col-7-12 { width: 58.33%; }

}