/*
 * Benefits grid - icoon-kaarten in een 3-koloms grid
 * Herbruikbaar voor voordelen / kenmerken op meerdere paginatypes.
 */

.benefits {
  padding:    var(--space-24) 0;
  background: var(--color-bg-white);
}

.benefits__inner {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--section-padding-x);
}

.benefits__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-5);
}

/* Optionele tekst onder de voordelen-kaarten. */
.benefits__outro {
  margin-top: var(--space-10);
  max-width:  760px;
  font-size:  var(--text-base);
  color:      var(--color-text-meta);
}

.benefit-card {
  display:       flex;
  gap:           var(--space-5);
  align-items:   flex-start;
  padding:       var(--space-8) var(--space-6);
  background:    var(--color-bg-white);
  border:        1px solid var(--color-border);
  border-radius: 14px;
  transition:    all var(--transition-fast);
}

.benefit-card:hover {
  border-color: var(--color-accent);
  transform:    translateY(-2px);
}

.benefit-card__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           52px;
  height:          52px;
  flex-shrink:     0;
  border-radius:   var(--radius-full);
  background:      var(--color-bg-accent-soft);
  color:           var(--color-accent);
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast);
}

.benefit-card__icon svg {
  width:  24px;
  height: 24px;
}

.benefit-card:hover .benefit-card__icon {
  background: var(--color-accent);
  color:      var(--color-text-light);
}

.benefit-card__title {
  margin:      var(--space-1) 0 var(--space-2);
  font-size:   var(--text-base);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color:       var(--color-text-heading);
}

.benefit-card__text {
  margin:      0;
  font-size:   var(--text-sm);
  line-height: 1.55;
  color:       var(--color-text-meta);
}

/* Alleen een titel (geen omschrijving): titel verticaal centreren t.o.v. het
 * icoon in plaats van bovenaan uitlijnen. */
.benefit-card:not(:has(.benefit-card__text)) {
  align-items: center;
}

.benefit-card:not(:has(.benefit-card__text)) .benefit-card__title {
  margin: 0;
}

@media (max-width: 960px) {
  .benefits__grid {
    grid-template-columns: 1fr;
  }
}