/* ============================================
   Layout System - Grid, Flexbox & Containers
   ============================================ */

/* ========== Container System ========== */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .container { 
    max-width: var(--container-sm);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 768px) {
  .container { 
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .container { 
    max-width: var(--container-lg);
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .container { 
    max-width: var(--container-xl);
  }
}

@media (min-width: 1536px) {
  .container { 
    max-width: var(--container-2xl);
  }
}

/* ========== Section Spacing ========== */

section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

@media (min-width: 1024px) {
  section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

/* ========== Grid System ========== */

.grid {
  display: grid;
  gap: var(--space-6);
}

.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)); 
}

/* Responsive Grid */
@media (min-width: 640px) {
  .sm\:grid-cols-1 { 
    grid-template-columns: repeat(1, minmax(0, 1fr)); 
  }
  
  .sm\:grid-cols-2 { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
  
  .sm\:grid-cols-3 { 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
  }
}

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

/* Grid Gap Utilities */
.gap-2 { gap: var(--space-2); }
.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; 
}

/* Align Items */
.items-start { 
  align-items: flex-start; 
}

.items-center { 
  align-items: center; 
}

.items-end { 
  align-items: flex-end; 
}

.items-baseline { 
  align-items: baseline; 
}

.items-stretch { 
  align-items: stretch; 
}

/* Justify Content */
.justify-start { 
  justify-content: flex-start; 
}

.justify-center { 
  justify-content: center; 
}

.justify-end { 
  justify-content: flex-end; 
}

.justify-between { 
  justify-content: space-between; 
}

.justify-around { 
  justify-content: space-around; 
}

.justify-evenly { 
  justify-content: space-evenly; 
}

/* Flex Grow & Shrink */
.flex-1 { 
  flex: 1 1 0%; 
}

.flex-auto { 
  flex: 1 1 auto; 
}

.flex-none { 
  flex: none; 
}

/* ========== Position Utilities ========== */

.relative { 
  position: relative; 
}

.absolute { 
  position: absolute; 
}

.fixed { 
  position: fixed; 
}

.sticky { 
  position: sticky; 
}

/* ========== Width & Height ========== */

.w-full { 
  width: 100%; 
}

.h-full { 
  height: 100%; 
}

.min-h-screen { 
  min-height: 100vh; 
}

/* ========== Overflow ========== */

.overflow-hidden { 
  overflow: hidden; 
}

.overflow-auto { 
  overflow: auto; 
}

.overflow-x-auto { 
  overflow-x: auto; 
}

.overflow-y-auto { 
  overflow-y: auto; 
}

/* ========== Common Layout Patterns ========== */

/* Centered Content */
.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stack Layout */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Cluster Layout */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Sidebar Layout */
.sidebar-layout {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .sidebar-layout {
    grid-template-columns: 250px 1fr;
  }
}

/* Split Layout */
.split {
  display: grid;
  gap: var(--space-8);
}

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

/* ========== Aspect Ratio ========== */

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

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

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

/* ========== Object Fit ========== */

.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

/* ========== Responsive Utilities ========== */

/* Hide on Mobile */
@media (max-width: 639px) {
  .hide-mobile {
    display: none;
  }
}

/* Hide on Desktop */
@media (min-width: 1024px) {
  .hide-desktop {
    display: none;
  }
}

/* Show on Mobile Only */
.show-mobile {
  display: block;
}

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

/* Show on Desktop Only */
.show-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .show-desktop {
    display: block;
  }
}