.flex-layout.werkwijze {
  padding-inline: max(1rem, calc(1 * var(--su)));
  --werkwijze-radius: max(8px, calc(0.5 * var(--su)));
  --werkwijze-border: rgba(167, 162, 160, 0.5);
  margin-bottom: var(--panel-gap);
}

/* Bovenmarge alleen als er een blok boven staat: als eerste blok geldt de header-ruimte uit style.css. */
@media only screen and (min-width: 768px) {
  .flex-content + .flex-content > .flex-layout.werkwijze {
    margin-top: var(--panel-gap);
  }
}

.flex-layout.werkwijze .werkwijze-section {
  position: relative;
  display: grid;
  grid-template-columns: max(17rem, calc(27.5 * var(--su))) minmax(0, 1fr);
  border-radius: var(--werkwijze-radius);
  background-color: var(--licht-grijs-50);
  padding: max(4rem, calc(8.25 * var(--su))) 0 max(4.5rem, calc(9.125 * var(--su))) max(1.5rem, calc(3.5 * var(--su)));
}

.flex-layout.werkwijze .werkwijze-title {
  margin: 0;
  color: var(--ats-blue);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.flex-layout.werkwijze .werkwijze-tabs {
  display: flex;
  flex-direction: column;
  gap: max(0.5rem, calc(0.896 * var(--su)));
  margin-top: max(2rem, calc(3.6875 * var(--su)));
}

.flex-layout.werkwijze .werkwijze-tab {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: max(3rem, calc(3.5625 * var(--su)));
  padding-inline: max(0.75rem, calc(1 * var(--su)));
  border: 0;
  border-radius: var(--werkwijze-radius);
  background-color: transparent;
  color: var(--ats-blue);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.flex-layout.werkwijze .werkwijze-tab:hover {
  background-color: var(--ats-yellow-10);
}

.flex-layout.werkwijze .werkwijze-tab.is-active,
.flex-layout.werkwijze .werkwijze-tab.is-active:hover {
  background-color: var(--ats-yellow);
}

.flex-layout.werkwijze .werkwijze-tab:focus-visible {
  outline: 2px solid var(--ats-blue);
  outline-offset: 2px;
}

.flex-layout.werkwijze .werkwijze-tab-number {
  flex-shrink: 0;
  width: max(1.5rem, calc(1.8125 * var(--su)));
  font-size: var(--desktop-body-sm);
  line-height: 0.9;
}

.flex-layout.werkwijze .werkwijze-tab-text {
  font-size: var(--dekstop-body-lg);
  line-height: 1.1;
}

.flex-layout.werkwijze .werkwijze-main {
  min-width: 0;
  padding-left: max(1.5rem, calc(2.5 * var(--su)));
}

.flex-layout.werkwijze .werkwijze-label {
  display: flex;
  align-items: center;
  gap: max(6px, calc(0.375 * var(--su)));
  margin: 0;
  color: var(--ats-blue);
  font-size: var(--desktop-body-xxs);
  line-height: 1.63;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flex-layout.werkwijze .werkwijze-label-dot {
  width: max(8px, calc(0.5 * var(--su)));
  height: max(8px, calc(0.5 * var(--su)));
  background-color: var(--ats-yellow);
}

.flex-layout.werkwijze .werkwijze-intro {
  max-width: max(30rem, calc(41.125 * var(--su)));
  margin-top: max(1rem, calc(1.9375 * var(--su)));
  color: var(--ats-blue);
  font-size: var(--desktop-body-sm);
  line-height: 1.63;
}

.flex-layout.werkwijze .werkwijze-slider {
  position: relative;
  margin-top: max(3rem, calc(4.5 * var(--su)));
}

.flex-layout.werkwijze .werkwijze-swiper {
  overflow: visible;
  clip-path: inset(-100vh -100vw -100vh 0);
}

.flex-layout.werkwijze .werkwijze-slide {
  width: max(20rem, calc(46 * var(--su)));
  height: auto;
  margin-right: max(1rem, calc(1 * var(--su)));
}

.flex-layout.werkwijze .werkwijze-card {
  display: flex;
  height: max(24rem, calc(25 * var(--su)));
  border: 1px solid var(--ats-grey);
  border-radius: var(--werkwijze-radius);
  background-color: var(--wit);
  overflow: hidden;
}

.flex-layout.werkwijze .werkwijze-card-visual {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(9rem, calc(18.9375 * var(--su)));
  margin: max(0.75rem, calc(1 * var(--su)));
  border: 1px solid var(--werkwijze-border);
  border-radius: max(4px, calc(0.25 * var(--su)));
  background-color: rgba(245, 245, 245, 0.5);
  overflow: hidden;
}

.flex-layout.werkwijze .werkwijze-card-visual img {
  width: auto;
  height: auto;
  max-width: 74%;
  max-height: 70%;
  object-fit: contain;
  aspect-ratio: auto;
  mix-blend-mode: multiply;
}

.flex-layout.werkwijze .werkwijze-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: max(1.25rem, calc(1.8125 * var(--su))) max(1.25rem, calc(2.5 * var(--su))) max(1.5rem, calc(3.25 * var(--su))) max(1.25rem, calc(2.25 * var(--su)));
}

.flex-layout.werkwijze .werkwijze-card-number {
  color: var(--ats-blue);
  font-size: var(--desktop-body-xs);
  line-height: 0.9;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flex-layout.werkwijze .werkwijze-card-title {
  margin: max(1rem, calc(1.125 * var(--su))) 0 0;
  color: var(--ats-blue);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.flex-layout.werkwijze .werkwijze-card-text {
  margin-top: auto;
  padding-top: max(1.5rem, calc(2 * var(--su)));
  color: rgba(16, 39, 87, 0.6);
  font-size: var(--desktop-body-sm);
  line-height: 1.63;
}

.flex-layout.werkwijze .werkwijze-scrollbar {
  position: relative;
  height: 2px;
  margin-top: max(1.5rem, calc(3 * var(--su)));
  border-radius: 2px;
  background-color: rgba(19, 51, 109, 0.1);
  cursor: grab;
}

.flex-layout.werkwijze .werkwijze-scrollbar .swiper-scrollbar-drag {
  height: 100%;
  border-radius: 2px;
  background-color: var(--ats-blue);
}

.flex-layout.werkwijze .werkwijze-cta {
  position: absolute;
  left: max(-5rem, calc(-10.0625 * var(--su)));
  bottom: max(1.5rem, calc(5.625 * var(--su)));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: max(0.75rem, calc(1 * var(--su)));
  padding: max(0.5rem, calc(0.625 * var(--su))) max(1rem, calc(1.5 * var(--su))) max(0.5rem, calc(0.625 * var(--su))) max(0.5rem, calc(0.5 * var(--su)));
  border-radius: var(--werkwijze-radius);
  background-color: var(--wit);
  box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.04);
  text-decoration: none;
}

.flex-layout.werkwijze a.werkwijze-cta {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.flex-layout.werkwijze a.werkwijze-cta:hover,
.flex-layout.werkwijze a.werkwijze-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: -4px 8px 24px rgba(0, 0, 0, 0.08);
}

.flex-layout.werkwijze .werkwijze-cta-avatars {
  display: flex;
  flex-shrink: 0;
}

.flex-layout.werkwijze .werkwijze-cta-avatar {
  width: max(2.5rem, calc(3 * var(--su)));
  height: max(2.5rem, calc(3 * var(--su)));
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1;
}

.flex-layout.werkwijze .werkwijze-cta-avatar + .werkwijze-cta-avatar {
  margin-left: max(-1.25rem, calc(-1.5 * var(--su)));
}

.flex-layout.werkwijze .werkwijze-cta-text {
  display: flex;
  flex-direction: column;
  color: var(--ats-blue);
  font-size: var(--desktop-body-sm);
  line-height: 1.6;
}

.flex-layout.werkwijze .werkwijze-cta-subtitle {
  opacity: 0.6;
}

@media only screen and (max-width: 991px) {
  .flex-layout.werkwijze .werkwijze-intro {
    max-width: none;
  }

  .flex-layout.werkwijze .werkwijze-section {
    grid-template-columns: minmax(0, 1fr);
    padding-right: max(1.5rem, calc(3.5 * var(--su)));
  }

  .flex-layout.werkwijze .werkwijze-main {
    padding-left: 0;
    margin-top: max(2rem, calc(3 * var(--su)));
  }

  .flex-layout.werkwijze .werkwijze-cta {
    left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .flex-layout.werkwijze {
    margin-bottom: 0;
    padding-inline: 0;
  }

  .flex-layout.werkwijze .werkwijze-section {
    padding: 2.5rem 1rem 3rem;
    border-radius: 0;
  }

  .flex-layout.werkwijze .werkwijze-tabs {
    display: none;
  }

  .flex-layout.werkwijze .werkwijze-slide {
    width: 100%;
  }

  .flex-layout.werkwijze .werkwijze-card {
    flex-direction: column;
    height: auto;
  }

  .flex-layout.werkwijze .werkwijze-card-visual {
    width: auto;
    aspect-ratio: 303 / 220;
  }

  .flex-layout.werkwijze .werkwijze-card-body {
    padding: 0 1rem 1.5rem;
  }

  .flex-layout.werkwijze .werkwijze-card-text {
    padding-top: 1rem;
  }

  .flex-layout.werkwijze .werkwijze-cta {
    position: static;
    margin-top: 1.5rem;
  }
}