/**
 * LB DataWorks Layout System
 * Grid, containers, and responsive utilities
 */

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

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

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

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

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

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

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

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

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

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

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

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

/* ============================================
 * Responsive Breakpoints
 *
 * Mobile:  < 640px
 * Tablet:  640px - 1024px
 * Desktop: 1024px+
 * ============================================ */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --section-padding-y: 4rem;
    --section-padding-y-sm: 3rem;
  }

  h1 {
    font-size: var(--font-size-4xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

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

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

  .container {
    padding-inline: var(--space-5);
  }
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --section-padding-y: 3rem;
    --section-padding-y-sm: 2rem;
  }

  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-xl);
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .container {
    padding-inline: var(--space-4);
  }
}

/* ============================================
 * Specific Layouts
 * ============================================ */

/* Centered narrow content */
.content--centered {
  text-align: center;
}

.content--centered > * {
  margin-inline: auto;
}

/* Two column layout */
.layout--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (max-width: 768px) {
  .layout--split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* Sticky element */
.sticky {
  position: sticky;
  top: var(--space-4);
}

/* Full height */
.full-height {
  min-height: 100vh;
}

/* Vertical centering */
.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}