/**
 * Grid Layout CSS
 * 
 * Uniform grid layout with equal card sizes.
 * All cards have the same width and height.
 * Best for: Clean, predictable displays
 * 
 * Responsive Behavior:
 * - Desktop (>768px): Uses user's grid_columns setting (2-5 columns)
 * - Tablet (481px-768px): Reduces to 2 columns maximum
 * - Mobile (≤480px): Always 1 column for optimal viewing
 */

/* Grid Layout - Desktop */
.prompts-grid.layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--aipg-grid-columns, 3), 1fr);
  gap: 1.5rem;
}

/* Grid Layout - Tablet (481px to 768px) */
@media (max-width: 768px) and (min-width: 481px) {
  .prompts-grid.layout-grid {
    /* Limit to 2 columns max on tablet, even if user set higher */
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* Grid Layout - Mobile (≤480px) - ALWAYS 1 column */
@media (max-width: 480px) {
  .prompts-grid.layout-grid {
    /* Force single column on mobile regardless of user setting */
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
}

/* Grid Layout - Very Small Screens (≤360px) */
@media (max-width: 360px) {
  .prompts-grid.layout-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem; /* Smaller gap for very small screens */
  }
}