/* ============================================
   Course Grid Component (pc-course-grid / rd-course-grid-*)
   Client-side search + pagination over a PHP-rendered course grid.
   Markup: rendered by protected/TS/src/PCLib/CourseGrid/CourseGrid.ts
   Mobile-first: 1 column, expanded via min-width (2 cols ≥640px, 4 cols ≥1024px).
   ============================================ */

.rd-course-grid-header {
    margin-bottom: var(--rd-spacing-x-big);

    .rd-selector-searchrow {
        margin-bottom: var(--rd-spacing-x-sm);
    }
}

.rd-course-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rd-spacing-lg);
}

/* Allow grid columns to shrink so single-line titles truncate instead of widening the column */
.rd-course-grid-item {
    min-width: 0;
}

.rd-course-grid-empty {
    text-align: center;
    padding: var(--rd-spacing-xxx-lg) 0;
    color: var(--rd-gray-500);
}

.rd-course-grid-empty .rd-icon-search {
    font-size: var(--rd-fontsize-15);
    margin-bottom: var(--rd-spacing-md);
}

/* Standalone paginator: center the navigation (no goto/count blocks here) */
pc-course-grid .rd-paginator {
    margin-top: var(--rd-spacing-lg);
    justify-content: center;
    padding-bottom: 0;
}

@media (min-width: 640px) {
    .rd-course-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rd-course-grid-header {
        margin-bottom: var(--rd-spacing-lg);

        .rd-selector-searchrow {
            margin-bottom: var(--rd-spacing-x-big);
        }
    }
}

@media (min-width: 1024px) {
    .rd-course-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}