/* css/layout.css – Grid, Sections, Spacing (Structure Only) */

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

/* Base Layout Sections */
section {
  padding: var(--space-lg) var(--space-md); /* Mobile: 32px top/bottom, 24px sides */
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  section {
    padding: var(--space-xxl) var(--space-xl); /* 64px top/bottom, 48px sides on desktop */
  }
}

/* Responsive grid stacking */
@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* Flex & Grid Helpers (Mobile-First) */
.flex { display: flex; flex-direction: column; gap: var(--space-md); }
.grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }

/* Desktop Flex & Grid Styles */
@media (min-width: 768px) {
  .flex { flex-direction: row; align-items: center; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Utility Layout Classes */
.text-center { text-align: center; }
.relative { position: relative; }
.hidden { display: none; }
.v-stack { display: flex; flex-direction: column; }
.h-stack { display: flex; flex-direction: row; align-items: center; }

/* Mobile-First: Stack horizontally on mobile for small gaps, vertically for wider layouts */
@media (max-width: 767px) {
  .h-stack {
    flex-direction: column;
    width: 100%;
  }
  
  .h-stack .btn {
    width: 100%;
    min-width: unset;
  }
}

/* Vertical Spacing Classes */
.py-xs { padding: var(--space-xs) 0; }
.py-sm { padding: var(--space-sm) 0; }
.py-md { padding: var(--space-md) 0; }
.py-lg { padding: var(--space-lg) 0; }
.py-xl { padding: var(--space-xl) 0; }
.py-xxl { padding: var(--space-xxl) 0; }

/* Full Height Utility */
.h-full { height: 100%; }
.vh-100 { min-height: 100vh; }

/* Layout-Specific Spacing */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* Spacing Helpers */
.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-xxl { margin-bottom: var(--space-xxl); }

/* Mobile-specific layout improvements */
@media (max-width: 767px) {
  /* Better spacing for mobile */
  .py-xl { padding: var(--space-lg) 0; }
  .py-xxl { padding: var(--space-xl) 0; }
  
  /* Images with aspect ratio should maintain proportions on mobile */
  [style*="aspect-ratio"] {
    width: 100%;
    height: auto;
  }
  
  /* Stack form grids on mobile */
  .form-group .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Improve text readability on mobile */
  h1 {
    font-size: clamp(1.5rem, 6vw, 3.5rem);
  }
  
  h2 {
    font-size: clamp(1.25rem, 5vw, 2.5rem);
  }
}