/* ==========================================================================
   LAYOUT & SPACING SYSTEM
   Consistent spacing and container widths across the site
   ========================================================================== */

/* CSS Variables for Design Tokens */
:root {
  /* Spacing Scale - Mobile First */
  --space-xs: 1rem;    /* 16px - Tight spacing */
  --space-sm: 2rem;    /* 32px - Small spacing */
  --space-md: 4rem;    /* 64px - Medium spacing */
  --space-lg: 6rem;    /* 96px - Large spacing */
  --space-xl: 8rem;    /* 128px - Extra large spacing */
  
  /* Container widths */
  --container-sm: 750px;
  --container-md: 970px;
  --container-lg: 1500px;
  
  /* Breakpoints (for reference in comments) */
  /* Mobile: < 768px */
  /* Tablet: 768px - 1023px */
  /* Desktop: 1024px - 1199px */
  /* Large Desktop: >= 1200px */
}

/* ==========================================================================
   UNIFIED SECTION SPACING
   Replace scattered .even-block-space, .extra-height, .special-height
   ========================================================================== */

/* Primary spacing class for section gaps */
.section-spacing {
  margin-bottom: var(--space-sm);
}

/* md breakpoint (768px) - Tablet and above */
@media (min-width: 768px) {
  .section-spacing {
    margin-bottom: var(--space-md);
  }
}

/* Extra spacing for special sections (e.g., before footer) */
.section-spacing-xl {
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .section-spacing-xl {
    margin-bottom: var(--space-md);
  }
}

/* Compact spacing for tightly coupled sections */
.section-spacing-sm {
  margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
  .section-spacing-sm {
    margin-bottom: var(--space-sm);
  }
}

/* ==========================================================================
   MAIN CONTAINER
   Centralized container styles (from home_page.html)
   ========================================================================== */

.main-container {
  background-color: #ffffff; 
  margin: 0 auto; 
  padding: 0 auto; 
  max-width: 100%; 
}

@media (max-width: 768px) {
  .main-container {
    margin: 0 1rem;
  }
}

@media (min-width: 768px) {
  .main-container {
    max-width: var(--container-sm); 
    margin: auto 1rem;
  }
}

@media (min-width: 1024px) {
  .main-container {
    max-width: var(--container-md); 
    margin: auto;
  }
}

@media (min-width: 1200px) {
  .main-container {
    max-width: var(--container-lg); 
    padding: 0 4rem; 
    margin: auto;
  }
}

/* ==========================================================================
   DEPRECATED CLASSES (kept for backwards compatibility - will be removed)
   Use .section-spacing instead
   ========================================================================== */

/* These will be removed after template refactoring */
.even-block-space {
  height: 3rem;
}

@media (min-width: 768px) {
  .even-block-space {
    height: 4rem;
  }
}

@media (min-width: 1024px) {
  .even-block-space {
    height: 6rem;
  }
}

.extra-height {
  height: 5rem !important;
}

.special-height {
  height: 3rem;
}

@media (min-width: 1025px) {
  .special-height {
    height: 6rem;
  }
}

@media (min-width: 1200px) {
  .special-height {
    height: 8rem;
  }
}

.extra-games-height {
  height: 2rem;
}

/* ==========================================================================
   UTILITY SPACING CLASSES
   ========================================================================== */

.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); }

.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); }

.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); }