/* Medewerkers: donkere pagina over de volle breedte, daaronder 70px wit zoals live. */

.medewerkers-page { padding-bottom: 70px; }

/* Titel en fotogalerij */
.medewerkers-team { background: #1b252f; padding: 5%; }
.medewerkers-team__kicker { color: #61ce70; font: 400 22px/26px "Montserrat", sans-serif; margin: 0 0 20px; text-align: center; }
.medewerkers-team__title { color: #fbfbfb; font: 800 65px/1 "Archivo", sans-serif; margin: 0 0 20px; text-align: center; text-transform: uppercase; }
.medewerkers-gallery { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.medewerkers-gallery__item { aspect-ratio: 3 / 2; display: block; overflow: hidden; position: relative; }
.medewerkers-gallery__item img { display: block; height: 100%; object-fit: cover; width: 100%; }
.medewerkers-gallery__name { align-items: center; background: rgba(0, 0, 0, 0); color: transparent; display: flex; font-weight: 700; inset: 0; justify-content: center; padding: 20px; position: absolute; text-align: center; transition: background-color .8s, color .8s; }
.medewerkers-gallery__item:hover .medewerkers-gallery__name, .medewerkers-gallery__item:focus .medewerkers-gallery__name { background: rgba(0, 0, 0, .5); color: #fff; }

/* Profiel met foto */
.medewerkers-profile { background: #1b252f; display: flex; padding: 5%; }
.medewerkers-profile__body { display: flex; flex: 0 0 47.841%; flex-direction: column; gap: 20px; justify-content: center; padding-left: 5%; }
.medewerkers-profile__title { color: #61ce70; font: 800 40px/1 "Archivo", sans-serif; margin: 0; text-transform: uppercase; }
.medewerkers-profile__text { color: #cfcfcf; display: flex; font: 500 18px/1.2 "Montserrat", sans-serif; margin: 40px 0; }
.medewerkers-profile__photo { flex: 0 0 48.504%; margin-left: 4.292%; }
.medewerkers-profile__photo img { display: block; width: 100%; }

/* Fotogalerij: schermvullende weergave zoals de live Elementor-galerij. */
.medewerkers-lightbox { background: transparent; border: 0; color: rgba(237, 237, 237, .9); height: 100dvh; inset: 0; margin: 0; max-height: none; max-width: none; padding: 70px; width: 100vw; }
.medewerkers-lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.medewerkers-lightbox:fullscreen { background: rgba(0, 0, 0, .8); }
.medewerkers-lightbox button { align-items: center; background: none; border: 0; color: inherit; display: inline-flex; font-size: 20px; justify-content: center; padding: 5px; }
.medewerkers-lightbox button:hover { color: #fff; }
.medewerkers-lightbox button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.medewerkers-lightbox__toolbar { align-items: center; display: flex; gap: 14px; height: 60px; inset: 0 15px auto 20px; position: absolute; z-index: 2; }
.medewerkers-lightbox__counter { font-size: 15px; margin-right: auto; }
.medewerkers-lightbox__share { background: #fff; border-radius: 3px; padding: 10px 15px; position: absolute; right: 60px; top: 55px; z-index: 3; }
.medewerkers-lightbox__share a { display: block; padding: 3px; }
.medewerkers-lightbox__figure { align-items: center; display: flex; height: 100%; justify-content: center; margin: 0; }
.medewerkers-lightbox__image { max-height: 100%; object-fit: contain; width: auto; }
.medewerkers-lightbox__caption { bottom: 15px; color: rgba(237, 237, 237, .9); font: 700 16px/24px var(--up-font-body); left: 70px; position: absolute; right: 70px; text-align: center; }
.medewerkers-lightbox__previous, .medewerkers-lightbox__next { height: 60px; position: absolute; top: calc(50% - 30px); width: 60px; z-index: 2; }
.medewerkers-lightbox__previous { left: 80px; }
.medewerkers-lightbox__next { right: 80px; }
.medewerkers-lightbox.is-zoomed .medewerkers-lightbox__image { max-height: none; max-width: none; transform: scale(1.5); }

@media (max-width: 1024px) {
  .medewerkers-team__kicker { font-size: 17px; }
  .medewerkers-team__title { font-size: 44px; }
  .medewerkers-gallery { gap: 10px; grid-template-columns: repeat(2, 1fr); }
  .medewerkers-profile { flex-direction: column; min-height: 100vh; padding: 15% 5%; }
  .medewerkers-profile__body { flex: none; padding-left: 0; }
  .medewerkers-profile__title { font-size: 44px; }
  .medewerkers-profile__text { font-size: 20px; }
  .medewerkers-profile__photo { flex: none; margin: 320px 0 0; width: 48.504%; }
}

@media (max-width: 767.98px) {
  .medewerkers-team__kicker { font-size: 16px; }
  .medewerkers-team__title { font-size: 32px; }
  .medewerkers-gallery { grid-template-columns: 1fr; }
  .medewerkers-profile { flex-direction: column-reverse; }
  .medewerkers-profile__title { font-size: 32px; }
  .medewerkers-profile__text { font-size: 16px; }
  .medewerkers-profile__photo { margin: 0 0 302px; }
  .medewerkers-lightbox { padding: 60px 0; }
  .medewerkers-lightbox__previous, .medewerkers-lightbox__next { width: 26px; }
  .medewerkers-lightbox__previous { left: 0; }
  .medewerkers-lightbox__next { right: 0; }
  .medewerkers-lightbox__caption { left: 35px; right: 35px; }
}