/**
 * MontaVis Unified Design System
 * Main entry point for the design system that imports all components
 */

/* Import all design system components */
@import url('colors.css');
@import url('typography.css');
@import url('backgrounds.css');
@import url('spacing.css');
@import url('shared-components.css');

/* General site-wide styles */
html, body {
  font-family: var(--montavis-font-family);
  background-color: var(--color-background);
  color: var(--color-text);
}

/* Reset section background colors to use the design system */
section {
  background-color: var(--color-background);
  color: var(--color-text);
  position: relative;
  z-index: 1;
}

/* Section transitions */
.section-transition {
  position: relative;
  height: 40px;
  z-index: 1;
  background: linear-gradient(to bottom, var(--color-background) 0%, var(--color-background-alt) 100%);
}

/* Grid-based section transition */
.grid-section-transition {
  position: relative;
  height: 100px;
  z-index: 2;
  margin-top: -100px; /* Overlap with previous section */
  overflow: hidden;
}

.grid-section-transition img {
  width: 100%;
  height: auto;
  display: block;
}

/* Make sure sections with grid transitions have proper positioning */
.has-grid-transition {
  position: relative;
  z-index: 1;
  padding-bottom: 100px; /* Extra space to accommodate the transition */
}

/* Continuous background for sections with grid connection */
.grid-continues {
  position: relative;
  margin-top: -20px; /* Slight overlap for seamless transition */
  z-index: 1;
}

/* Responsive adjustments for section transitions */
@media (max-width: 1200px) {
  .section-transition {
    height: 30px;
  }
  
  .grid-section-transition {
    height: 80px;
    margin-top: -80px;
  }
  
  .has-grid-transition {
    padding-bottom: 80px;
  }
}

@media (max-width: 768px) {
  .section-transition {
    height: 20px;
  }
  
  .grid-section-transition {
    height: 60px;
    margin-top: -60px;
  }
  
  .has-grid-transition {
    padding-bottom: 60px;
  }
}

@media (max-width: 576px) {
  .section-transition {
    height: 15px;
  }
  
  .grid-section-transition {
    height: 40px;
    margin-top: -40px;
  }
  
  .has-grid-transition {
    padding-bottom: 40px;
  }
}