/* Specifieke CSS voor de vacaturepagina */

/* --- Vacatures Lijst Sectie --- */
.vacancies-list-section {
    background-color: var(--background); /* Witte achtergrond */
}

.vacancies-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Standaard 1 kolom op mobiel */
    gap: var(--spacing-lg); /* Ruimte tussen de vacaturekaarten */
    max-width: 1200px; /* Max breedte voor de grid */
    margin: 0 auto; /* Centreer de grid */
}

.vacancy-card {
    background-color: var(--background);
    border-radius: 0.75rem; /* Afgeronde hoeken */
    box-shadow: var(--shadow-soft);
    padding: var(--spacing-lg);
    text-align: left; /* Tekst links uitlijnen in de kaart */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color); /* Lichte rand */
}

.vacancy-card:hover {
    transform: translateY(-5px); /* Lichte hover animatie */
    box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-color); /* Primaire kleur rand bij hover */
}

.vacancy-title {
    font-size: var(--font-size-h3); /* Titel van de vacature */
    font-weight: 700;
    color: var(--primary-color); /* Primaire kleur voor titel */
    margin-bottom: var(--spacing-xs);
}

.vacancy-location {
    font-size: var(--font-size-base);
    color: var(--muted-foreground);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
}

.vacancy-location i {
    color: var(--primary-color);
}

.vacancy-description {
    font-size: var(--font-size-base);
    color: var(--foreground);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-base);
}

.vacancy-requirements {
    list-style: none; /* Haal standaard bullet points weg */
    margin-bottom: var(--spacing-md);
    padding-left: 0;
}

.vacancy-requirements li {
    display: flex;
    align-items: center;
    font-size: var(--font-size-base);
    color: var(--foreground);
    margin-bottom: var(--spacing-xxs);
}

.vacancy-requirements li i {
    margin-right: var(--spacing-xs);
    font-size: var(--font-size-base);
    flex-shrink: 0; /* Voorkom dat icoon krimpt */
    color: #008080;
}

/* Specifieke styling voor de "Geen passende vacature?" kaart */
.vacancy-card.text-center .vacancy-title {
    color: var(--foreground); /* Donkere kleur voor deze titel */
}


/* --- Responsive Design (Media Queries) --- */

/* Medium screens (md: in Tailwind) - min-width: 768px */
@media (min-width: 768px) {
    .vacancies-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolommen op medium schermen */
    }
}

/* Large screens (lg: in Tailwind) - min-width: 1024px */
@media (min-width: 1024px) {
    .vacancies-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 kolommen op grote schermen */
    }
}