/*
  New, additive stylesheet for the course list + filter component
  (Views/Partials/CourseList). Deliberately small: the two-column layout,
  card look, spacing and colors reuse the site's existing Bootstrap grid
  and utility classes (row/col-lg-*, d-grid/xl-grid-3/gap-30,
  border-radius, box, btn-Primary, radiobuttonlist, form-check, ...) and
  the CSS custom properties already defined in colors.css (--primary,
  --secondary, --third, --white, --grey, --light-grey, ...).

  Nothing in this file overrides an existing selector - it only adds the
  handful of rules (badges, card meta rows, pagination) that don't have
  an existing equivalent to reuse.
*/

.course-filter-group {
    margin-bottom: 1.75rem;
}

.course-filter-group h6 {
    margin-bottom: 0.75rem;
}

.course-filter-group .form-check,
.radiobuttonlist .form-check {
    margin-bottom: 0.5rem;
}

.course-filter-group .form-check-input:checked,
.radiobuttonlist .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.kurskort {
    transition: box-shadow 0.2s ease;
}

.kurskort:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.kurskort-badge {
    display: inline-block;
    align-self: flex-start;
    border-radius: 30px;
    padding: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--white);
    font-family: 'Aleo';
}

.kurskort-badge--plats {
    background-color: var(--primary);
}

.kurskort-badge--distans {
    background-color: var(--secondary);
}

.kurskort-meta {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--light-grey);
}

.kurskort-meta > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

.kurskort-meta span:first-child {
    color: var(--grey);
}

.course-list-toolbar select {
    min-width: 220px;
}

.course-pagination ul {
    padding-left: 0;
}

.course-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--primary);
    background: var(--third);
}

.course-pagination a.active,
.course-pagination a:hover {
    background: var(--primary);
    color: var(--white);
}

#courseListResults[aria-busy="true"] {
    opacity: 0.5;
    pointer-events: none;
}

@media (max-width: 991px) {

    #courseFilterForm {
        display:flex;
        flex-wrap: wrap;
    }
    .course-filter-group {
        margin-bottom: 1.25rem;
        width: 50%;
    }

    #courseFilterForm .btn-Primary {
        width: 50% !important;
    }

    .course-list-toolbar {
        display:block !important;
    }
}