/*
 * Werkwijze — Martha Kindercoaching
 * ----------------------------------------
 * Alleen op de Werkwijze-template geladen (zie functions.php).
 * Genummerde stap-kaarten. Twee-koloms layout + beeld komen uit de generieke
 * .media-split (components.css).
 */

.werkwijze__stappen {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
  list-style:     none;
  margin:         0;
  padding:        0;
}

.stap {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--space-5);
  padding:          var(--space-6) var(--space-8);
  background-color: var(--background);
  border:           1px solid var(--border);
  border-radius:    var(--radius-xl);
  box-shadow:       var(--shadow-sm);
  transition:       border-color var(--transition-fast),
                    box-shadow var(--transition-fast);
}

.stap:hover {
  border-color: color-mix(in oklab, var(--sage) 55%, var(--border));
  box-shadow:   var(--shadow-md);
}

.stap__num {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size:   var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: 1;
  color:       var(--sage-deep);
}

.stap__title {
  margin:      0 0 var(--space-2);
  font-size:   var(--text-xl);
  font-weight: var(--font-bold);
  color:       var(--ink);
}

.stap__text {
  margin:      0;
  color:       var(--muted-foreground);
  font-size:   var(--text-sm);
  line-height: var(--leading-relaxed);
}