/* Mobile specific Tailwind utilities and overrides */
@layer utilities {
  /* Example: Adjust container max width for mobile */
  .container-mobile {
    @apply max-w-screen-sm mx-auto px-4;
  }
  /* Ensure buttons are full-width on small screens */
  .btn-mobile-full {
    @apply w-full sm:w-auto;
  }
}

/* Mobile-first adjustments */
@media (max-width: 767px) {
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: block !important; }
  /* Reduce padding/margins */
  .p-mobile { @apply p-2; }
  .m-mobile { @apply m-2; }
}