.flex-layout.uitgelichte_projecten {
  --projecten-card: max(16rem, calc(24 * var(--su)));
  padding-inline: var(--panel-gap);
  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.uitgelichte_projecten {
    margin-top: var(--panel-gap);
  }
}

/* Sluit naadloos aan op de donkere band van varianten. */
.flex-content:has(> .flex-layout.varianten) + .flex-content > .flex-layout.uitgelichte_projecten {
  margin-top: 0;
}

.flex-layout.uitgelichte_projecten .projecten-section {
  position: relative;
  border-radius: max(8px, calc(0.5 * var(--su)));
  background-color: var(--ats-dark-blue);
  padding: max(2.5rem, calc(4.5 * var(--su))) max(1.5rem, calc(3.5 * var(--su))) max(2.5rem, calc(4.5 * var(--su)));
}

.flex-layout.uitgelichte_projecten .projecten-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: max(1.5rem, calc(2 * var(--su)));
}

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

.flex-layout.uitgelichte_projecten .projecten-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.uitgelichte_projecten .projecten-text {
  max-width: max(20rem, calc(31 * var(--su)));
  margin-top: max(1rem, calc(1.5 * var(--su)));
  color: var(--licht-grijs);
  font-size: var(--desktop-body-sm);
  line-height: 1.63;
}

.flex-layout.uitgelichte_projecten .projecten-text > *:first-child {
  margin-top: 0;
}

.flex-layout.uitgelichte_projecten .projecten-text > *:last-child {
  margin-bottom: 0;
}

.flex-layout.uitgelichte_projecten .projecten-text h1,
.flex-layout.uitgelichte_projecten .projecten-text h2,
.flex-layout.uitgelichte_projecten .projecten-text h3 {
  margin: 0 0 max(0.75rem, calc(1 * var(--su)));
  color: var(--licht-grijs);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.flex-layout.uitgelichte_projecten .projecten-text p {
  margin: 0 0 max(0.75rem, calc(0.75 * var(--su)));
}

.flex-layout.uitgelichte_projecten .projecten-controls {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: max(0.5rem, calc(0.5 * var(--su)));
}

.flex-layout.uitgelichte_projecten .projecten-nav {
  align-items: stretch;
  color: var(--licht-grijs);
  transition: opacity 0.3s ease;
}

.flex-layout.uitgelichte_projecten .projecten-nav svg {
  align-self: stretch;
  width: auto;
  height: auto;
  aspect-ratio: 1;
}

.flex-layout.uitgelichte_projecten .projecten-nav.prev svg path {
  rotate: -135deg;
}

.flex-layout.uitgelichte_projecten .projecten-nav.next svg path {
  rotate: 45deg;
}

.flex-layout.uitgelichte_projecten .projecten-nav.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}

.flex-layout.uitgelichte_projecten .projecten-archive {
  --button-border-color-2: var(--licht-grijs);
  --button-text-color-2: var(--licht-grijs);
  margin-left: max(0.75rem, calc(0.75 * var(--su)));
}

.flex-layout.uitgelichte_projecten .projecten-slider {
  position: relative;
  margin-top: max(2rem, calc(4.125 * var(--su)));
}

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

.flex-layout.uitgelichte_projecten .projecten-slide {
  display: flex;
  width: var(--projecten-card);
  height: auto;
  margin-right: calc(var(--projecten-card) * 24 / 384);
}

.flex-layout.uitgelichte_projecten .projecten-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(var(--projecten-card) * 472 / 384);
  border-radius: max(8px, calc(0.5 * var(--su)));
  text-decoration: none;
}

.flex-layout.uitgelichte_projecten .projecten-card.project {
  background-color: var(--wit);
}

.flex-layout.uitgelichte_projecten .projecten-card-visual {
  flex-shrink: 0;
  height: calc(var(--projecten-card) * 280 / 384);
  margin: calc(var(--projecten-card) * 16 / 384);
  border-radius: max(4px, calc(0.25 * var(--su)));
  background-color: var(--licht-grijs);
  overflow: hidden;
}

.flex-layout.uitgelichte_projecten .projecten-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  transition: scale 0.4s ease;
}

.flex-layout.uitgelichte_projecten .projecten-card.project:hover .projecten-card-visual img,
.flex-layout.uitgelichte_projecten .projecten-card.project:focus-visible .projecten-card-visual img {
  scale: 1.04;
}

.flex-layout.uitgelichte_projecten .projecten-card-title {
  margin: 0;
  font-size: max(1.25rem, calc(1.5625 * var(--su)));
  max-width: max(13rem, calc(18.15 * var(--su)));
  padding: max(0.75rem, calc(0.8125 * var(--su))) max(1rem, calc(1.5 * var(--su))) max(1rem, calc(2.375 * var(--su)));
  color: var(--ats-dark-blue);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.flex-layout.uitgelichte_projecten .projecten-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: max(0.5rem, calc(0.75 * var(--su)));
  margin-top: auto;
  padding: 0 max(0.75rem, calc(1 * var(--su))) max(0.75rem, calc(1.1875 * var(--su))) max(1rem, calc(1.5 * var(--su)));
}

