.vacancy {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 15px;
    padding: 24px;
    margin-bottom: 55px;
}

.vacancy:last-child {
    margin-bottom: 0;
}

/* --- Header (icon + top label + tag), vertically centered --- */
.vacancy__header {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.vacancy__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--lighter-green, #DDF1E1);
    margin-right: 12px;
}

.vacancy__top-label {
    font-size: 20px;
    line-height: 36px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
    margin-right: 10px;
}

.vacancy__tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 40px;
    background-color: var(--green, #1FA238);
    color: var(--font-color, #0A2636);
    font-size: 20px;
    line-height: 36px;
    font-weight: 700;
}

/* --- Title --- */
/* `.vacancy .vacancy__title` (0,2,0) verslaat de thema-regel
   `.page-template-default h2` (0,1,1) die anders margin-top: 64px oplegt. */
.vacancy .vacancy__title {
    margin: 0 0 18px;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

/* --- Content --- */
.vacancy__content {
    font-size: 16px;
    line-height: 28px;
    color: var(--font-color, #0A2636);
}

.vacancy__content p {
    margin: 0 0 28px;
}

.vacancy__content p:last-child {
    margin-bottom: 0;
}

.vacancy__content ul {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.vacancy__content ul li {
    position: relative;
    padding-left: 41px; /* 25px icon + 16px gap */
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 18px;
}

.vacancy__content ul li:last-child {
    margin-bottom: 0;
}

.vacancy__content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M20.7334 5.23828C21.292 5.64453 21.417 6.42578 21.0107 6.98437L11.0107 20.7344C10.7959 21.0312 10.4639 21.2148 10.0967 21.2461C9.72949 21.2773 9.37402 21.1406 9.11621 20.8828L4.11621 15.8828C3.62793 15.3945 3.62793 14.6016 4.11621 14.1133C4.60449 13.625 5.39746 13.625 5.88574 14.1133L9.85059 18.0781L18.9912 5.51171C19.3975 4.95312 20.1787 4.82812 20.7373 5.23437L20.7334 5.23828Z' fill='%231FA238'/%3E%3C/svg%3E");
}

/* --- CTA --- */
.vacancy__cta {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 368px;
    max-width: 100%;
    padding: 10px 14px;
    border-radius: 5px;
    background-color: transparent;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Nooit onderstreept — ook niet via de globale
   `.page-default-surface .entry-content a:hover` regel (hogere specificiteit). */
.vacancy__cta,
.vacancy__cta:hover,
.vacancy__cta:focus,
.page-default-surface .entry-content a.vacancy__cta,
.page-default-surface .entry-content a.vacancy__cta:hover,
.page-default-surface .entry-content a.vacancy__cta:focus {
    text-decoration: none;
}

/* Hover: lichtgroene achtergrond + groene tekst (zoals .tt-menu elders op de site). */
.vacancy__cta:hover,
.vacancy__cta:focus {
    background-color: var(--lighter-green, #DDF1E1);
}

.vacancy__cta:hover .vacancy__cta-title,
.vacancy__cta:focus .vacancy__cta-title,
.vacancy__cta:hover .vacancy__cta-subtitle,
.vacancy__cta:focus .vacancy__cta-subtitle {
    color: var(--green, #1FA238);
}

.vacancy__cta-text {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.vacancy__cta-bullet {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 26px;
    color: var(--green, #1FA238);
}

.vacancy__cta-lines {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vacancy__cta-title {
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
    transition: color 0.2s ease;
}

.vacancy__cta-subtitle {
    font-size: 14px;
    line-height: 26px;
    font-weight: normal;
    color: var(--font-color, #0A2636);
    transition: color 0.2s ease;
}

.vacancy__cta-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Mobiel (<=767px). Bewust onderaan het bestand zodat deze overrides op
   bronvolgorde winnen van de basisregels (die deels dezelfde specificiteit
   hebben, bv. `.vacancy .vacancy__title`).
   ========================================================================== */
@media (max-width: 767px) {
    /* Geen kaart-achtergrond/padding meer. */
    .vacancy {
        background-color: transparent;
        padding: 0;
    }

    .vacancy .vacancy__top-label,
    .vacancy .vacancy__tag {
        font-size: 16px;
    }

    .vacancy .vacancy__title {
        font-size: 20px;
        line-height: 29px;
    }

    /* CTA-blok krijgt een witte achtergrond nu de kaart zelf transparant is. */
    .vacancy .vacancy__cta {
        background-color: #fff;
    }
}