/* New PTP landing page filter row (v2/practical-training-programs/new-index-2026.blade.php).
   ai-academy-filter.css sizes its .programs-section row for two controls (fit-content, no wrapping),
   so with Search + 5 dropdowns + Sort By it ran past the container and the page got a horizontal scroll.
   Here every control becomes one item of a single wrapping row that spans the full content width
   (edge to edge, lined up with the course cards below) and never exceeds the container. */

#ptp-filter-row.ai-academy-filter-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    padding-left: 0;
    padding-right: 0;
}

/* Chip row always gets its own full-width line under the controls. */
#ptp-filter-row .course-filter-chip-row {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    /* Flatten the wrappers so search, each dropdown and Sort By are equal items of the row.
       (Below 768px .filter_area is the toggled mobile panel, so it is left alone.) */
    #ptp-filter-row .filter_left,
    #ptp-filter-row .filter_area,
    #ptp-filter-row .filer_column {
        display: contents;
    }

    /* Each control fills the width it is given (its item decides the width). */
    #ptp-filter-row .Search_Box1,
    #ptp-filter-row .filer_column > .Input_Box,
    #ptp-filter-row #course_sort_by_hide_show {
        min-width: 0;
        max-width: none;
    }
    #ptp-filter-row .Search_Box1 {
        width: auto;
    }
    #ptp-filter-row .Input_Box,
    #ptp-filter-row .Input_Box .filter-selection,
    #ptp-filter-row .Input_Box .filter-selection.Qualification,
    #ptp-filter-row .Input_Box .Sort_by {
        width: 100% !important;
        max-width: 100%;
    }

    /* Same inner spacing as the other dropdowns so "Newly Added" lines up with their text. */
    #ptp-filter-row .Sort_by .bootstrap-select > .dropdown-toggle {
        padding: 12px 16px;
    }

}

/* The top "Clear Filters" link is never shown: clearing lives in the chips line ("Clear All" button),
   which course-filter-chips.js only displays once a filter is applied. The hidden link stays in the page
   because that button works by clicking #clear_filter_btn. */
#ptp-filter-row .Clear_btn {
    display: none !important;
}

/* 768-1199px: tidy grid, three controls per line (2 gaps of 12px shared by 3 items). */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #ptp-filter-row .Search_Box1,
    #ptp-filter-row .filer_column > .Input_Box,
    #ptp-filter-row #course_sort_by_hide_show {
        flex: 0 0 calc((100% - 24px) / 3);
    }
}

/* 1200px and up: Search + 5 dropdowns on one line, edge to edge, equal widths. */
@media (min-width: 1200px) {
    #ptp-filter-row .Search_Box1 {
        flex: 1 1 0;
    }
    #ptp-filter-row .filer_column > .Input_Box,
    #ptp-filter-row #course_sort_by_hide_show {
        flex: 1 1 0;
    }
}

/* Option menus: as wide as their longest option (never narrower than the box, at most 320px) so names
   like "Business Development" / "Information Technology" are not clipped; anything longer wraps. */
#ptp-filter-row .bootstrap-select > .dropdown-menu {
    min-width: 100% !important;
    max-width: 320px !important;
    width: max-content !important;
}
#ptp-filter-row .bootstrap-select > .dropdown-menu li a span.text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Same display limit for every dropdown: options are 32px rows and at most 9 are visible before the list
   scrolls (9 x 32px = 288px). bootstrap-select otherwise sets its own inline heights from data-size and the
   window height, which gave each menu a different limit (and none at all for Sort By). */
#ptp-filter-row .bootstrap-select > .dropdown-menu {
    max-height: none !important;
}
/* Only the list wrapper (div.inner, a direct child) scrolls. The <ul> inside also has the class "inner",
   so a looser ".dropdown-menu .inner" selector gave both a scroll area and showed two scrollbars. */
#ptp-filter-row .bootstrap-select > .dropdown-menu > .inner {
    max-height: 288px !important;
    overflow-y: auto !important;
}
/* Sort By is not inside .filter-selection, so give its rows the same 32px height as the other menus. */
#ptp-filter-row .Sort_by .bootstrap-select > .dropdown-menu li a {
    font-size: 14px;
    line-height: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ai-academy-filter.css colours this link white for the AI Academy's dark section; this page is light. */
#ptp-filter-row .Clear_btn a {
    color: var(--Theme-Blue-500, #3a58ef);
}