/* Jobs block */

.block-jobs {
    --jobs-gap: 20px;
    --jobs-padding: 1.5rem;
    --jobs-transition: 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.block-jobs__inner {
    display: flex;
    flex-direction: column;
    gap: var(--jobs-gap);
}

.block-jobs__title {
    width: 100%;
    margin: 0;
    text-align: left;
}

.block-jobs__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 0;
    /* Mobile only — on desktop the list runs to the edges */
    padding: 15px;
    list-style: none;
}

/* Location — same accordion shape as the accordion block */

.block-jobs__group {
    border-radius: var(--radius-06);
    background-color: var(--wp--preset--color--white);
}

.block-jobs__toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: var(--jobs-padding);
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* Square marker — blue, turning grey while the location is open */

.block-jobs__marker {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-02);
    overflow: hidden;
    background-color: var(--wp--preset--color--helder-blauw);
}

/* The grey grows out of the centre of the square over the blue, rather than
   switching colour. Stated explicitly so nothing else can move the origin. */
.block-jobs__marker-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--wp--preset--color--warm-grijs-02);
    transform: scale(0);
    transform-origin: center center;
    transition: transform var(--jobs-transition);
}

.block-jobs__group[data-accordion-status="active"] .block-jobs__marker-fill {
    transform: scale(1);
}

.block-jobs__group-title {
    flex: 1;
    margin: 0;
}

/* Grey until the location is open, then the text colour. Both need !important:
   the has-contrast-color preset class on the element carries one of its own. */
.block-jobs__group-count {
    flex-shrink: 0;
    color: var(--wp--preset--color--warm-grijs-03) !important;
}

.block-jobs__group[data-accordion-status="active"] .block-jobs__group-count {
    color: var(--wp--preset--color--contrast) !important;
}

.block-jobs__chevron {
    display: flex;
    flex-shrink: 0;
    transform: rotate(90deg);
    transition: transform var(--jobs-transition);
}

.block-jobs__group[data-accordion-status="active"] .block-jobs__chevron {
    transform: rotate(-90deg);
}

.block-jobs__chevron svg {
    display: block;
}

/* Panel */

.block-jobs__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--jobs-transition);
}

.block-jobs__group[data-accordion-status="active"] .block-jobs__panel {
    grid-template-rows: 1fr;
}

.block-jobs__panel-wrap {
    overflow: hidden;
}

.block-jobs__panel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0 var(--jobs-padding) var(--jobs-padding) var(--jobs-padding);
    list-style: none;
}

/* Vacancy */

.block-jobs__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: var(--border-01) solid var(--wp--preset--color--warm-grijs-02);
    border-radius: var(--radius-06);
    background-color: var(--wp--preset--color--white);
}

.block-jobs__card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.block-jobs__card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    color: var(--wp--preset--color--warm-grijs-04);
}

.block-jobs__card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Half a meta line the feed has no value for drops out, icon and all */
.block-jobs__card-meta-item:has([data-jobs-type]:empty),
.block-jobs__card-meta-item:has([data-jobs-location]:empty) {
    display: none;
}

.block-jobs__card-meta-icon {
    display: flex;
    flex-shrink: 0;
}

.block-jobs__card-meta-icon svg {
    display: block;
}

/* The theme styles the button itself — this only places it in the card */
.block-jobs__button {
    flex-shrink: 0;
}

/* Loading, empty and error — one state at a time, driven by the status on the feed */

.block-jobs__message {
    display: none;
    margin: 0;
    color: var(--wp--preset--color--warm-grijs-04);
}

.block-jobs__feed[data-jobs-status="loading"] .block-jobs__message--loading,
.block-jobs__feed[data-jobs-status="empty"] .block-jobs__message--empty,
.block-jobs__feed[data-jobs-status="error"] .block-jobs__message--error {
    display: block;
}

.block-jobs__feed:not([data-jobs-status="ready"]) .block-jobs__list {
    display: none;
}

/* Desktop */

@media (min-width: 782px) {
    .block-jobs {
        --jobs-gap: 30px;
        --jobs-padding: 3rem;
    }

    .block-jobs__list {
        padding: 0;
    }

    .block-jobs__card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 20px 24px;
    }
}