/**
 * customisations-vacancies-slider.css
 *
 * Zelfde "kaart"-style als de homepage-slider, 
 * maar ALLES met eigen klassen (.vac-lone-*) zodat er geen overlap is.
 * 1 slide per view (500px breed, gecentreerd), geen loop,
 * geen nav/pagination als 1 vacancy.
 */

/* Outer container: twee kolommen (links info, rechts slider) */
.vac-lone-container {
  display: flex;
  flex-wrap: nowrap;
  color: #1c1e42;
  margin-bottom: 40px;
}

/* Linkerkolom */
.vac-lone-info {
  display: flex;
  flex-direction: column;
  max-width: 350px;
  width: 100%;
  margin-right: 50px;
}
.vac-lone-heading {
	    color: var(--e-global-color-accent);
    font-family: var(--e-global-typography-53fa72a-font-family), Sans-serif;
    font-size: var(--e-global-typography-53fa72a-font-size);
    font-weight: var(--e-global-typography-53fa72a-font-weight);
    letter-spacing: var(--e-global-typography-53fa72a-letter-spacing);
    word-spacing: var(--e-global-typography-53fa72a-word-spacing);
}

.careers-btn {
font-family: "Roboto", Sans-serif!important;
    font-size: 18px!important;
    font-weight: 400!important;
    fill: var(--e-global-color-accent)!important;
    color: var(--e-global-color-accent)!important;
    background-color: var(--e-global-color-secondary)!important;
    border-radius: 25px 25px 25px 25px!important;
    padding: 6px 30px 3px 6px!important;
}


.vac-lone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px; /* wat ruimte onder */
}

/* Het blok met de pijl-icoon en CURRENT VACANCIES */
.vac-lone-arrowlabel {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icoon (pijl-svg) */
.vac-lone-arrowicon {
  display: inline-block;
  width: 22px;
  height: 22px;
}

/* Tekst: "CURRENT VACANCIES" */
.vac-lone-currenttext {
  text-transform: uppercase;
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: #000; /* pas aan indien nodig */
}

/* Navigatie + bullet-paginatie */
.vac-lone-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 30px;
	margin-top: 20px;
}
.vac-lone-prev, .vac-lone-next {
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vac-lone-prev img, .vac-lone-next img {

	max-width: 100%;
  height: auto;
}
/* Bullets (swiper) */
.vac-lone-pagination {
  width: 100%;
  text-align: left;
}
.swiper-pagination-bullet {
  background-color: #000 !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 4px !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  background-color: #8DC63F !important;
}

/* Rechterkolom: Swiper container */
.vac-lone-swiper {
  overflow: hidden;
  width: 100%;
}

/* De slide (1 per view, 500px breed, gecentreerd) */
.vac-lone-slide {
  width: 650px !important;
  margin: 0 auto;
  display: flex;
  background-color: #E8EAEC;
  border-radius: 10px;
  overflow: hidden;
}

/* De "kaart" binnen de slide */
.vac-lone-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.vac-lone-card-info {
  padding: 20px;
}
.vac-lone-category {
  text-transform: uppercase;
  font-size: 0.8em;
  border: 1px solid #172B3C;
  border-radius: 25px;
  display: inline-block;
  padding: 0 8px;
  margin-bottom: 8px;
}
.vac-lone-date {
  color: #4f6566;
  font-size: 14px;
  margin-bottom: 10px;
}
.vac-lone-title {
  font-size: 22px;
  font-family: "Roboto", Sans-serif;
  margin-bottom: 20px;
}
.vac-lone-title a {
  color: #1c1e42;
  text-decoration: none;
}
.vac-lone-readmore {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-size: 16px;
  padding-left: 20px;
  margin-top: auto;
  margin-bottom: 20px;
  text-decoration: none;
}

/* Thumbnail onderaan */
.vac-lone-thumbnail a img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
}

/* Responsive: full width op mobiel */
@media (max-width: 768px) {
  .vac-lone-container {
    flex-wrap: wrap;
  }
  .vac-lone-info {
    margin-right: 0;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
  }
  .vac-lone-slide {
    width: 100% !important;
    margin: 0 auto;
  }
  .vac-lone-thumbnail a img {
    height: auto;
  }
}