/**
 * AMARI INDUSTRIES — RESPONSIVE DESIGN SPECIFICATIONS
 * Breakpoints: Mobile (320px-767px), Tablet (768px-1024px), Desktop (1025px-1440px)
 */

@media (max-width: 767px) {
  /* Prevent any horizontal scroll */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  .container {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }

  /* Single Column Grids on Mobile */
  .grid-mobile-1 {
    grid-template-columns: 1fr !important;
  }

  /* Touch Targets 44px min */
  button, .btn, a.nav-link, input, select {
    min-height: 44px;
  }

  .card-img-wrap {
    height: 180px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* 2 Columns on Tablet */
  .grid-tablet-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1025px) {
  /* 3 Columns for Products, 4 for Services */
  .grid-desktop-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-desktop-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}