/**
 * CTT Design System - Layout Utility Classes
 * Layout utility classes for flexbox, grid, and positioning
 * 
 * Usage:
 * <div class="ctt-flex ctt-flex-col ctt-gap-4">Flex column with gap</div>
 * <div class="ctt-flex ctt-items-center ctt-justify-between">Flex row with alignment</div>
 */

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

.ctt-block {
  display: block !important;
}
.ctt-inline-block {
  display: inline-block !important;
}
.ctt-inline {
  display: inline !important;
}
.ctt-flex {
  display: flex !important;
}
.ctt-inline-flex {
  display: inline-flex !important;
}
.ctt-grid {
  display: grid !important;
}
.ctt-inline-grid {
  display: inline-grid !important;
}
.ctt-hidden {
  display: none !important;
}

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

.ctt-flex-row {
  flex-direction: row !important;
}
.ctt-flex-row-reverse {
  flex-direction: row-reverse !important;
}
.ctt-flex-col {
  flex-direction: column !important;
}
.ctt-flex-col-reverse {
  flex-direction: column-reverse !important;
}

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

.ctt-flex-wrap {
  flex-wrap: wrap !important;
}
.ctt-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.ctt-flex-nowrap {
  flex-wrap: nowrap !important;
}

/* ==========================================================================
   FLEX GROW/SHRINK/BASIS UTILITIES
   ========================================================================== */

.ctt-flex-1 {
  flex: 1 1 0% !important;
}
.ctt-flex-auto {
  flex: 1 1 auto !important;
}
.ctt-flex-initial {
  flex: 0 1 auto !important;
}
.ctt-flex-none {
  flex: none !important;
}

.ctt-flex-grow {
  flex-grow: 1 !important;
}
.ctt-flex-grow-0 {
  flex-grow: 0 !important;
}

.ctt-flex-shrink {
  flex-shrink: 1 !important;
}
.ctt-flex-shrink-0 {
  flex-shrink: 0 !important;
}

/* ==========================================================================
   ALIGN ITEMS UTILITIES
   ========================================================================== */

.ctt-items-start {
  align-items: flex-start !important;
}
.ctt-items-end {
  align-items: flex-end !important;
}
.ctt-items-center {
  align-items: center !important;
}
.ctt-items-baseline {
  align-items: baseline !important;
}
.ctt-items-stretch {
  align-items: stretch !important;
}

/* ==========================================================================
   ALIGN CONTENT UTILITIES
   ========================================================================== */

.ctt-content-center {
  align-content: center !important;
}
.ctt-content-start {
  align-content: flex-start !important;
}
.ctt-content-end {
  align-content: flex-end !important;
}
.ctt-content-between {
  align-content: space-between !important;
}
.ctt-content-around {
  align-content: space-around !important;
}
.ctt-content-evenly {
  align-content: space-evenly !important;
}

/* ==========================================================================
   ALIGN SELF UTILITIES
   ========================================================================== */

.ctt-self-auto {
  align-self: auto !important;
}
.ctt-self-start {
  align-self: flex-start !important;
}
.ctt-self-end {
  align-self: flex-end !important;
}
.ctt-self-center {
  align-self: center !important;
}
.ctt-self-stretch {
  align-self: stretch !important;
}
.ctt-self-baseline {
  align-self: baseline !important;
}

/* ==========================================================================
   JUSTIFY CONTENT UTILITIES
   ========================================================================== */

.ctt-justify-start {
  justify-content: flex-start !important;
}
.ctt-justify-end {
  justify-content: flex-end !important;
}
.ctt-justify-center {
  justify-content: center !important;
}
.ctt-justify-between {
  justify-content: space-between !important;
}
.ctt-justify-around {
  justify-content: space-around !important;
}
.ctt-justify-evenly {
  justify-content: space-evenly !important;
}

/* ==========================================================================
   JUSTIFY ITEMS UTILITIES
   ========================================================================== */

.ctt-justify-items-start {
  justify-items: start !important;
}
.ctt-justify-items-end {
  justify-items: end !important;
}
.ctt-justify-items-center {
  justify-items: center !important;
}
.ctt-justify-items-stretch {
  justify-items: stretch !important;
}

