/* ── PAGE ANIMATIONS ─────────────────────────────────── */
/* ── SCROLL REVEAL ───────────────────────────────────── */

/* ── FILTER BUTTONS ──────────────────────────────────── */
    /*
        FIX: Avoid @apply with ! modifier for dynamic classes.
        The Tailwind CDN processes styles at parse time based on
        existing DOM. Classes added later by JS may not get the
        right generated CSS. Use explicit standard CSS instead.
    */
    .mbx-filter-btn {
        padding: 10px 20px;
        border-radius: 9999px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border: 1px solid #e5e7eb;
        background-color: #ffffff;
        color: #6b7280;
        cursor: pointer;
        outline: none;
        transition: all 0.25s ease;
        line-height: 1;
    }
    .mbx-filter-btn:not(.is-active):hover {
        border-color: #9ca3af;
        color: #111827;
        background-color: #f9fafb;
    }
    /* FIX: explicit CSS rules — no @apply, no ! modifier — 100% reliable */
    .mbx-filter-btn.is-active {
        background-color: #111827;
        border-color: #111827;
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    /* ── JOB CARDS ───────────────────────────────────────── */
    .job-card {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 20px;
        border-radius: 1.5rem;
        border: 1px solid #e5e7eb;
        background-color: #ffffff;
        text-decoration: none;

        /* FIX: only transition the visual properties we care about.
           Using transition:all caused conflicts with medibyx-reveal's
           opacity/transform during the show-after-filter path. */
        transition: box-shadow 0.3s ease,
                    border-color 0.3s ease,
                    transform 0.3s ease;
    }
    @media (min-width: 768px) {
        .job-card {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 24px;
        }
    }
    .job-card:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        border-color: rgba(240, 144, 5, 0.4);
    }

    /* ── JOB WRAPPER HIDE ANIMATION ──────────────────────── */
    /*
        FIX: We animate the WRAPPER's opacity/transform,
        then JS sets display:none after the animation ends.
        Because the wrapper is display:none, the parent flex
        gap-3 no longer applies to it — NO phantom gaps.
    */
    .mbx-job-wrapper {
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .mbx-job-wrapper.is-hiding {
        opacity: 0;
        transform: scale(0.97) translateY(-6px);
        pointer-events: none;
    }
    .mbx-job-wrapper.is-hidden {
        display: none;
    }
    .mbx-job-wrapper.is-showing {
        opacity: 0;
        transform: scale(0.97) translateY(6px);
    }