/* 04b — Probleem + agents: waar het werk vastloopt, en welke agents het overnemen */
.probleem {
  --p-lijn: rgba(233, 232, 227, 0.12);
  padding-block: clamp(80px, 9vw, 130px);
  background: var(--zwart);
}
.probleem .probleem__kop {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: end;
  margin-bottom: clamp(48px, 5vw, 72px);
}
.probleem .probleem__titel { font-size: clamp(2.6rem, 5.3vw, 4.9rem); line-height: .88; letter-spacing: -0.035em; }
.probleem .probleem__titel span { white-space: nowrap; }
@media (max-width: 420px) { .probleem .probleem__titel span { white-space: normal; } }
.probleem .probleem__intro { max-width: 520px; color: var(--grijs-licht); font-size: 17px; line-height: 1.6; }

.probleem .probleem__pijn {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--p-lijn); border-bottom: 1px solid var(--p-lijn);
}
.probleem .probleem__pijn li {
  padding: 30px 28px 30px 0; display: grid; gap: 10px;
  border-right: 1px solid var(--p-lijn);
}
.probleem .probleem__pijn li + li { padding-left: 28px; }
.probleem .probleem__pijn li:last-child { border-right: 0; padding-right: 0; }
.probleem .probleem__pijn strong { font-size: 19px; font-weight: 600; color: var(--krijt); letter-spacing: -0.01em; }
.probleem .probleem__pijn span { color: var(--grijs); font-size: 15px; line-height: 1.55; }

.probleem .probleem__agents { margin-top: clamp(64px, 7vw, 110px); }
.probleem .probleem__agents-kop {
  font-family: var(--font-kop); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; color: var(--krijt);
  margin-bottom: 14px;
}
.probleem .probleem__agents-intro { margin-bottom: 30px; max-width: 520px; color: var(--grijs-licht); font-size: 16px; line-height: 1.6; }
.probleem .probleem__raster {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.probleem .agent {
  position: relative; padding: 26px 24px 28px; border-radius: var(--r-kaart);
  background: var(--nacht); border: 1px solid var(--p-lijn);
  display: grid; gap: 12px; align-content: start;
  transition: transform .5s var(--ease), border-color .3s ease;
}
.probleem .agent:hover { transform: translateY(-4px); border-color: rgba(233, 232, 227, 0.28); }
.probleem .agent__nr { font-size: 12px; font-weight: 600; color: var(--grijs); font-variant-numeric: tabular-nums; }
.probleem .agent h3 {
  font-family: var(--font-kop); font-weight: 900; text-transform: uppercase;
  font-size: 1.15rem; line-height: 1.05; letter-spacing: -0.015em; color: var(--krijt);
}
.probleem .agent p { color: var(--grijs-licht); font-size: 14.5px; line-height: 1.55; }
.probleem .probleem__noot { margin-top: 28px; max-width: 720px; color: var(--grijs); font-size: 15px; line-height: 1.6; }

@media (max-width: 1100px) { .probleem .probleem__raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .probleem .probleem__kop { grid-template-columns: 1fr; align-items: start; }
  .probleem .probleem__pijn { grid-template-columns: 1fr; }
  .probleem .probleem__pijn li { border-right: 0; border-bottom: 1px solid var(--p-lijn); padding: 22px 0; }
  .probleem .probleem__pijn li + li { padding-left: 0; }
  .probleem .probleem__pijn li:last-child { border-bottom: 0; }
  .probleem .probleem__raster { grid-template-columns: 1fr; gap: 10px; }
}

.probleem .probleem__kort { display: none; }
.probleem .probleem__nr { display: none; font-style: normal; }

/* mobiel: compacte kop en veegbare kaartjes in plaats van een tekstmuur */
@media (max-width: 760px) {
  .probleem { padding-block: 72px 64px; }
  .probleem .probleem__kop { gap: 18px; margin-bottom: 28px; }
  .probleem .probleem__titel { font-size: clamp(2.1rem, 10.5vw, 2.8rem); }
  .probleem .probleem__intro { font-size: 16px; line-height: 1.55; }
  .probleem .probleem__lang { display: none; }
  .probleem .probleem__kort { display: inline; }
  .probleem .probleem__pijn {
    display: flex; gap: 10px; border: 0; margin-inline: calc(var(--zij) * -1); padding: 2px var(--zij) 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--zij);
  }
  .probleem .probleem__pijn::-webkit-scrollbar { display: none; }
  .probleem .probleem__pijn li, .probleem .probleem__pijn li + li, .probleem .probleem__pijn li:last-child {
    flex: 0 0 78%; scroll-snap-align: start; padding: 20px 20px 22px; gap: 8px; align-content: start;
    border: 1px solid rgba(10, 10, 10, .08); border-radius: 16px; background: #fff;
  }
  .probleem .probleem__nr { display: block; font-size: 12px; font-weight: 600; color: var(--grijs); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
  .probleem .probleem__pijn strong { font-size: 18px; }
  .probleem .probleem__pijn span { font-size: 14.5px; }
}