/* =============================================================================
   6. RESPONSIVE DESIGN - Mobile-First Approach
   ============================================================================= */

/* Mobile Styles (Base) */
@media (max-width: 767px) {
  :root {
    --font-size-4xl: 3.157rem; /* Scale down hero on mobile */
    --font-size-3xl: 2.369rem;
    --font-size-2xl: 2rem; /* Scale down metrics on mobile */
    --space-16: 4rem; /* Reduce large spacing */
    --space-12: 3rem;
  }
  
  /* Prevent horizontal overflow on mobile while allowing vertical scroll */
  html {
    overflow-x: hidden;
    overflow-y: auto !important;
    width: 100%;
    height: auto !important;
  }
  
  body {
    overflow-x: hidden;
    overflow-y: auto !important;
    width: 100%;
    height: auto !important;
    position: relative;
  }
  
  /* Ensure main content scrolls properly */
  main {
    overflow: visible !important;
    height: auto !important;
  }
  
  .container {
    padding: 0 var(--space-3);
  }
  
  /* Fix hero section scrolling on mobile */
  .section--hero {
    min-height: auto !important; /* Remove viewport height constraint */
    height: auto !important;
    padding: var(--space-6) 0; /* Reduce padding */
    display: block !important; /* Remove flex on mobile */
    overflow: visible !important;
  }
  
  .hero {
    overflow: visible !important;
    position: relative;
    height: auto !important;
    min-height: auto !important;
  }
  
  .hero__content {
    overflow: hidden;
    z-index: 1;
    height: auto !important;
    min-height: auto !important;
  }
  
  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 0 var(--space-2);
  }
  
  .hero__actions .btn {
    width: 100%;
    max-width: 300px;
  }
  
  .hero__actions .btn--large {
    padding: var(--space-3) var(--space-4);
    min-height: 48px;
    font-size: var(--font-size-sm);
  }
  
  .hero__title {
    font-size: var(--font-size-2xl) !important;
    line-height: 1.2;
    margin-bottom: var(--space-3);
  }
  
  .hero__subtitle {
    font-size: var(--font-size-md) !important;
    line-height: 1.4;
    margin-bottom: var(--space-4);
  }
  
  .about__content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-4);
  }
  
  .about__image {
    justify-self: center;
  }
  
  .nav__links {
    display: none; /* Mobile nav would need hamburger menu */
  }
  
  /* Nav brand mobile adjustments moved to more specific section below */
  
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
  
  .metrics__grid {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .metric {
    min-width: 200px;
    max-width: 100%;
  }
  
  .metric__value {
    font-size: var(--font-size-xl);
  }
  
  .metric__label {
    font-size: var(--font-size-xs);
  }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .metrics__grid {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .metric {
    min-width: 220px;
    max-width: 280px;
    flex: 0 1 calc(50% - var(--space-2));
  }
}

/* Ensure hero section maintains flex display on desktop */
@media (min-width: 768px) {
  .section--hero {
    display: flex;
  }
}