/*
    Card Grid Container
    - A modern CSS Grid layout for responsive cards.
    - Uses repeat() and auto-fit to automatically adjust the number of columns.
    - minmax() ensures cards are at least 300px wide but can stretch to fill available space.
*/
.card-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem; /* Equivalent to MudBlazor's Spacing="4" */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* 
    This ensures that when there are no items to display, 
    the alert message takes up the full width of the grid container. 
*/
.card-grid-item-full-width {
    grid-column: 1 / -1; /* Span all columns */
}

/*
    Information Cards Grid
    - A responsive grid for a fixed number of items (4 cards).
    - Uses media queries to set the number of columns based on screen size.
    - This ensures the cards always stretch to fill the available space.
*/
.info-card-grid {
    display: grid;
    gap: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    grid-template-columns: 1fr; /* 1 column on extra-small screens */
}

/* Mobile-first approach: 300px minimum for better mobile experience */
@media (min-width: 768px) {
    .card-grid-container {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
}

/* 3 columns for small screens and up */
@media (min-width: 600px) {
    .info-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 3 columns for medium screens and up */
@media (min-width: 960px) {
    .info-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* On screens larger than 1200px, set a max of 2 columns */
@media (min-width: 1200px) {
    .card-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}