/* 12-Column Grid System - Everything Cloud */

/* Main Layout: 12 columns with gutters */
:root {
  --column-width: 134px;
  --gutter-width: 24px;
  --grid-columns: 12;
  --max-width: calc((var(--column-width) * var(--grid-columns)) + (var(--gutter-width) * (var(--grid-columns) - 1)));
  --viewport-margin: 40px;
}

/* Dynamic column width based on viewport */
@media screen and (min-width: 1920px) {
  :root {
    --column-width: min(134px, calc((100vw - (var(--viewport-margin) * 2) - (var(--gutter-width) * 11)) / 12));
  }
}

@media screen and (max-width: 1919px) and (min-width: 1025px) {
  :root {
    --column-width: calc((100vw - (var(--viewport-margin) * 2) - (var(--gutter-width) * 11)) / 12);
  }
}

/* Grid Container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, var(--column-width));
  gap: var(--gutter-width);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

/* Grid Item Utilities */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Column Start Positions */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

/* Responsive Breakpoints */

/* Update viewport margin for different screen sizes */
@media screen and (max-width: 1400px) {
  :root {
    --viewport-margin: 30px;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --viewport-margin: 20px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --viewport-margin: 15px;
  }
}

/* Tablet: 8 columns */
@media screen and (max-width: 1024px) {
  :root {
    --grid-columns: 8;
  }
  
  .grid-container {
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
  }
  
  /* Adjust spans for tablet */
  .col-span-9,
  .col-span-10,
  .col-span-11,
  .col-span-12 {
    grid-column: span 8;
  }
}

/* Mobile: Single column */
@media screen and (max-width: 768px) {
  :root {
    --grid-columns: 1;
  }
  
  .grid-container {
    grid-template-columns: 1fr;
    width: 100%;
  }
  
  [class*="col-span-"],
  [class*="col-start-"] {
    grid-column: 1;
  }
}

/* Full-width utility */
.full-width {
  grid-column: 1 / -1;
}