/**
 * Tool2Match vacaturetemplate — alleen de nieuwe onderdelen (kopzone,
 * kenmerkenblok, slot-CTA). Al het andere hergebruikt bestaande theme-klassen.
 * Alles gescoped onder .vacancy-detail; kleuren volgens het Laride-merkpalet
 * (groen #144C4C, lime #CFEA5E, grijs #EAEAEA, zwart #303030).
 */

/* --- Zone 2: banner — lager dan de home-hero --------------------------- */
.vacancy-detail .modules__module-banner .image {
    min-height: 16rem;
}

@media screen and (min-width: 768px) {
    .vacancy-detail .modules__module-banner .image {
        min-height: 24rem;
    }
}

/* --- Zone 3: kenmerkenblok --------------------------------------------- */
.vacancy-detail__facts {
    margin: 2rem 0;
}

.vacancy-detail__facts-card {
    background-color: #EAEAEA;
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    align-items: center;
}

@media screen and (min-width: 992px) {
    .vacancy-detail__facts-card {
        padding: 2rem 2.5rem;
    }
}

.vacancy-detail__fact {
    display: flex;
    flex-direction: column;
    min-width: 8rem;
}

.vacancy-detail__fact-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #144C4C;
    margin-bottom: 0.25rem;
}

.vacancy-detail__fact-value {
    font-weight: 600;
    color: #303030;
}

.vacancy-detail__fact--cta {
    min-width: 0;
    margin-left: auto;
}

@media screen and (max-width: 767px) {
    .vacancy-detail__fact--cta {
        margin-left: 0;
        width: 100%;
    }
}

/* --- Zone 8: slot-CTA --------------------------------------------------- */
.vacancy-detail__apply {
    margin: 3rem 0 4rem;
}

.vacancy-detail__back {
    display: inline-block;
    margin-top: 1.25rem;
    color: #144C4C;
    text-decoration: underline;
}

/* --- Zone 5: sidebar-knop "Solliciteer op deze vacature" ---------------
   Het theme geeft .sidebar-cta .btn een vaste hoogte (2.5rem) en 1.2rem
   tekst. Dit label is langer dan het theme-label, dus op een smalle
   zijkolom (992-1199px, en telefoons rond 320px) loopt het over twee
   regels en valt de tekst buiten de knop. Hier groeit de knop mee. */
.vacancy-detail .sidebar-cta .btn--red {
    height: auto;
    min-height: 2.5rem;
    padding: 0.375rem 1.5rem;
    line-height: 1.3;
    text-wrap: balance;
}

/* --- Sollicitatiepagina: formulier van Tool2Match ----------------------
   De widget-CSS van Tool2Match regelt alleen de basis en heeft geen
   mobiele weergave. Het theme stijlt alleen input[type=submit] van CF7;
   de widget heeft een <button>, die krijgt hier dezelfde knop. */
.modules__module-contactform .form .t2m-apply__job {
    margin: 0 0 1.5rem;
}

.modules__module-contactform .t2m-flex > div {
    flex: 1 1 0;
    min-width: 0;
}

.modules__module-contactform .t2m-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8.125rem;
    height: 2.5rem;
    padding: 0 1.5rem;
    margin: 1rem 0 0;
    background-color: #CFEA5E;
    color: #303030;
    border: none;
    border-radius: 1.375rem;
    font-family: "Montserrat", "Avenir", sans-serif;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.92;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: all 200ms ease-in-out;
}

.modules__module-contactform .t2m-submit-button:hover,
.modules__module-contactform .t2m-submit-button:focus {
    background-color: rgb(196.2395604396, 229.2923076923, 57.9076923077);
}

@media (max-width: 767.98px) {
    .modules__module-contactform .t2m-flex {
        flex-direction: column;
        gap: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .modules__module-contactform .t2m-grid {
        grid-template-columns: 1fr;
    }
}