.job-form, .job-grid, .job-filter {
    --_job-clr-accent:  var(--job-clr-accent, #861625);
    --_job-clr-card-bg: var(--job-clr-card-bg, #2D2D2DE5);
    --_job-clr-card-fg: var(--job-clr-card-fg, white);
    --_job-clr-content-bg: var(--job-clr-content-bg, none);
    --_job-clr-secondary-bg: var(--job-clr-secondary-bg, #E7EBF4);

    --_padding-inline-default: 200px;
    --_padding-inline: var(--padding-inline, var(--_padding-inline-default));

    @media(max-width: 1440px){ --_padding-inline-default: 100px;}
    @media(max-width: 1050px){ --_padding-inline-default: 50px;}
    @media(max-width: 768px){ --_padding-inline-default: 15px;}
}

.job-form {
    background-color: var(--_job-clr-content-bg);
}

.job-form-header {
    background-color: var(--_job-clr-accent);
    color: white;
    margin: 0;
    padding-block: 1.5rem;
    padding-inline: 1rem;
    text-align: center;
}

.job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,  minmax(min(300px, 90%), 1fr));
    gap: .5rem;
    padding-block: 1rem;
    padding-inline: 1rem;
}

.listing-card {
    display: flex;
    flex-direction: column;

    position: relative;
    background-color: var(--_job-clr-card-bg);
    color: var(--_job-clr-card-fg);
    border-radius: 10px;
    padding: 1rem;
    border: 4px solid transparent;
}

.listing-card:has(.listing-card__input:checked)  {
    border-color: var(--_job-clr-accent);
    order: -1;
}

.listing-card[data-hidden]:not(:has(.listing-card__input:checked)) {
    display: none;
}


.listing-card__title {
    font-size: 1.25rem;
    line-height: 1.1;
    margin: 0;
}

.listing-card__title[data-modal-open] {
    text-decoration: underline var(--_job-clr-accent) 2px;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.listing-card__description {
    flex-grow: 1;
}

.listing-card__apply, .listing-card__input {
    cursor: pointer;
}

.listing-card__location {
    font-style: italic;
}





.acfe-form button:disabled,
.acfe-form button[aria-disabled="true"] {
    opacity: 0.7;
    pointer-events: none;
}

.job-button--prev,
.job-button--next {
    width: fit-content;
}

.job-form .acf-form-submit,
.job-filter {
    padding-block: 1rem;
    padding-inline: 1rem;
    background-color: var( --_job-clr-secondary-bg);
}

.job-form .acf-form-submit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
}

.job-form .acf-input-wrap {
    overflow: visible;
}

.job-button--next {
    grid-column: 2;
    justify-self: end;
}
.job-button--prev {
    grid-column: 1;
}

.job-form :where(.acf-field-group) {
    margin: 1rem;
}

.job-form :where(.acf-field-group > .acf-label > label) {
    font-size: 2rem;
    text-decoration: underline var(--_job-clr-accent) 2px;
    text-underline-offset: 0.2em;
}

.job-grid__wrapper, .acf-field-group {
    margin-block: 2rem;
    margin-inline: auto;
}

.listing-modal {
    position: relative;
    padding: 0;
    width: auto;
    border: none;

    transition: .25s ease-in-out;
}

.listing-modal[open] {
    animation: dialog-fade-in .2s  ease forwards;

}

.listing-modal[open]::backdrop {
    animation: dialog-backdrop-blur .2s  ease forwards;
}

@keyframes dialog-fade-in {
    from {
        scale: .9;
        opacity: 0;
    }
    to{
        scale: 1;
        opacity: 1;
    }
}

@keyframes dialog-backdrop-blur {
    from {
        background: transparent;
        backdrop-filter: blur(0px);
    }
    to{
        background: color-mix(in oklab, currentcolor 20%, transparent);
        backdrop-filter: blur(4px);
    }
}



.listing-modal__close {
    position: absolute;
    right: 1rem;
    top: 0;
    background: none;
    color: white;
    font-size: 4rem;
    line-height: 1;
    padding: 0;
    z-index: 2;
}

.listing-modal__header {
    color: white;
    background-color: var(--_job-clr-accent);
    padding: 1rem;
}
.listing-modal__title {
    margin: 0;
    color: white;
}

.listing-modal__content {
    padding: 1rem;
}

.listing-modal .job-button {
    width: fit-content;
}

.job-form :where(.acf-fields.-top) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    @media(max-width: 768px){
        flex-direction: column;
    }

    & > * {
        flex-grow: 1;
        @media(max-width: 768px){
            width: var(--width-override, auto) !important;
        }
    }
}


.job-form :is(.acf-fields.-border, .acf-field, #dummyid) {
    border: none;
    max-width: none;
}



.job-form .acf-input input {
    background-color: #E7EBF4;
    border-radius: 9999px;
    border: 1px solid transparent
}
.job-form .acf-input input[type="file"] {
    border-radius: 0;
}

form.job-filter select {
    border-radius: 10px;
}
form.job-filter select:open {
    border-radius: 10px 10px 0 0;
}

.job-form .acfe-form > *, 
.job-grid, 
.job-filter {
    padding-inline: var(--_padding-inline);
}