/* /medewerkers/ — paginakop, intro, teamkaarten met hover-laag en bio-popups (dialog) */

/* --------------------------------------------
   Paginakop
   -------------------------------------------- */
.page-hero--medewerkers {
  --ph-img: url("/assets/images/Team-Behandelcentrum-Twente-Hengelo-1024x430-1.webp");
  --ph-pos: 0 23%;
  --ph-pos-t: 0 0%;
  --ph-pos-m: -165px 55%;
  --ph-min: 342px;
  --ph-min-m: 424px;
  --ph-overlay: .61;
  --ph-intro-w: 59.694%;
  --ph-pad-m: 0 0 10px;
}

/* --------------------------------------------
   Intro
   -------------------------------------------- */
.team-intro .page-section__inner { gap: 20px; padding: 50px 0; }

/* --------------------------------------------
   Raster met teamkaarten
   (het origineel houdt 4 kolommen van 300px aan tot 768px breed; daaronder loopt de pagina horizontaal door)
   -------------------------------------------- */
.team-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 10px;
}

.team-grid__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 50px;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  padding: 10px 0;
}

.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  width: 300px;
  min-width: 0;
  min-height: 390px;
  padding: 20px;
  border-radius: 15px;
  transition: transform var(--ease-transform);
  will-change: transform;   /* Elementor e-transform: eigen laag */
}

/* Foto als achtergrond (Elementor: background-image, maat auto of cover, positie in px) */
.team-card__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
}

.team-card__photo img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: none;
  object-position: var(--photo-pos, -107px 0);
}

.team-card--naomi,
.team-card--lisette,
.team-card--elles,
.team-card--harry,
.team-card--zonder-foto { background-color: var(--color-secondary); } /* no photo: orange card so the white name stays readable */

.team-card--naomi .team-card__photo img,
.team-card--lisette .team-card__photo img,
.team-card--elles .team-card__photo img { object-fit: cover; }

.team-card--naomi { --photo-pos: -88px 0; }
.team-card--lisette { --photo-pos: -116px 0; }
.team-card--elles { --photo-pos: -40px 0; }

/* Widgets in een e-transform-container staan elk op een eigen laag */
.team-card__w { will-change: transform; }

.team-card__name { color: var(--color-white); font-size: 35px; }
.team-card--rian .team-card__w:first-of-type { text-align: center; }

.team-card__text {
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 500;
  line-height: 19px;
}

/* Laag met kleurverloop, lijst en knop: verschijnt bij hover (en bij toetsenbordfocus) */
.team-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 390px;
  padding: 20px;
  border-radius: 15px;
  background-image: linear-gradient(229deg, var(--color-primary) 6%, var(--color-secondary) 90%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

.team-card:hover .team-card__overlay,
.team-card:focus-within .team-card__overlay {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: hover) {
  .team-card:hover { transform: translateY(-10px); }
}

.team-card__list { margin: 0; padding: 0; list-style: none; }

.team-card__point {
  position: relative;
  display: flex;
  align-items: center;
}

.team-card__point:not(:last-child) { padding-bottom: 7.5px; }
.team-card__point:not(:first-child) { margin-top: 7.5px; }

.team-card__icon { position: relative; display: flex; }

.team-card__icon svg {
  width: 14px;
  height: 14px;
  margin: 0 3.5px 0 0;
  fill: var(--color-white);
}

.team-card__point-text {
  align-self: center;
  padding-left: 5px;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  line-height: 17px;
}

.team-card__cta { padding-top: 20px; }

.team-card__btn {
  --btn-bg: var(--color-white);
  --btn-border: var(--color-white);
  --btn-color: var(--color-text);
  --btn-hover-bg: var(--color-text);
  --btn-hover-border: var(--color-text);
  --btn-hover-color: var(--color-white);
  cursor: pointer;
}

/* Kaart van Maud: in het origineel los in het raster (geen kaart), dus onzichtbaar */
.team-grid__empty {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.team-spacer { height: 20px; }

@media (max-width: 767px) {
  .team-grid__inner {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
    max-width: min(100%, 767px);
  }

  .team-card { width: 100%; }
  .team-card__btn { font-size: 13px; }
}

@media (max-width: 1024px) {
  .team-card { --photo-pos: 0 0; }
}

@media (max-width: 767px) {
  .page-hero--medewerkers { --ph-overlay: .8; }
  .team-intro .page-section__inner { padding: 30px 0; }
}

/* --------------------------------------------
   Bio-popup (Elementor-popup 363–1164: 542×764, wit, radius 15, fadeInUp .5s)
   -------------------------------------------- */
.team-dialog {
  width: 542px;
  max-width: 100vw;
  height: 764px;
  max-height: 100vh;
  padding: 0;
  border: 0;
  border-radius: 15px;
  overflow: hidden;
  background-color: #FFFFFF;
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
  color: var(--color-text);
}

.team-dialog::backdrop { background-color: #00000080; }

.team-dialog[open] { animation: team-fade-in-up .5s; }
.team-dialog.is-closing { animation: team-fade-in-up .5s reverse forwards; }

@keyframes team-fade-in-up {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: none; }
}

.team-dialog__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  font-size: 33px;
  line-height: 1;
  cursor: pointer;
}

.team-dialog__close svg { width: 1em; height: 1em; fill: var(--color-primary); }

.team-dialog__message {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;
  line-height: 1.5;
}

.team-dialog__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  max-width: 410px;
  margin: auto;   /* verticaal centreren zoals het origineel, maar zonder bovenkant af te snijden bij lange tekst */
}

.team-dialog__name { font-size: 60px; }
.team-dialog--1164 .team-dialog__name { font-size: 52px; }

.team-dialog__role {
  color: var(--color-primary);
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 600;
}

.team-dialog__bio {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
}

.is-dialog-open { overflow: hidden; }

@media (max-width: 1024px) {
  .team-dialog { width: 75vw; height: 75vh; }
}

@media (max-width: 767px) {
  .team-dialog { width: 95vw; height: 90vh; }
  .team-dialog__inner { max-width: none; padding: 0 15px; }
  .team-dialog__name,
  .team-dialog--1164 .team-dialog__name { font-size: 40px; }
  .team-dialog__bio { font-size: 15px; }
}
.team-card--elles .team-card__photo img { image-rendering: -webkit-optimize-contrast; }