/* ==========================================================================
   Universal Fun App Engine - Responsive Breakpoints (min-width: 320px)
   ========================================================================== */

/* Mobile First Base Rules (< 640px) */
@media (max-width: 639px) {
  .card-container {
    padding: 1.25rem;
    border-radius: var(--radius-sm);
  }

  .site-header {
    padding: 0.6rem 0.75rem;
  }

  .header-container {
    gap: 0.5rem;
  }

  .brand-link {
    font-size: 1rem;
    gap: 0.35rem;
  }

  .brand-icon {
    font-size: 1.25rem;
  }

  .site-nav {
    gap: 0.25rem;
  }

  .site-nav-link {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    gap: 0.2rem;
  }

  .main-content {
    padding: 1rem 0.75rem;
  }

  .homepage-content {
    padding: 1rem 0.75rem;
  }

  .apps-grid {
    grid-template-columns: 1fr;
  }

  .toast-container {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }

  .btn {
    width: 100%;
  }
}

/* Tablet & Up (>= 640px) */
@media (min-width: 640px) {
  .apps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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