/**
 * OnePixel Website - Grid System
 * 12-column responsive grid with breakpoints: SM, MD, LG, Desktop, XL, XXL
 *
 * Breakpoints:
 * - SM: ≤767px (4 columns, percentage-based)
 * - MD: 768px - 991px (12 columns, 42px each, 724px container)
 * - LG: 992px - 1199px (12 columns, 58px each, 960px container)
 * - Desktop: 1200px - 1439px (12 columns, 70px each, 1170px container)
 * - XL: 1440px - 1919px (12 columns, 110px each, 1320px container)
 * - XXL: ≥1920px (12 columns, 140px each, 1680px container)
 */

/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
  /* Breakpoints */
  --breakpoint-sm: 360px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-desktop: 1200px;
  --breakpoint-xl: 1440px;
  --breakpoint-xxl: 1920px;

  /* Container Widths */
  --container-sm: 100%;
  --container-md: 724px;
  --container-lg: 960px;
  --container-desktop: 1170px;
  --container-xl: 1320px;
  --container-xxl: 1680px;

  /* Column Widths */
  --column-sm: 25%;        /* 4-column grid, percentage-based */
  --column-md: 42px;       /* 12-column grid */
  --column-lg: 58px;       /* 12-column grid */
  --column-desktop: 70px;  /* 12-column grid */
  --column-xl: 110px;      /* 12-column grid */
  --column-xxl: 140px;     /* 12-column grid */

  /* Gutters (space between columns) */
  --gutter-sm: 16px;
  --gutter-md: 20px;
  --gutter-lg: 24px;
  --gutter-desktop: 30px;
  --gutter-xl: 30px;
  --gutter-xxl: 30px;

  /* Outer Padding (left/right container padding) */
  --padding-sm: 16px;
  --padding-md: 0px;
  --padding-lg: 0px;
  --padding-desktop: 0px;
  --padding-xl: 0px;
  --padding-xxl: 0px;

  /* Total Columns */
  --columns-sm: 4;
  --columns-md: 12;
  --columns-lg: 12;
  --columns-desktop: 12;
  --columns-xl: 12;
  --columns-xxl: 12;
}

/* ============================================
   BASE CONTAINER
   ============================================ */
.container {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ============================================
   GRID ROW
   ============================================ */
.row {
  display: grid;
  width: 100%;
  box-sizing: border-box;
}

/* ============================================
   SM - MOBILE (≤767px)
   4 columns, percentage-based
   ============================================ */
@media (min-width: 360px) {
  .container {
    max-width: var(--container-sm);
    padding: 0 var(--padding-sm);
  }

  .row {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter-sm);
  }

  /* Column Spans - Percentage Based */
  .col-sm-1 { grid-column: span 1; }  /* 25% */
  .col-sm-2 { grid-column: span 2; }  /* 50% */
  .col-sm-3 { grid-column: span 3; }  /* 75% */
  .col-sm-4 { grid-column: span 4; }  /* 100% */
}

/* ============================================
   MD - TABLET (768px - 991px)
   12 columns, 42px each, 724px container
   ============================================ */
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
    padding: 0 var(--padding-md);
  }

  .row {
    grid-template-columns: repeat(12, var(--column-md));
    gap: var(--gutter-md);
  }

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

/* ============================================
   LG - DESKTOP SMALL (992px - 1199px)
   12 columns, 58px each, 960px container
   ============================================ */
@media (min-width: 992px) {
  .container {
    max-width: var(--container-lg);
    padding: 0 var(--padding-lg);
  }

  .row {
    grid-template-columns: repeat(12, var(--column-lg));
    gap: var(--gutter-lg);
  }

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

/* ============================================
   DESKTOP - LARGE DESKTOP (1200px - 1439px)
   12 columns, 70px each, 1170px container
   ============================================ */
@media (min-width: 1200px) {
  .container {
    max-width: var(--container-desktop);
    padding: 0 var(--padding-desktop);
  }

  .row {
    grid-template-columns: repeat(12, var(--column-desktop));
    gap: var(--gutter-desktop);
  }

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

/* ============================================
   XL - EXTRA LARGE (1440px - 1919px)
   12 columns, 110px each, 1320px container
   ============================================ */
@media (min-width: 1440px) {
  .container {
    max-width: var(--container-xl);
    padding: 0 var(--padding-xl);
  }

  .row {
    grid-template-columns: repeat(12, var(--column-xl));
    gap: var(--gutter-xl);
  }

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

/* ============================================
   XXL - ULTRA WIDE (≥1920px)
   12 columns, 140px each, 1680px container
   ============================================ */
@media (min-width: 1920px) {
  .container {
    max-width: var(--container-xxl);
    padding: 0 var(--padding-xxl);
  }

  .row {
    grid-template-columns: repeat(12, var(--column-xxl));
    gap: var(--gutter-xxl);
  }

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

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Reset box-sizing for all elements */
* {
  box-sizing: border-box;
}

/* Hide on specific breakpoints */
.hide-sm { display: none; }
@media (min-width: 768px) { .hide-sm { display: block; } }

@media (min-width: 768px) { .hide-md { display: none; } }
@media (min-width: 992px) { .hide-md { display: block; } }

@media (min-width: 992px) { .hide-lg { display: none; } }
@media (min-width: 1200px) { .hide-lg { display: block; } }

@media (min-width: 1200px) { .hide-desktop { display: none; } }
@media (min-width: 1440px) { .hide-desktop { display: block; } }

@media (min-width: 1440px) { .hide-xl { display: none; } }
@media (min-width: 1920px) { .hide-xl { display: block; } }

@media (min-width: 1920px) { .hide-xxl { display: none; } }