.flex-layout.verhaal {
  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.verhaal {
    margin-top: var(--panel-gap);
  }

  /* Als eerste blok: extra ruimte onder de header, zoals voorheen. */
  .flex-repeater > .flex-content:first-child > .flex-layout.verhaal:first-child {
    padding-top: var(--panel-gap);
  }
}

.flex-layout.verhaal .verhaal-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: max(8px, calc(0.5 * var(--su)));
  background-image: linear-gradient(235.89deg, #13336d 7.84%, #2563d3 79.74%);
}

.flex-layout.verhaal .verhaal-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--wit) 8%, transparent),
    color-mix(in srgb, #000 15%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wit) 12%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  pointer-events: none;
}

.flex-layout.verhaal .verhaal-shape {
  position: absolute;
  top: 0;
  bottom: 12.31%;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.flex-layout.verhaal .verhaal-shape--1 {
  left: 53.18%;
  right: -24.85%;
  background-image: url("../../../../assets/img/verhaal-shape-1.svg");
  rotate: 180deg;
  scale: -1 1;
}

.flex-layout.verhaal .verhaal-shape--2 {
  left: 8.78%;
  right: 19.54%;
  background-image: url("../../../../assets/img/verhaal-shape-2.svg");
  scale: -1 1;
}

.flex-layout.verhaal .verhaal-inner {
  display: grid;
  grid-template-columns: 520fr 541fr;
  gap: max(2rem, calc(5.375 * var(--su)));
  padding: max(3rem, calc(9.25 * var(--su))) max(1.5rem, calc(9 * var(--su))) max(3rem, calc(9.25 * var(--su)));
}

.flex-layout.verhaal .verhaal-title,
.flex-layout.verhaal .verhaal-text {
  color: var(--licht-grijs);
  font-size: var(--desktop-body-sm);
  line-height: 1.63;
}

.flex-layout.verhaal .verhaal-title {
  max-width: 90%;
}

.flex-layout.verhaal .verhaal-title > *:first-child,
.flex-layout.verhaal .verhaal-text > *:first-child {
  margin-top: 0;
}

.flex-layout.verhaal .verhaal-title > *:last-child,
.flex-layout.verhaal .verhaal-text > *:last-child {
  margin-bottom: 0;
}

.flex-layout.verhaal .verhaal-title h1,
.flex-layout.verhaal .verhaal-title h2,
.flex-layout.verhaal .verhaal-title h3 {
  margin: 0 0 max(0.75rem, calc(1 * var(--su)));
  color: var(--licht-grijs);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

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

.flex-layout.verhaal .verhaal-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: 1.63;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flex-layout.verhaal .verhaal-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.verhaal .verhaal-text {
  max-width: max(20rem, calc(33.8125 * var(--su)));
  margin-top: max(1rem, calc(1.5 * var(--su)));
}

.flex-layout.verhaal .verhaal-body .pk-module.pk-button-group {
  margin-top: max(1.5rem, calc(2.625 * var(--su)));
  gap: max(0.5rem, calc(0.5 * var(--su)));
}

.flex-layout.verhaal .verhaal-body .pk-button {
  min-width: max(11rem, calc(13 * var(--su)));
}

.flex-layout.verhaal .verhaal-body .pk-button:nth-child(2) {
  --button-border-color-2: var(--licht-grijs);
  --button-text-color-2: var(--licht-grijs);
}

.flex-layout.verhaal .verhaal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: max(1.5rem, calc(3.375 * var(--su)));
  margin: max(2.5rem, calc(4.5 * var(--su))) 0 0;
}

.flex-layout.verhaal .verhaal-stat {
  border-left: 1px solid var(--licht-grijs);
  padding-left: max(0.5rem, calc(0.5 * var(--su)));
}

.flex-layout.verhaal .verhaal-stat-value {
  margin: 0;
  color: var(--licht-grijs);
  font-size: var(--scaling-h4);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.flex-layout.verhaal .verhaal-stat-label {
  margin: max(0.25rem, calc(0.25 * var(--su))) 0 0;
  color: var(--licht-grijs);
  font-size: var(--desktop-body-xxs);
  line-height: 1.63;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media only screen and (max-width: 991px) {
  .flex-layout.verhaal .verhaal-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: max(2rem, calc(3 * var(--su)));
    padding: max(3rem, calc(5 * var(--su))) max(1.5rem, calc(2.5 * var(--su)));
  }

  .flex-layout.verhaal .verhaal-text {
    max-width: none;
  }
}

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

  .flex-layout.verhaal .verhaal-section {
    border-radius: 0;
  }

  .flex-layout.verhaal .verhaal-inner {
    padding: 5rem 1rem;
  }

  .flex-layout.verhaal .verhaal-stats {
    gap: 1.5rem;
  }
}