/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_site/General/OpenGemeentenSite-Section.css
 * - opengemeenten_site/Components/Cards/OpenGemeentenSite-Cards.css
 * - opengemeenten_site/Components/Cards/OpenGemeentenSite-Card.css
 * - opengemeenten_categories/Components/Tags/OpenGemeentenCategories-Tag.css
 * - opengemeenten_linkhandling/Partials/Button/OpenGemeentenLinkHandling-Button.css
 *
 * Variables can be set there globally or override them here!
 */

.recruitment-featured-and-latest {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.recruitment-featured-and-latest.section--color-primary {
    /* --color-background: var(--root-color-background--primary); */
}

.recruitment-featured-and-latest.section--color-secondary {
    /* --color-background: var(--root-color-background--secondary); */
}

.recruitment-featured-and-latest.section--color-support {
    /* --color-background: var(--root-color-background--support); */
}

.recruitment-featured-and-latest.section--color-grey {
    /* --color-background: var(--root-color-background--grey); */
}

.recruitment-featured-and-latest__header {
    --color-text: var(--root-color--primary);
    /* --font-family: initial; */
    /* --font-size: initial; */
    /* --font-style: initial; */
    /* --font-weight: initial; */
    /* --line-height: initial; */
}

@media (min-width: 30em) {
    .recruitment-featured-and-latest__header {
        --line-height: 3rem; /* Keep the same height as a button */
    }
}

.section--color-primary .recruitment-featured-and-latest__header {
    --color-text: var(--root-color--white);
}

.section--color-secondary .recruitment-featured-and-latest__header {
    --color-text: var(--root-color--white);
}

.section--color-support .recruitment-featured-and-latest__header {
    --color-text: var(--root-color--white);
}

.section--color-grey .recruitment-featured-and-latest__header {
    --color-text: var(--root-color--primary);
}

.recruitment-featured-and-latest__button {
    --background-color: var(--root-color--primary);
    --border-top-color: var(--root-color--primary);
    --border-right-color: var(--root-color--primary);
    --border-bottom-color: var(--root-color--primary-dark);
    --border-left-color: var(--root-color--primary);
    --color: var(--root-color--white);
}

.recruitment-featured-and-latest__button:active,
.recruitment-featured-and-latest__button:focus,
.recruitment-featured-and-latest__button:hover {
    --background-color: var(--root-color--primary-dark);
    --border-top-color: var(--root-color--primary-dark);
    --border-right-color: var(--root-color--primary-dark);
    --border-bottom-color: var(--root-color--primary-darkest);
    --border-left-color: var(--root-color--primary-dark);
}

.section--color-primary .recruitment-featured-and-latest__button {
    --background-color: var(--root-color--white);
    --border-top-color: var(--root-color--white);
    --border-right-color: var(--root-color--white);
    --border-bottom-color: var(--root-color--white);
    --border-left-color: var(--root-color--white);
    --color: var(--root-color-text);
}

.section--color-primary .recruitment-featured-and-latest__button:active,
.section--color-primary .recruitment-featured-and-latest__button:focus,
.section--color-primary .recruitment-featured-and-latest__button:hover {
    --background-color: var(--root-color--white-dark);
    --border-top-color: var(--root-color--white-dark);
    --border-right-color: var(--root-color--white-dark);
    --border-bottom-color: var(--root-color--white-dark);
    --border-left-color: var(--root-color--white-dark);
}

.section--color-secondary .recruitment-featured-and-latest__button {
    --background-color: var(--root-color--white);
    --border-top-color: var(--root-color--white);
    --border-right-color: var(--root-color--white);
    --border-bottom-color: var(--root-color--white);
    --border-left-color: var(--root-color--white);
    --color: var(--root-color-text);
}

.section--color-secondary .recruitment-featured-and-latest__button:active,
.section--color-secondary .recruitment-featured-and-latest__button:focus,
.section--color-secondary .recruitment-featured-and-latest__button:hover {
    --background-color: var(--root-color--white-dark);
    --border-top-color: var(--root-color--white-dark);
    --border-right-color: var(--root-color--white-dark);
    --border-bottom-color: var(--root-color--white-dark);
    --border-left-color: var(--root-color--white-dark);
}

.section--color-support .recruitment-featured-and-latest__button {
    --background-color: var(--root-color--white);
    --border-top-color: var(--root-color--white);
    --border-right-color: var(--root-color--white);
    --border-bottom-color: var(--root-color--white);
    --border-left-color: var(--root-color--white);
    --color: var(--root-color-text);
}

.section--color-support .recruitment-featured-and-latest__button:active,
.section--color-support .recruitment-featured-and-latest__button:focus,
.section--color-support .recruitment-featured-and-latest__button:hover {
    --background-color: var(--root-color--white-dark);
    --border-top-color: var(--root-color--white-dark);
    --border-right-color: var(--root-color--white-dark);
    --border-bottom-color: var(--root-color--white-dark);
    --border-left-color: var(--root-color--white-dark);
}

.section--color-grey .recruitment-featured-and-latest__button {
    --background-color: var(--root-color--primary);
    --border-top-color: var(--root-color--primary);
    --border-right-color: var(--root-color--primary);
    --border-bottom-color: var(--root-color--primary-dark);
    --border-left-color: var(--root-color--primary);
    --color: var(--root-color--white);
}

.section--color-grey .recruitment-featured-and-latest__button:active,
.section--color-grey .recruitment-featured-and-latest__button:focus,
.section--color-grey .recruitment-featured-and-latest__button:hover {
    --background-color: var(--root-color--primary-dark);
    --border-top-color: var(--root-color--primary-dark);
    --border-right-color: var(--root-color--primary-dark);
    --border-bottom-color: var(--root-color--primary-darkest);
    --border-left-color: var(--root-color--primary-dark);
}


.recruitment-featured-and-latest__container {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: var(--column-gap, 2rem);
}

.recruitment-featured-and-latest__header {
    margin-top: 0;
}

.recruitment-featured-and-latest .recruitment-featured-and-latest__header + .cards {
    margin-top: 2rem;
}

.recruitment-featured-and-latest__button-below {
    margin-right: auto;
}

@media (min-width: 30em) {
    .recruitment-featured-and-latest__container {
        grid-template-columns: 1fr auto;
    }

    .recruitment-featured-and-latest__button:not(.recruitment-featured-and-latest__button-below) {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        margin-right: 0;
    }

    .recruitment-featured-and-latest .cards {
        grid-column-start: 1;
        grid-column-end: span 2;
    }
}



.recruitment-featured-and-latest {
    font-size: var(--font-size, 1rem);
}