/*
 * MP Site Core — All Scholarships listing styles.
 *
 * Colors/fonts marked var(--e-global-...) intentionally reference the live
 * Elementor Kit's own global CSS custom properties (per
 * app/plugin/docs/all-scholarships-rebuild-plan.md §1 + font.txt) instead
 * of hardcoded values, so this stays in sync with the site's theme
 * automatically. Every var() below carries a fallback for the (expected
 * rare) case the Kit variable isn't defined on a given page.
 *
 * Literal values (accent orange, toggle greys, card chrome) were given
 * directly, not derived from the Kit — see the plan doc §1 for why.
 */

.mpse-asl {
    font-family: 'Sofia Sans', sans-serif;
    max-width: 100%;
}

.mpse-asl__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 1.2em;
}

.mpse-asl__title {
    /* !important confirmed necessary, not reflexive — the Kit's default H1
       rule is itself !important (same mechanism as .mpse-asl-card__title;
       see that rule's comment), and `all: unset` alone (used below on the
       tab/filter buttons) doesn't help an <h1> since the conflict is Kit
       typography, not Kit button chrome. */
    font-family: var(--e-global-typography-41947a6-font-family, "Roboto", sans-serif) !important;
    font-size: var(--e-global-typography-41947a6-font-size, 1.75em) !important;
    font-weight: var(--e-global-typography-41947a6-font-weight, 700) !important;
    line-height: var(--e-global-typography-41947a6-line-height, 1.2em) !important;
    letter-spacing: var(--e-global-typography-41947a6-letter-spacing, -0.02em) !important;
    color: var(--e-global-color-primary, #0a0c29) !important;
    margin: 0 !important;
}

.mpse-asl__tabs {
    display: flex;
    gap: 0;
}

.mpse-asl__tab {
    /* all: unset alone (previous attempt) was NOT enough live — the theme's
       default <button> styling (background/border-radius/box-shadow) is
       itself !important, confirmed by the live screenshot still showing
       solid orange pill buttons after that fix. Matching it with !important
       on just the properties that make it look like a button is the correct
       response now that this is confirmed, not a first-resort reflex. */
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
    padding: 0 0.75em 0.6em;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #6b7280 !important;
    font-family: var(--e-global-typography-8c4d250-font-family, inherit);
    font-size: var(--e-global-typography-8c4d250-font-size, 0.95em);
    font-weight: var(--e-global-typography-8c4d250-font-weight, 600);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.mpse-asl__tab:hover {
    /* !important here isn't fighting the theme anymore, just beating the
       base rule's own !important color above — a normal rule never wins
       against !important regardless of specificity, no matter whose
       !important it is. */
    color: var(--e-global-color-primary, #0a0c29) !important;
}

.mpse-asl__tab.is-active {
    color: var(--e-global-color-primary, #0a0c29) !important;
    border-bottom-color: #fd7a2f !important;
}

.mpse-asl__controls {
    display: flex;
    align-items: center;
}

/* Duplicated count text, mobile-only (see .mpse-asl__count-text--compact
   below) — desktop keeps the single count block in its existing spot
   below this row, this stays out of the way there. */
.mpse-asl__count-text--compact {
    display: none;
}

.mpse-asl__controls-icons {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.mpse-asl__sort-icon-wrap {
    display: contents;
}

.mpse-asl__sort-icon {
    display: none;
}

/* Sort trigger and Filter trigger share one visual language — same
   background/border/radius/padding/height — they're two peers in the same
   control row, not two differently-styled widgets. */
.mpse-asl__sort,
.mpse-asl__filter-toggle {
    box-sizing: border-box;
    height: 2.6em;
    background-color: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 0.6em;
    padding: 0 1em;
    font-family: "Sofia Sans", sans-serif;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--e-global-color-primary, #0a0c29);
}

.mpse-asl__sort {
    outline: none;
}

.mpse-asl__filter-toggle {
    /* <select> (.mpse-asl__sort) renders fine untouched by the theme, but
       this is a <button> — same forced-orange-CTA collision as the tabs,
       confirmed live. display/align-items/gap now forced too: the theme's
       button reset almost certainly forces display (likely to
       inline-block) as part of that same !important rule, which silently
       breaks the flex layout — no flex container means gap does nothing
       (icon and text collapse together) and align-items:center never
       applies (falls back to inline/baseline alignment), which is exactly
       "not vertically centered, too little gap, feels smaller than it
       should be" all at once from one root cause. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6em !important;
    cursor: pointer;
    background-color: #f3f4f6 !important;
    border: 1px solid transparent !important;
    border-radius: 0.6em !important;
    box-shadow: none !important;
    color: var(--e-global-color-primary, #0a0c29) !important;
    padding: 0 1.1em !important;
    height: 2.6em !important;
}

.mpse-asl__filter-toggle svg {
    flex-shrink: 0;
}

.mpse-asl__filter-wrap {
    position: relative;
}

/* Adjacent dropdown, not an inline block in the page flow — anchored to
   the Filter trigger's bottom-right corner, floating above the page. */
.mpse-asl__filter-panel {
    position: absolute;
    top: calc(100% + 0.6em);
    right: 0;
    z-index: 20;
    width: max-content;
    max-width: min(46em, calc(100vw - 2em));
    background: #fff;
    border-radius: 1.2em;
    box-shadow: 0 0.6em 2em rgba(10, 12, 41, 0.14);
    padding: 1.5em;
}

.mpse-asl__filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin: 0 0 1em;
}

.mpse-asl__filter-panel-title {
    /* Same Kit-default-heading-is-!important collision — h3 gets it too,
       fixed proactively rather than waiting for it to be reported. */
    font-family: var(--e-global-typography-50b87d4-font-family, inherit) !important;
    font-size: var(--e-global-typography-50b87d4-font-size, 1.1em) !important;
    font-weight: var(--e-global-typography-50b87d4-font-weight, 700) !important;
    margin: 0 !important;
}

.mpse-asl__filter-close {
    /* Same forced-button-chrome collision as every other <button> in this
       component — background/border/radius/shadow need !important or the
       Kit's default button style wins regardless of what's declared here. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2em !important;
    height: 2em !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: #6b7280 !important;
    cursor: pointer;
    flex-shrink: 0;
}

.mpse-asl__filter-close:hover {
    background: #f3f4f6 !important;
    color: var(--e-global-color-primary, #0a0c29) !important;
}

.mpse-asl__filter-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.mpse-asl__filter-group h4 {
    /* Same Kit-default-heading-is-!important collision as the page/card
       titles (h1/h2) — h4 gets it too, confirmed live. */
    font-family: var(--e-global-typography-8c4d250-font-family, inherit) !important;
    font-size: var(--e-global-typography-8c4d250-font-size, 0.95em) !important;
    font-weight: var(--e-global-typography-8c4d250-font-weight, 700) !important;
    margin: 0 0 0.8em !important;
}

.mpse-asl__filter-group label {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--e-global-typography-664b455-font-family, inherit);
    font-size: var(--e-global-typography-664b455-font-size, 0.9em);
    margin-bottom: 0.7em;
    cursor: pointer;
    white-space: nowrap;
}

/* Custom radio dot — native radios can't be styled to match a design's
   ring+fill look directly, so the native control is kept (for real
   accessibility/keyboard behavior) but repainted via appearance:none +
   a ::before dot, rather than hidden behind a fake decorative element. */
.mpse-asl__filter-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.1em;
    height: 1.1em;
    margin: 0;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: inline-grid;
    place-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.mpse-asl__filter-group input[type="radio"]::before {
    content: '';
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #fd7a2f;
    transform: scale(0);
    transition: transform 0.1s ease;
}

.mpse-asl__filter-group input[type="radio"]:checked {
    border-color: #fd7a2f;
}

.mpse-asl__filter-group input[type="radio"]:checked::before {
    transform: scale(1);
}

.mpse-asl__filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-top: 0.6em;
    padding-top: 1.2em;
    border-top: 1px solid #e9e7e6;
}

.mpse-asl__filter-reset {
    /* !important throughout this block and the two below it — same
       confirmed theme <button> collision as the tabs/Filter trigger, not
       a guess this time. */
    box-sizing: border-box;
    background: #fff !important;
    border: 2px solid #e9e7e6 !important;
    border-radius: 0.75em !important;
    box-shadow: none !important;
    padding: 0.8em 1.7em !important;
    font-family: "Sofia Sans", sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--e-global-color-primary, #0a0c29) !important;
    cursor: pointer;
}

.mpse-asl__filter-apply {
    box-sizing: border-box;
    background-color: var(--e-global-color-accent, #fd7a2f) !important;
    border: 2px solid transparent !important;
    border-radius: 0.75em !important;
    box-shadow: none !important;
    padding: 0.8em 2.4em !important;
    font-family: var(--e-global-typography-accent-font-family, "Sofia Sans", sans-serif);
    font-size: 0.9em;
    font-weight: 600;
    color: #fff !important;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mpse-asl__filter-apply:hover {
    background-color: var(--e-global-color-af5c51d, #e0691f) !important;
}

.mpse-asl__count {
    margin-bottom: 0.8em;
}

.mpse-asl__count-text {
    font-family: var(--e-global-typography-3b3e4c3-font-family, inherit);
    font-size: var(--e-global-typography-3b3e4c3-font-size, 0.85em);
    font-weight: var(--e-global-typography-3b3e4c3-font-weight, 400);
}

.mpse-asl__list {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}

.mpse-asl__empty {
    text-align: center;
    padding: 2em;
    color: #6b7280;
}

.mpse-asl__load-more {
    /* margin:auto centering only works on a true block-level box with a
       definite (non-stretched) width — same theme-forces-button-display
       collision as the Filter trigger likely breaks that silently, so
       display/width are forced too this time, not just margin. */
    display: block !important;
    width: fit-content !important;
    margin: 1.5em auto 0 !important;
    background: #fff !important;
    border: 2px solid #e9e7e6 !important;
    border-radius: 0.75em !important;
    box-shadow: none !important;
    padding: 0.8em 2em !important;
    font-family: "Sofia Sans", sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--e-global-color-primary, #0a0c29) !important;
    cursor: pointer;
}

/* [hidden]!important above defeats the browser's native [hidden] {
   display:none } rule too — that's the actual bug this fixes: JS was
   correctly setting the hidden attribute the whole time, this CSS was
   just unconditionally overriding it back to visible regardless. A
   selector with attribute-selector specificity (0,2,0) beats the base
   rule's plain class (0,1,0) even though both are !important. */
.mpse-asl__load-more[hidden] {
    display: none !important;
}

.mpse-asl__load-more:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ── Card ─────────────────────────────────────────────────────────────── */

.mpse-asl-card {
    background: #fff;
    border: 2px solid #e9e7e6;
    border-radius: 1em;
    padding: 1em;
}

.mpse-asl-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
}

.mpse-asl-card__head .mpse-asl-card__title {
    /* Flex items default to min-width:auto, which can stop long text from
       wrapping properly next to a fixed-width sibling (the toggle) — this
       is the standard fix, not a mobile-only concern but matters most
       there since titles are much more likely to be multi-line. */
    min-width: 0;
}

.mpse-asl-card .mpse-asl-card__title {
    /* Upgraded to !important — h1 (page title), h3 (filter panel title),
       and h4 (filter group headings) all turned out to need it too, so
       this is the confirmed systemic Kit-default-heading-is-!important
       collision, not a one-off. No longer worth waiting to see if h2 is
       somehow the exception. */
    font-family: "Roboto", sans-serif !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    line-height: 1.2em !important;
    letter-spacing: -0.04em !important;
    color: var(--e-global-color-primary, #0a0c29) !important;
    margin: 0 !important;
}

.mpse-asl-card .mpse-asl-card__title a {
    /* An <a> doesn't just inherit the h2's color — same theme/browser
       default-link-color collision as .mpse-asl-card__apply, so this
       needs its own explicit (and !important, per that same lesson)
       color rather than assuming it follows the heading around it. */
    color: inherit !important;
    text-decoration: none;
}

.mpse-asl-card .mpse-asl-card__title a:hover {
    color: #fd7a2f !important;
    text-decoration: underline;
}

.mpse-asl-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-top: 0.8em;
}

.mpse-asl-card__due,
.mpse-asl-card__members {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--e-global-color-text, #4b5563);
    font-family: var(--e-global-typography-text-font-family, inherit);
    font-size: var(--e-global-typography-text-font-size, 0.9em);
    font-weight: var(--e-global-typography-text-font-weight, 400);
    line-height: var(--e-global-typography-text-line-height, 1.4em);
}

.mpse-asl-card__due svg,
.mpse-asl-card__members svg {
    flex-shrink: 0;
}

.mpse-asl-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8em;
    margin-top: 1em;
}

.mpse-asl-card__amount {
    font-family: var(--e-global-typography-98d8210-font-family, inherit);
    font-size: var(--e-global-typography-98d8210-font-size, 1.1em);
    font-weight: var(--e-global-typography-98d8210-font-weight, 700);
}

.mpse-asl-card__badge {
    display: inline-block;
    font-family: var(--e-global-typography-d65bcc7-font-family, inherit);
    font-size: var(--e-global-typography-d65bcc7-font-size, 0.75em);
    font-weight: var(--e-global-typography-d65bcc7-font-weight, 600);
    letter-spacing: var(--e-global-typography-d65bcc7-letter-spacing, 0);
    color: var(--e-global-color-2167832, #fff);
    background: #fd7a2f;
    border-radius: 4px;
    padding: 0.25em 0.9em;
    /* amount now renders first (left), badge second — this pushes
       whatever comes after IT (View Details/Apply) to the right edge
       instead; was on .amount before the DOM order flipped back. */
    margin-right: auto;
}

.mpse-asl-card__details,
.mpse-asl-card__apply {
    /* border-box is what actually matters here: .details carries a 2px
       border and .apply doesn't, so without it the two buttons render at
       different sizes even with identical padding — content-box (the
       default) adds the border on TOP of the box's declared size. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    text-decoration: none;
    font-family: var(--e-global-typography-accent-font-family, inherit);
    font-size: var(--e-global-typography-accent-font-size, 0.9em);
    font-weight: var(--e-global-typography-accent-font-weight, 600);
    line-height: var(--e-global-typography-accent-line-height, 1.4em);
    padding: 0.8em 1.7em;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: background-color 0.15s ease;
}

.mpse-asl-card__details {
    background: #fff;
    border-color: #e9e7e6;
    /* Same forced-link-color collision as .mpse-asl-card__apply and the
       card title link — this is also an <a>, and its color needed
       !important too, just hadn't been reported yet. */
    color: var(--e-global-color-primary, #0a0c29) !important;
}

.mpse-asl-card__apply {
    background-color: var(--e-global-color-accent, #fd7a2f);
    /* !important — confirmed necessary, not a guess: the previous
       non-important #fff fix (a variable-resolution theory) still showed
       invisible text live. This is an <a>, not a <button>, but the same
       theme pattern applies: something (likely a sitewide default link
       color) is forcing this text to a color that matches the background,
       and only !important beats another !important regardless of cause. */
    color: #fff !important;
}

.mpse-asl-card__apply:hover {
    background-color: var(--e-global-color-af5c51d, #e0691f);
}

/* ── Toggle switch ────────────────────────────────────────────────────── */

.mpse-asl-toggle {
    position: relative;
    display: inline-flex;
    width: 72px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
}

.mpse-asl-toggle__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.mpse-asl-toggle__track {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-direction: row;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 4px 14px 4px 4px;
    background: #f3f4f6;
    transition: background-color 0.2s ease;
}

.mpse-asl-toggle__knob {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mpse-asl-toggle__knob::before {
    content: '\00d7';
}

.mpse-asl-toggle__text {
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
}

.mpse-asl-toggle__text::before {
    content: 'Off';
}

.mpse-asl-toggle__input:checked ~ .mpse-asl-toggle__track {
    background: #fd7a2f;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 4px 4px 14px;
}

.mpse-asl-toggle__input:checked ~ .mpse-asl-toggle__track .mpse-asl-toggle__knob {
    background: #fff;
    color: #fd7a2f;
}

.mpse-asl-toggle__input:checked ~ .mpse-asl-toggle__track .mpse-asl-toggle__knob::before {
    content: '\2713';
}

.mpse-asl-toggle__input:checked ~ .mpse-asl-toggle__track .mpse-asl-toggle__text {
    color: #fff;
}

.mpse-asl-toggle__input:checked ~ .mpse-asl-toggle__track .mpse-asl-toggle__text::before {
    content: 'On';
}

.mpse-asl-toggle.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Loading spinner ──────────────────────────────────────────────────── */

/* A dedicated element in the button's own slot, not a ::after appended
   after the last card — that was rendering left-aligned inside the
   flex-column list (reads as "on the left") and, since the button stayed
   visible the whole time, caused a layout jump as it appeared/disappeared
   around still-visible content. JS shows exactly one of button/spinner at
   a time, never both, so nothing shifts. */
.mpse-asl__load-spinner {
    display: block;
    width: 1.6em;
    height: 1.6em;
    margin: 1.5em auto 0;
    border: 3px solid #fd7a2f;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mpse-asl-spin 0.7s linear infinite;
}

@keyframes mpse-asl-spin {
    to { transform: rotate(360deg); }
}

/* ── Responsive breakpoints (mobile <768px, tablet 768-1024px, desktop >1024px) ── */

@media (max-width: 767px) {
    .mpse-asl__header {
        flex-direction: column;
        align-items: stretch;
    }

    /* Tabs stay on one row but each one grows to fill an equal share of
       it instead of clustering to the left with empty space to the right
       — the underline then reads as one continuous full-width strip. */
    .mpse-asl__tabs {
        flex-wrap: nowrap;
    }

    .mpse-asl__tab {
        flex: 1 1 0;
        text-align: center;
    }

    /* A full-width "Sort by <option>" dropdown stacked above a small
       Filter button read as visually mismatched and wasted vertical
       space. Icon-only pair instead: the count moves up into this same
       row (duplicated text — see .mpse-asl__count-text--compact — the
       block version below stays hidden here), with the two triggers
       grouped at the right via space-between. */
    .mpse-asl__controls {
        justify-content: space-between;
    }

    .mpse-asl__count-text--compact {
        display: inline;
        font-family: var(--e-global-typography-3b3e4c3-font-family, inherit);
        font-size: var(--e-global-typography-3b3e4c3-font-size, 0.85em);
    }

    .mpse-asl__count {
        display: none;
    }

    /* The real <select> stays exactly as functional as ever (native
       picker, keyboard support) — it's just invisible and stretched over
       the icon, so tapping/clicking the icon is tapping/clicking the
       select. Faking a custom dropdown just to show one icon would throw
       away all of that for no reason. */
    /* rem, not em, on both this and .mpse-asl__filter-toggle below — that
       button's font-size:0.85em (base rule) makes its OWN em-sizing
       compound against a smaller context than this wrapper's, so "2.6em"
       on each was actually computing to two different real pixel sizes.
       rem is root-relative and immune to that. */
    .mpse-asl__sort-icon-wrap {
        display: block;
        position: relative;
        width: 2.6rem;
        height: 2.6rem;
    }

    .mpse-asl__sort-icon-wrap .mpse-asl__sort {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        opacity: 0;
        cursor: pointer;
    }

    .mpse-asl__sort-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset: 0;
        background: #f3f4f6;
        border-radius: 0.6em;
        pointer-events: none;
    }

    .mpse-asl__filter-toggle {
        width: 2.6rem !important;
        height: 2.6rem !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .mpse-asl__filter-toggle-label {
        display: none;
    }

    /* The dropdown-anchored-to-its-trigger approach doesn't have a safe
       position on a phone screen (it's not actually viewport-centered,
       it's centered on the trigger button — which is fine at desktop
       widths where there's room either side, not fine on a narrow
       screen). Converting to a fixed full-height right-side drawer
       sidesteps the positioning math entirely: same place every time,
       regardless of where the trigger sits or how far the page has
       scrolled. */
    .mpse-asl__filter-panel {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        /* Starts off-screen; JS adds .is-open (after an initial reflow, so
           the transition actually has a "from" state to animate out of)
           to slide it in, and removes it to slide out — swipe-to-dismiss
           (listing.js) drives this same transform directly while dragging. */
        transform: translateX(100%);
        transition: transform 0.28s ease;
        width: min(85vw, 22em);
        max-width: none;
        height: 100vh;
        max-height: none;
        border-radius: 0;
        overflow-y: auto;
        z-index: 1000;
    }

    .mpse-asl__filter-panel.is-open {
        transform: translateX(0);
    }

    .mpse-asl__filter-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 12, 41, 0.45);
        opacity: 0;
        transition: opacity 0.28s ease;
        z-index: 999;
    }

    .mpse-asl__filter-backdrop.is-open {
        opacity: 1;
    }

    /* Three side-by-side columns don't fit a drawer this narrow — stack
       them, and let labels wrap instead of forcing the nowrap from
       desktop (which would just create horizontal scroll inside it). */
    .mpse-asl__filter-columns {
        flex-direction: column;
        gap: 1.2em;
    }

    .mpse-asl__filter-group label {
        white-space: normal;
    }

    .mpse-asl__filter-actions {
        flex-wrap: wrap;
    }

    .mpse-asl__filter-reset,
    .mpse-asl__filter-apply {
        flex: 1 1 auto;
        text-align: center;
    }

    .mpse-asl-card__foot {
        flex-direction: column;
        align-items: stretch;
    }

    /* .mpse-asl-card__foot is now a stretched flex column, which would
       otherwise stretch the badge to the full card width too — it should
       stay sized to its own text, not become a full-width bar. */
    .mpse-asl-card__badge {
        align-self: flex-start;
        margin-right: 0;
    }

    .mpse-asl-card__details,
    .mpse-asl-card__apply {
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .mpse-asl-card__foot {
        flex-wrap: wrap;
    }
}