/* Layout CSS - Grid, Flex, Spacing, Responsive */

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container--wide {
  max-width: 1400px;
}

.container--narrow {
  max-width: 800px;
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex--column {
  flex-direction: column;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

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

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

.flex--wrap {
  flex-wrap: wrap;
}

.flex--gap-sm {
  gap: var(--space-sm);
}

.flex--gap-md {
  gap: var(--space-md);
}

.flex--gap-lg {
  gap: var(--space-lg);
}

/* Spacing Utilities */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }

.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }

.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }

/* Section Spacing */
.section {
  padding: var(--space-3xl) 0;
}

.section--sm {
  padding: var(--space-2xl) 0;
}

.section--lg {
  padding: var(--space-3xl) 0 var(--space-3xl);
}

/* Responsive Breakpoints */
/* Mobile First Approach */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    padding: 0 var(--space-lg);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .grid--md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--md-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .flex--md-row {
    flex-direction: row;
  }
  
  .flex--md-column {
    flex-direction: column;
  }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
  .grid--lg-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid--lg-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .flex--lg-row {
    flex-direction: row;
  }
  
  .flex--lg-column {
    flex-direction: column;
  }
}

/* Extra large devices (large desktops, 1440px and up) */
@media (min-width: 1440px) {
  .container {
    padding: 0 var(--space-xl);
  }
}

/* RTL Specific Layout Adjustments */
[dir="rtl"] .flex--between {
  flex-direction: row-reverse;
}

[dir="rtl"] .grid {
  direction: rtl;
}

[dir="rtl"] .grid > * {
  direction: ltr;
}

/* Visibility Utilities */
.hidden {
  display: none;
}

.visible {
  display: block;
}

@media (max-width: 767px) {
  .hidden-mobile {
    display: none;
  }
}

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

/* Overflow */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

/* Position */
.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;
}

/* Aspect Ratio */
.aspect-square {
  aspect-ratio: 1 / 1;
}

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

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