/* ==========================================================================
   JUSTIFY SELF UTILITIES
   ========================================================================== */

.ctt-justify-self-auto {
  justify-self: auto !important;
}
.ctt-justify-self-start {
  justify-self: start !important;
}
.ctt-justify-self-end {
  justify-self: end !important;
}
.ctt-justify-self-center {
  justify-self: center !important;
}
.ctt-justify-self-stretch {
  justify-self: stretch !important;
}

/* ==========================================================================
   GAP UTILITIES (for flexbox and grid)
   ========================================================================== */

.ctt-gap-0 {
  gap: var(--ctt-core-space-0) !important;
}
.ctt-gap-1 {
  gap: var(--ctt-core-space-1) !important;
} /* 4px */
.ctt-gap-2 {
  gap: var(--ctt-core-space-2) !important;
} /* 8px */
.ctt-gap-3 {
  gap: var(--ctt-core-space-3) !important;
} /* 12px */
.ctt-gap-4 {
  gap: var(--ctt-core-space-4) !important;
} /* 16px */
.ctt-gap-6 {
  gap: var(--ctt-core-space-6) !important;
} /* 24px */
.ctt-gap-8 {
  gap: var(--ctt-core-space-8) !important;
} /* 32px */
.ctt-gap-10 {
  gap: var(--ctt-core-space-10) !important;
} /* 40px */
.ctt-gap-12 {
  gap: var(--ctt-core-space-12) !important;
} /* 48px */
.ctt-gap-16 {
  gap: var(--ctt-core-space-16) !important;
} /* 64px */
.ctt-gap-20 {
  gap: var(--ctt-core-space-20) !important;
} /* 80px */

/* Row gap utilities */
.ctt-gap-y-0 {
  row-gap: var(--ctt-core-space-0) !important;
}
.ctt-gap-y-1 {
  row-gap: var(--ctt-core-space-1) !important;
}
.ctt-gap-y-2 {
  row-gap: var(--ctt-core-space-2) !important;
}
.ctt-gap-y-3 {
  row-gap: var(--ctt-core-space-3) !important;
}
.ctt-gap-y-4 {
  row-gap: var(--ctt-core-space-4) !important;
}
.ctt-gap-y-6 {
  row-gap: var(--ctt-core-space-6) !important;
}
.ctt-gap-y-8 {
  row-gap: var(--ctt-core-space-8) !important;
}
.ctt-gap-y-10 {
  row-gap: var(--ctt-core-space-10) !important;
}
.ctt-gap-y-12 {
  row-gap: var(--ctt-core-space-12) !important;
}
.ctt-gap-y-16 {
  row-gap: var(--ctt-core-space-16) !important;
}
.ctt-gap-y-20 {
  row-gap: var(--ctt-core-space-20) !important;
}

/* Column gap utilities */
.ctt-gap-x-0 {
  column-gap: var(--ctt-core-space-0) !important;
}
.ctt-gap-x-1 {
  column-gap: var(--ctt-core-space-1) !important;
}
.ctt-gap-x-2 {
  column-gap: var(--ctt-core-space-2) !important;
}
.ctt-gap-x-3 {
  column-gap: var(--ctt-core-space-3) !important;
}
.ctt-gap-x-4 {
  column-gap: var(--ctt-core-space-4) !important;
}
.ctt-gap-x-6 {
  column-gap: var(--ctt-core-space-6) !important;
}
.ctt-gap-x-8 {
  column-gap: var(--ctt-core-space-8) !important;
}
.ctt-gap-x-10 {
  column-gap: var(--ctt-core-space-10) !important;
}
.ctt-gap-x-12 {
  column-gap: var(--ctt-core-space-12) !important;
}
.ctt-gap-x-16 {
  column-gap: var(--ctt-core-space-16) !important;
}
.ctt-gap-x-20 {
  column-gap: var(--ctt-core-space-20) !important;
}

/* ==========================================================================
   GRID COLUMN UTILITIES
   ========================================================================== */
