/**
 * AG Automation - Layout System
 * Page structure, containers, and responsive utilities
 */

/* ============================================
   PAGE LAYOUT
   ============================================ */

/**
 * Grid-based page structure
 * Ensures footer stays at bottom with flexible content area
 */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 100%);
  min-height: 100vh;
  width: 100%;
}

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

/**
 * Centered content container with responsive padding
 * Max-width ensures optimal reading length
 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-lg);
  }
}

/* ============================================
   GRID UTILITY
   ============================================ */

/**
 * Responsive grid system (mobile-first)
 * 1 column on mobile, 2 on tablet, 3 on desktop
 */
.grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

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

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

/* ============================================
   SECTION PADDING
   ============================================ */

/**
 * Consistent vertical spacing for page sections
 * Increases on larger screens
 */
.section {
  padding: var(--space-xl) 0;
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-2xl) 0;
  }
}