/**
 * Breakpoints:
 * - Mobile: < 768px (default, mobile-first)
 * - Tablet: 768px - 1023px
 * - Desktop: >= 1024px
 */

/* Mobile: Single column by default */
.services-grid,
.differentiators {
  grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .differentiators {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .differentiators {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  :root {
    --container-padding: var(--spacing-sm);
  }

  section {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }

  /* Adjust logo size for mobile while keeping navbar compact */
  .site-logo a {
    font-size: var(--font-size-lg);
    padding: var(--spacing-xs) var(--spacing-md);
  }

  .site-logo .logo-image {
    height: 50px;
  }

  .site-logo {
    margin: -0.25rem 0;
  }

  .header-container {
    min-height: 50px;
  }
}