.ctt-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.ctt-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ctt-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ctt-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* ==========================================================================
   WIDTH AND HEIGHT UTILITIES
   ========================================================================== */

.ctt-w-auto {
  width: auto !important;
}
.ctt-w-full {
  width: 100% !important;
}
.ctt-w-screen {
  width: 100vw !important;
}
.ctt-w-min {
  width: min-content !important;
}
.ctt-w-max {
  width: max-content !important;
}
.ctt-w-fit {
  width: fit-content !important;
}

.ctt-h-auto {
  height: auto !important;
}
.ctt-h-full {
  height: 100% !important;
}
.ctt-h-screen {
  height: 100vh !important;
}
.ctt-h-min {
  height: min-content !important;
}
.ctt-h-max {
  height: max-content !important;
}
.ctt-h-fit {
  height: fit-content !important;
}

/* ==========================================================================
   MIN/MAX WIDTH AND HEIGHT UTILITIES
   ========================================================================== */

.ctt-min-w-0 {
  min-width: 0 !important;
}
.ctt-min-w-full {
  min-width: 100% !important;
}
.ctt-min-w-min {
  min-width: min-content !important;
}
.ctt-min-w-max {
  min-width: max-content !important;
}
.ctt-min-w-fit {
  min-width: fit-content !important;
}

.ctt-max-w-none {
  max-width: none !important;
}
.ctt-max-w-full {
  max-width: 100% !important;
}
.ctt-max-w-min {
  max-width: min-content !important;
}
.ctt-max-w-max {
  max-width: max-content !important;
}
.ctt-max-w-fit {
  max-width: fit-content !important;
}
.ctt-max-w-xs {
  max-width: 320px !important;
}
.ctt-max-w-sm {
  max-width: 384px !important;
}
.ctt-max-w-md {
  max-width: 448px !important;
}
.ctt-max-w-lg {
  max-width: 512px !important;
}
.ctt-max-w-xl {
  max-width: 576px !important;
}
.ctt-max-w-2xl {
  max-width: 672px !important;
}
.ctt-max-w-3xl {
  max-width: 768px !important;
}
.ctt-max-w-4xl {
  max-width: 896px !important;
}
.ctt-max-w-5xl {
  max-width: 1024px !important;
}
.ctt-max-w-6xl {
  max-width: 1152px !important;
}
.ctt-max-w-7xl {
  max-width: 1280px !important;
}

.ctt-min-h-0 {
  min-height: 0 !important;
}
.ctt-min-h-full {
  min-height: 100% !important;
}
.ctt-min-h-screen {
  min-height: 100vh !important;
}

.ctt-max-h-full {
  max-height: 100% !important;
}
.ctt-max-h-screen {
  max-height: 100vh !important;
}

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

.ctt-static {
  position: static !important;
}
.ctt-fixed {
  position: fixed !important;
}
.ctt-absolute {
  position: absolute !important;
}
.ctt-relative {
  position: relative !important;
}
.ctt-sticky {
  position: sticky !important;
}

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

.ctt-overflow-auto {
  overflow: auto !important;
}
.ctt-overflow-hidden {
  overflow: hidden !important;
}
.ctt-overflow-clip {
  overflow: clip !important;
}
.ctt-overflow-visible {
  overflow: visible !important;
}
.ctt-overflow-scroll {
  overflow: scroll !important;
}

.ctt-overflow-x-auto {
  overflow-x: auto !important;
}
.ctt-overflow-x-hidden {
  overflow-x: hidden !important;
}
.ctt-overflow-x-clip {
  overflow-x: clip !important;
}
.ctt-overflow-x-visible {
  overflow-x: visible !important;
}
.ctt-overflow-x-scroll {
  overflow-x: scroll !important;
}

.ctt-overflow-y-auto {
  overflow-y: auto !important;
}
.ctt-overflow-y-hidden {
  overflow-y: hidden !important;
}
.ctt-overflow-y-clip {
  overflow-y: clip !important;
}
.ctt-overflow-y-visible {
  overflow-y: visible !important;
}
.ctt-overflow-y-scroll {
  overflow-y: scroll !important;
}