/*
 * Work grid - genummerde icoon-kaarten (werkzaamheden binnen een dienst)
 */

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

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

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

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

@media (max-width: 960px) {
  .work__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.work-card {
  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);
}

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

.work-card__num {
  margin-bottom:  var(--space-5);
  font-size:      var(--text-xs);
  font-weight:    var(--font-bold);
  letter-spacing: 1.5px;
  color:          var(--color-accent);
}

.work-card__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  margin-bottom:   var(--space-6);
  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);
}

.work-card__icon svg {
  width:  26px;
  height: 26px;
}

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

.work-card__title {
  margin:         0 0 var(--space-3);
  font-size:      19px;
  font-weight:    var(--font-bold);
  letter-spacing: -0.3px;
  color:          var(--color-text-heading);
}

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

/* Donkere accent-kaart (bv. "Meer mogelijkheden?") */
.work-card--dark,
.work-card--dark:hover {
  background:    var(--color-primary);
  border-color:  var(--color-primary);
  transform:     none;
}

.work-card--dark .work-card__num {
  color: var(--color-icon-green);
}

.work-card--dark .work-card__icon,
.work-card--dark:hover .work-card__icon {
  background: rgba(168, 204, 79, 0.15);
  color:      var(--color-icon-green);
}

.work-card--dark .work-card__title {
  color: var(--color-text-light);
}

.work-card--dark .work-card__text {
  color: rgba(255, 255, 255, 0.7);
}