/* Container layout - prevent overflow */
.container {
  width: 100%;
  max-width: 100vw;
  margin-right: auto;
  margin-left: auto;
  padding-right: clamp(1rem, 4vw, 2rem);
  padding-left: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}

@media (min-width: 481px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 769px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1025px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1281px) {
  .container {
    max-width: var(--container-xl);
  }
}
@media (min-width: 1537px) {
  .container {
    max-width: var(--container-2xl);
  }
}

/* Fluid Grid System */
.grid {
  display: grid;
  gap: var(--space-16);
  width: 100%;
}

/* Auto-fit grids with minimum sizes */
.grid-auto-xs { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-auto-md { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
.grid-auto-xl { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

/* Mobile-first responsive grid columns */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
.grid-5 { grid-template-columns: 1fr; }
.grid-6 { grid-template-columns: 1fr; }

/* Small screens: 481px+ */
@media (min-width: 481px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}

/* Medium screens: 769px+ */
@media (min-width: 769px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-6 { grid-template-columns: repeat(4, 1fr); }
}

/* Large screens: 1025px+ */
@media (min-width: 1025px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Grid gaps */
.gap-xs { gap: var(--space-8); }
.gap-sm { gap: var(--space-12); }
.gap-md { gap: var(--space-16); }
.gap-lg { gap: var(--space-20); }
.gap-xl { gap: var(--space-24); }
.gap-2xl { gap: var(--space-32); }

/* Column spans */
.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-full { grid-column: 1 / -1; }

/* Row spans */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-4 { grid-row: span 4; }

/* Grid placement */
.place-items-center { place-items: center; }
.place-items-start { place-items: start; }
.place-items-end { place-items: end; }
.place-content-center { place-content: center; }
.place-content-start { place-content: start; }
.place-content-end { place-content: end; }

/* Fluid Flexbox System */
.flex-fluid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.flex-fluid > * {
  flex: 1 1 200px;
  min-width: 0;
}

/* Responsive flex directions */
.flex-mobile-col {
  flex-direction: column;
}

@media (min-width: 481px) {
  .flex-mobile-col {
    flex-direction: row;
  }
}

/* Flex sizing utilities */
.flex-none { flex: none; }
.flex-auto { flex: 1 1 auto; }
.flex-1 { flex: 1 1 0%; }
.flex-2 { flex: 2 1 0%; }
.flex-3 { flex: 3 1 0%; }

/* Responsive width utilities for grid items */
.w-full { width: 100%; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }

/* Mobile-only: 0-480px */
@media (max-width: 480px) {
  .w-1\/2, .w-1\/3, .w-2\/3, .w-1\/4, .w-3\/4 {
    width: 100%;
  }
}

/* CSS Grid Layout Templates */
.layout-sidebar {
  display: grid;
  gap: var(--space-16);
  grid-template-areas: 
    "main"
    "sidebar";
}

@media (min-width: 769px) {
  .layout-sidebar {
    grid-template-columns: 1fr 300px;
    grid-template-areas: 
      "main sidebar";
  }
}

.layout-header-main {
  display: grid;
  gap: var(--space-16);
  grid-template-areas:
    "header"
    "main";
  min-height: 100vh;
}

@media (min-width: 769px) {
  .layout-header-main {
    grid-template-rows: auto 1fr;
  }
}

.layout-dashboard {
  display: grid;
  gap: var(--space-16);
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 769px) {
  .layout-dashboard {
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "sidebar header"
      "sidebar main"
      "sidebar footer";
  }
}

@media (min-width: 1025px) {
  .layout-dashboard {
    grid-template-columns: 250px 1fr 300px;
    grid-template-areas:
      "sidebar header header"
      "sidebar main aside"
      "sidebar footer footer";
  }
}

/* Grid area utilities */
.area-header { grid-area: header; }
.area-main { grid-area: main; }
.area-sidebar { grid-area: sidebar; }
.area-aside { grid-area: aside; }
.area-footer { grid-area: footer; }

/* Responsive Grid Classes - Mobile First */
.grid-responsive-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

@media (min-width: 481px) {
  .grid-responsive-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-responsive-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

@media (min-width: 481px) {
  .grid-responsive-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 769px) {
  .grid-responsive-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-responsive-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

@media (min-width: 481px) {
  .grid-responsive-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .grid-responsive-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Responsive Auto-Fit Grids */
.grid-auto-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-16);
}

@media (max-width: 480px) {
  .grid-auto-responsive {
    grid-template-columns: 1fr;
  }
}