/* Responsive Grid Utilities - Shared breakpoints for card grids across all applications */
/* Uses CSS custom properties from base.css for consistent breakpoints */

/* Base: 1 column (small devices) */
.responsive-grid-1-2-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Medium devices: 2 columns */
@media (min-width: 1024px) and (max-width: 1399px) {
  .responsive-grid-1-2-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large devices: 3 columns */
@media (min-width: 1400px) {
  .responsive-grid-1-2-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Center empty state across all columns - only for empty state divs, not actual cards */
.responsive-grid-1-2-3 > .text-center:only-child {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}