.flex-layout.uitgelichte_projecten .projecten-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: max(0.4375rem, calc(0.4375 * var(--su))) max(0.75rem, calc(0.75 * var(--su))) max(0.5rem, calc(0.5 * var(--su)));
  border: 1px solid var(--licht-grijs);
  border-radius: max(4px, calc(0.25 * var(--su)));
  background-color: var(--licht-grijs);
  color: var(--ats-blue);
  font-size: var(--desktop-body-xxs);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flex-layout.uitgelichte_projecten .projecten-card-arrow {
  align-items: center;
  justify-content: center;
  width: var(--pk-button-size);
  height: var(--pk-button-size);
  border-radius: var(--pk-button-border-radius);
  background-color: var(--ats-yellow);
  color: var(--ats-blue);
}

.flex-layout.uitgelichte_projecten .projecten-card-arrow svg {
  width: 50%;
  height: 50%;
}

.flex-layout.uitgelichte_projecten .projecten-card.project:hover .projecten-card-arrow svg path,
.flex-layout.uitgelichte_projecten .projecten-card.project:focus-visible .projecten-card-arrow svg path {
  rotate: 45deg;
}

.flex-layout.uitgelichte_projecten .projecten-card.project.full {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ats-blue);
}

.flex-layout.uitgelichte_projecten .projecten-card.project.full::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(180deg, rgba(16, 39, 87, 0) 35%, rgba(16, 39, 87, 0.75) 100%);
}

.flex-layout.uitgelichte_projecten .projecten-card.project.full .projecten-card-visual {
  position: absolute;
  inset: 0;
  z-index: -2;
  height: auto;
  margin: 0;
  border-radius: inherit;
}

.flex-layout.uitgelichte_projecten .projecten-card.project.full .projecten-card-title {
  margin-top: auto;
  color: var(--wit);
}

.flex-layout.uitgelichte_projecten .projecten-card.project.full .projecten-card-footer {
  margin-top: 0;
}

.flex-layout.uitgelichte_projecten .projecten-card.project.full .projecten-chip {
  border-color: transparent;
  background-color: rgba(245, 245, 245, 0.19);
  color: var(--licht-grijs);
}

.flex-layout.uitgelichte_projecten .projecten-card.quote {
  border: 1px solid rgba(245, 245, 245, 0.5);
  padding: max(1.25rem, calc(1.6875 * var(--su))) max(1rem, calc(1.1875 * var(--su))) max(0.75rem, calc(1.1875 * var(--su)));
  color: var(--wit);
}

.flex-layout.uitgelichte_projecten .projecten-quote-person {
  display: flex;
  align-items: center;
  gap: max(0.75rem, calc(1 * var(--su)));
}

.flex-layout.uitgelichte_projecten .projecten-quote-avatar {
  flex-shrink: 0;
  width: max(3rem, calc(4 * var(--su)));
  height: max(3rem, calc(4 * var(--su)));
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1;
}

.flex-layout.uitgelichte_projecten .projecten-quote-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.63;
}

.flex-layout.uitgelichte_projecten .projecten-quote-name {
  font-size: var(--desktop-body-sm);
}

.flex-layout.uitgelichte_projecten .projecten-quote-role {
  font-size: var(--desktop-body-xs);
}

.flex-layout.uitgelichte_projecten .projecten-quote-title {
  font-size: max(1.25rem, calc(1.5625 * var(--su)));
  margin: max(1.25rem, calc(2.0625 * var(--su))) 0 0;
  max-width: max(13rem, calc(16.625 * var(--su)));
  color: var(--wit);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.flex-layout.uitgelichte_projecten .projecten-quote-text {
  margin: max(0.75rem, calc(1 * var(--su))) 0 0;
  padding: 0;
  max-width: max(16rem, calc(19.1875 * var(--su)));
  font-size: var(--desktop-body-sm);
  line-height: 1.625;
}

.flex-layout.uitgelichte_projecten .projecten-card.quote .projecten-card-footer {
  padding: 0;
}

.flex-layout.uitgelichte_projecten .projecten-card.quote .projecten-chip {
  border-color: transparent;
  background-color: rgba(245, 245, 245, 0.19);
  color: var(--licht-grijs);
}

.flex-layout.uitgelichte_projecten .projecten-location {
  color: var(--licht-grijs);
  font-size: var(--desktop-body-xxs);
  line-height: 0.9;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  opacity: 0.8;
}

.flex-layout.uitgelichte_projecten .projecten-scrollbar {
  position: relative;
  height: 2px;
  margin-top: max(1.5rem, calc(4.125 * var(--su)));
  border-radius: 2px;
  background-color: rgba(245, 245, 245, 0.2);
  cursor: grab;
}

.flex-layout.uitgelichte_projecten .projecten-scrollbar .swiper-scrollbar-drag {
  height: 100%;
  border-radius: 2px;
  background-color: var(--licht-grijs);
}

@media only screen and (max-width: 1200px) {
  .flex-layout.uitgelichte_projecten {
    --projecten-card: 21rem;
  }
}

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

  .flex-layout.uitgelichte_projecten {
    --projecten-card: 20rem;
  }

  .flex-layout.uitgelichte_projecten .projecten-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .flex-layout.uitgelichte_projecten .projecten-section {
    padding-inline: max(1.5rem, calc(2.5 * var(--su)));
  }
}

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

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

  .flex-layout.uitgelichte_projecten .projecten-nav {
    display: none;
  }

  .flex-layout.uitgelichte_projecten .projecten-archive {
    margin-left: 0;
  }

  .flex-layout.uitgelichte_projecten {
    --projecten-card: min(20rem, 78vw);
  }
}