/**
 * DrawLeague Responsive Breakpoints System
 * Centralized breakpoint definitions for consistent responsive behavior
 * Used across all component CSS files
 * 
 * Mobile-first approach:
 * - Mobile (default): 0–479px
 * - Tablet (md): 480px–767px
 * - Large Tablet (lg): 768px–1023px
 * - Desktop (xl): 1024px–1279px
 * - Wide Desktop (2xl): 1280px+
 */

:root {
  /* Breakpoint values (used in JS and media query comments) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1440px;
}

/**
 * Responsive utilities - apply these classes to automatically adjust layouts
 */

/* Hide on small screens only */
.hide-sm {
  display: none !important;
}

@media (min-width: 480px) {
  .hide-sm {
    display: block !important;
  }
}

/* Hide on medium screens and up */
.show-sm {
  display: block !important;
}

@media (min-width: 480px) {
  .show-sm {
    display: none !important;
  }
}

/* Hide on tablet and up */
.hide-md {
  display: none !important;
}

@media (min-width: 768px) {
  .hide-md {
    display: block !important;
  }
}

/* Hide on small screens, show on tablet+ */
.show-md {
  display: block !important;
}

@media (max-width: 767px) {
  .show-md {
    display: none !important;
  }
}

/* Hide on desktop and up */
.hide-lg {
  display: none !important;
}

@media (min-width: 1024px) {
  .hide-lg {
    display: block !important;
  }
}

/* Grid responsive helpers */
.grid-cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

@media (max-width: 767px) {
  .grid-cols-auto {
    grid-template-columns: 1fr !important;
  }
}

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

@media (max-width: 1023px) {
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
}

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

@media (max-width: 767px) {
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}