/* ==========================================================================
   Werken bij — page-specific styles
   ========================================================================== */

/* ---- Page overrides ---- */
.page--werkenbij .header__logo-text {
  opacity: 1;
}

.page--werkenbij .header__lang-icon {
  opacity: 1;
}

.page--werkenbij .footer__info {
  background: var(--blue-100);
}

/* Section-label text: 22px on werkenbij (vs 18px default) */
.page--werkenbij .section-label__text {
  font-size: 1.375rem; /* 22px */
  line-height: 1.4;
  letter-spacing: 0;
}

/* ---- Werkenbij content wrapper ---- */
.werkenbij {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* ---- Body (main content area) ---- */
.werkenbij__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding-top: 56px;
  padding-bottom: 120px;
  width: 100%;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
}

.breadcrumb__icon {
  width: 24px;
  height: 24px;
}

.breadcrumb__text {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
  white-space: nowrap;
}

/* ---- Hero ---- */
.werkenbij-hero {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  padding: 0 var(--page-padding-x);
  width: 100%;
}

.werkenbij-hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.werkenbij-hero__title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 6rem; /* 96px */
  line-height: 1.05;
  letter-spacing: -2.88px;
  color: var(--green-1200);
  max-width: 1178px;
}

.werkenbij-hero__subtitle {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 2.375rem; /* 38px */
  line-height: 1.2;
  letter-spacing: -0.76px;
  color: var(--green-1200);
  max-width: 1059px;
}

/* ---- Photos ---- */
.werkenbij-photos {
  display: flex;
  gap: 10px;
  width: 100%;
  padding-left: var(--page-padding-x);
}

.werkenbij-photos__item {
  flex: 0 0 718px;
  height: 759px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.werkenbij-photos__item:nth-child(2) {
  flex: 0 0 777px;
}

.werkenbij-photos__item:last-child {
  flex: 0 0 679px;
}

.werkenbij-photos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Wat maakt werken bij Leene anders (USP) ---- */
.werkenbij-usp {
  display: flex;
  gap: 78px;
  align-items: flex-start;
  width: 1180px;
  max-width: 100%;
}

.werkenbij-usp__label {
  width: 281px;
  flex-shrink: 0;
}

.werkenbij-usp__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
  max-width: 820px;
}

.werkenbij-usp__card {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--blue-100);
  padding: 18px 20px 24px;
  width: 100%;
}

.werkenbij-usp__card-title {
  flex: 1 0 0;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.875rem; /* 30px */
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: var(--green-1200);
}

.werkenbij-usp__card-desc {
  flex: 1 0 0;
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
}

/* ---- Wie we zoeken ---- */
.werkenbij-seek {
  display: flex;
  gap: 21px;
  align-items: flex-start;
  width: 1180px;
  max-width: 100%;
}

.werkenbij-seek__label {
  width: 337px;
  flex-shrink: 0;
}

.werkenbij-seek__content {
  flex: 1 1 0;
  min-width: 0;
}

.werkenbij-seek__text {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.875rem; /* 30px */
  line-height: 1.25;
  letter-spacing: -0.45px;
  color: var(--green-1200);
  padding-right: 120px;
  max-width: 938px;
}

/* ---- Vacatures ---- */
.werkenbij-vacatures {
  width: 100%;
}

.werkenbij-vacatures__inner {
  display: flex;
  gap: 78px;
  align-items: flex-start;
  background: var(--blue-100);
  padding: 120px;
  width: 100%;
}

.werkenbij-vacatures__label {
  width: 281px;
  flex-shrink: 0;
}

.werkenbij-vacatures__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
  max-width: 820px;
}

/* ---- Vacature card ---- */
.vacature-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--base-100);
  border-radius: var(--radius-card);
  overflow: hidden;
  width: 100%;
  padding-left: 16px;
}

.vacature-card__info {
  display: flex;
  gap: 17px;
  align-items: center;
}

.vacature-card__title {
  width: 325px;
  padding: 13px 0;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
}

.vacature-card__hours {
  padding: 13px 0;
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  letter-spacing: 0.09px;
  color: var(--green-1200);
  white-space: nowrap;
}

.vacature-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51px;
  height: 51px;
  background: var(--blue-200);
  flex-shrink: 0;
}

.vacature-card__arrow img {
  width: 24px;
  height: 24px;
}