/* ============================================================
   RIET QUADEN MAKELAARS — USP-strook

   Rustige regel met de 8 USP's van de bestaande site, elk met een klein
   rood vinkje. Bewust GEEN kaart-grid ("kaart-grid-slop"): gewoon een rij
   die op grotere schermen wrapt en op mobiel zacht horizontaal doorschuift
   (CSS-only, native scroll-snap — geen JS, dus ook reduced-motion-veilig
   en werkt zonder JavaScript).

   Kleurregel: --rood alleen voor het vinkje (decoratief SVG-icoon,
   aria-hidden, geen tekst dus geen 4.5:1-eis). Lopende tekst in --zwart
   op --warmgrijs (contrast ≈ 16:1).
   ============================================================ */

#usps {
  background: var(--warmgrijs);
  padding-block: clamp(3rem, 2.4rem + 3vw, 5rem);
}

.usps__kop {
  margin-bottom: var(--ruimte-lg);
  font-family: var(--font-kop);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  line-height: 1.3;
  text-align: center;
  color: var(--zwart);
}

.usps__lijst {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 40px;
}

.usps__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 320px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.usps__vink {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--rood);
}
.usps__vink path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   MOBIEL: zacht doorschuivende rij (native horizontaal scrollen,
   geen JS/library — scroll-snap + edge-fade als affordance)
   ============================================================ */
@media (max-width: 720px) {
  .usps__kop {
    text-align: left;
    margin-bottom: var(--ruimte-md);
  }

  .usps__lijst {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    /* bleed tot de viewportrand (compenseert de container-padding), met
       diezelfde ruimte terug als scroll-padding zodat het eerste/laatste
       item weer op de container-inset uitkomt */
    margin-inline: -24px;
    padding-inline: 24px;
    padding-bottom: 6px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 32px), transparent 100%);
  }
  .usps__lijst::-webkit-scrollbar { display: none; }

  .usps__item {
    flex: 0 0 auto;
    width: 240px;
    max-width: 240px;
    scroll-snap-align: start;
  }
}

@media (max-width: 420px) {
  .usps__item { width: 220px; max-width: 220px; }
}