/* MOBILE FIRST MEDIA QUERIES */

/* Small Devices (Landscape Phones & Small Tablets) — 640px+ */
@media (min-width: 640px) {
  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Medium Devices (Tablets) — 768px+ */
@media (max-width: 767px) {
  .utility-bar {
    display: none;
  }
  
  .main-nav {
    display: none;
  }
  
  .menu-toggle {
    display: block;
  }
  
  .site-header .btn-primary {
    display: none !important; /* Hide CTA button on small headers to save space */
  }
  
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-buttons .btn {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .split-layout {
    display: flex;
    align-items: center;
    gap: var(--space-12);
  }
  
  .split-left {
    flex: 1.2;
  }
  
  .split-right {
    flex: 0.8;
  }
}

/* Large Devices (Desktops) — 1024px+ */
@media (min-width: 1024px) {
  .card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .footer-columns {
    grid-template-columns: 2fr 1fr 1.2fr 1.8fr;
  }
  
  /* Hero Split Layout */
  .hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80vh;
  }
  
  /* Section Rhythm spacing */
  section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

/* Extra Large Devices — 1280px+ */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}