/*
 * Layout System
 * Containers, grids, and responsive layout utilities
 */

/* ===================================
   CONTAINER SYSTEM
   ================================= */

/* Standard container */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Narrow container for focused content */
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Wide container for expansive layouts */
.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Full-width container */
.container-full {
  width: 100%;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ===================================
   GRID SYSTEM
   CSS Grid for modern layouts
   ================================= */

/* Basic grid with responsive columns */
.grid {
  display: grid;
  gap: var(--space-6);
}

/* Grid column variations */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Auto-fit grid (responsive without media queries) */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-6);
}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-6);
}

/* Gap variations */
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* ===================================
   FLEXBOX UTILITIES
   ================================= */

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

/* Flex direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Flex wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align content */
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }

/* Flex grow/shrink */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

/* ===================================
   SECTION LAYOUTS
   ================================= */

.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  position: relative;
}

.section-sm {
  padding-top: calc(var(--section-padding-y) * 0.5);
  padding-bottom: calc(var(--section-padding-y) * 0.5);
}

.section-lg {
  padding-top: calc(var(--section-padding-y) * 1.5);
  padding-bottom: calc(var(--section-padding-y) * 1.5);
}

/* ===================================
   TWO-COLUMN LAYOUTS
   ================================= */

.two-col {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

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

  .two-col-asymmetric {
    grid-template-columns: 1.5fr 1fr;
  }

  .two-col-reverse {
    grid-template-columns: repeat(2, 1fr);
  }

  .two-col-reverse > *:first-child {
    order: 2;
  }

  .two-col-reverse > *:last-child {
    order: 1;
  }
}

/* ===================================
   RESPONSIVE GRID (Mobile-First)
   ================================= */

/* Mobile: 1 column */
@media (min-width: 640px) {
  .grid-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .grid-md-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-md-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-md-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-lg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===================================
   CARD GRID
   Specialized grid for card layouts
   ================================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--space-8);
}

/* ===================================
   ASPECT RATIO BOXES
   ================================= */

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-portrait {
  aspect-ratio: 3 / 4;
}

.aspect-landscape {
  aspect-ratio: 4 / 3;
}

/* ===================================
   SPACING UTILITIES
   ================================= */

/* Margin top */
.mt-0 { margin-top: var(--space-0); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

/* Margin bottom */
.mb-0 { margin-bottom: var(--space-0); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* Padding */
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* ===================================
   POSITION UTILITIES
   ================================= */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ===================================
   OVERFLOW UTILITIES
   ================================= */

.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-auto { overflow: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* ===================================
   DISPLAY UTILITIES
   ================================= */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

/* Responsive display */
@media (max-width: 767px) {
  .hide-mobile { display: none; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none; }
  .show-mobile { display: none; }
}

/* ===================================
   WIDTH & HEIGHT UTILITIES
   ================================= */

.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.min-h-screen { min-height: 100vh; }